How Do I Create a Custome Wordpress Sidebar Menu Like This? WordPress
I want to create a "call to action" sidebar widget with custom menu.
I like the one on this page: http://lethemonfinancial.com/
I'm talking about the menu with "Download the Retirement Planning Survival Guide", "Download Our Free Consumer Awareness Guide to Annuities", and the like.
I believe this is the code:
<div id="sidebar" class="sidebar widget-area">
<div id="nav_menu-4" class="widget widget_nav_menu"><div class="widget-wrap"><div class="menu-cta-sidebar-container"><ul id="menu-cta-sidebar" class="menu"><li id="menu-item-368" class="newsletter-cta menu-item menu-item-type-post_type menu-item-object-page"><a href="http://lethemonfinancial.com/getting-started/" >Getting Started<br /><span class="sub">Schedule your free 15 minute phone consultation today!</span></a></li>
<li id="menu-item-83" class="signup-cta menu-item menu-item-type-custom menu-item-object-custom current-menu-item"><a href="http://lethemonfinancial.com/events/" >Sign up for Workshop or Webinar<br /><span class="sub">Click here to view a list of our FREE upcoming educational events.</span></a></li>
<li id="menu-item-84" class="download-cta menu-item menu-item-type-custom menu-item-object-custom"><a href="http://lethemonfinancial.com/retirement-survival-guide/" >Download the Retirement Planning Survival Guide<br /><span class="sub">Get answers to your most important retirement questions in our free 50 page report.</span></a></li>
<li id="menu-item-302" class="download-cta menu-item menu-item-type-custom menu-item-object-custom"><a href="http://lethemonfinancial.com/annuity-awareness-guide/" >Download Our Free Consumer Awareness Guide to Annuities<br /><span class="sub">This easy to understand report, is a comprehensive supplement to our video series on annuities.</span></a></li>
</ul></div></div></div>
<div id="nav_menu-8" class="widget widget_nav_menu"><div class="widget-wrap"><h4 class="widgettitle">Quicklinks</h4>
<div class="menu-quicklinks-container"><ul id="menu-quicklinks" class="menu"><li id="menu-item-385" class="quicklinks menu-item menu-item-type-post_type menu-item-object-page"><a href="http://lethemonfinancial.com/getting-started/" >Getting Started<br /><span class="sub"></span></a></li>
<li id="menu-item-389" class="quicklinks menu-item menu-item-type-post_type menu-item-object-page"><a href="http://lethemonfinancial.com/retirement-planning/retirement-income/" >Retirement Income Video Series<br /><span class="sub"></span></a></li>
<li id="menu-item-387" class="quicklinks menu-item menu-item-type-post_type menu-item-object-page"><a href="http://lethemonfinancial.com/retirement-planning/annuities/" >Annuities Video Series<br /><span class="sub"></span></a></li>
<li id="menu-item-388" class="quicklinks menu-item menu-item-type-post_type menu-item-object-page"><a href="http://lethemonfinancial.com/retirement-planning/social-security/" >Social Security Video Series<br /><span class="sub"></span></a></li>
<li id="menu-item-386" class="quicklinks menu-item menu-item-type-post_type menu-item-object-page"><a href="http://lethemonfinancial.com/blog/" >Blog<br /><span class="sub"></span></a></li>
</ul></div></div></div>
<div id="text-4" class="widget widget_text"><div class="widget-wrap"> <div class="textwidget"><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FLethemon-Financial%2F208420089176958&width=300&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true&appId=162062510540496" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowTransparency="true"></iframe></div>
</div></div>
</div>
I can't figure out if they used a plugin to create the menu. How do I create a similar call to action menu?
Answers (3)
John Cotton answers:
Why not copy the HTML, edit it suit your needs and make use of the text widget to put it in your sidebar?
cigarzfan comments:
I'm afraid that's the issue. I don't know how to customize it for my purposes. I don't know where the template resides, and I don't know how to fetch the data.
John Cotton comments:
<blockquote>I don't know how to customize it for my purposes.</blockquote>
Do you know the titles you want to use and how many? Do you know the descriptions you want displayed? Do you know the icons you want next to each one?
If so, then you know nearly all you need to. That particular site appears to be using a plugin, but I don't know which it is.
But it's just HTML so you need to change the content to match what you want.
Albert Shala answers:
You can, via widgets and there are plugins that help you do this, an alternative would be to code in the sidebar yourself and fetch the data you need for that specific template, also have a look at: http://codex.wordpress.org/Customizing_Your_Sidebar.
cigarzfan comments:
Again, this is where I am lost. I don't know how to customize it for my purposes. I don't know where the template resides, and I don't know how to fetch the data. I was hoping maybe someone recognized whether this was a plug-in with drop in graphics, etc.
Albert Shala comments:
You need to first add the structure (HTML) to the template and then work with css. You need to determine were you want this to appear, if it's on the homepage, see your template, if your homepage is set to be a blog, then it will most likely the main template index.php other wise if it's a static front-page, then within your wordpress admin panel, check the page that is set to be your homepage and see what template it is using, default means it's set to index.php and it's on that file that you will need to add the code to display your custom sidebar.
Arnav Joy answers:
try this css
#menu-cta-home, #menu-cta-sidebar {
background-color: #FEFEFE;
list-style-type: none;
padding: 10px 10px 1px;
}
.download-cta {
background: url("images/download-icon.png") no-repeat scroll 0 0 transparent;
margin: 0;
padding: 4px 0 10px;
}
.signup-cta {
background: url("images/signup-icon.png") no-repeat scroll 0 0 transparent;
margin: 0;
padding: 4px 0 10px;
}
ul li.newsletter-cta a, ul li.signup-cta a, ul li.download-cta a {
color: #194E97;
display: block;
font-family: 'Rokkitt',Arial,sans-serif;
font-size: 16px;
line-height: 1;
list-style-type: none;
padding: 0 0 0 60px;
text-decoration: none;
}
.sidebar .newsletter-cta .sub, .download-cta .sub, .signup-cta .sub {
border-bottom: 1px solid #DDDDDD;
padding: 0 0 12px;
}
style.css (line 794)
.newsletter-cta .sub, .signup-cta .sub, .download-cta .sub {
color: #5A5B5D;
display: block;
font-family: Arial,sans-serif;
font-size: 13px;
margin: 0;
}
ul li.newsletter-cta a, ul li.signup-cta a, ul li.download-cta a {
color: #194E97;
font-family: 'Rokkitt',Arial,sans-serif;
font-size: 16px;
line-height: 1;
list-style-type: none;
text-decoration: none;
}
do not forget to add images