Thesis Customization Archives

Yesterday only I upgraded Technolism to Thesis WordPress Theme – one of the best premium wordpress themes in terms of SEO and the ease to customize it. I have been playing around with the look and design since then and this is another thesis tutorial that I wanted to share with you which has the information on how to add an additional navigation menu in Thesis for all of you who want to have two nav menus in Thesis – one above the Header and the other one right below it.

Also Read: How to install Thesis WordPress Theme on your Blog?

For every website, navigation menu is the very first thing which a visitor would look as that gives the overview of what your site / blog is all about. So, I wanted to have all my blog pages to be shown above the header and some prominent categories to be displayed below the header which depict the niche of my blog.

Below is a quick tutorial on how to customize the Nav menu to fulfil the purpose and add a second navigation menu below the Thesis Header.

Steps to include an additional Nav Menu in Thesis

#1. First of all, go to custom file editor and select custom_function.php. Or, you can access the same file through a FTP client like FileZilla, which I prefer.

#2. What I have done for my blog is – I have moved the default Thesis Navigation menu below the header and added the new Nav menu above the header, which will have the pages for my blog (like Contact Us and About Us). The default Nav menu can be then easily customised from the Thesis Options Panel which will have the categories per the requirements.

For this, simply copy and paste the below code to your custom_function.php file and save it:

/* Navigation Menu Customization - START */
/* paste in custom_function.php file */
/* Move default nav menu below header*/
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');
/* Add the second navigation menu */
/* Links for top menu will need to be manually added here, since this menu isn't supported by Thesis */
function secondnav_menu() {
?>
<ul class="menu">
<li><a href="http://www.technolism.com">Home</a></li>
<li><a href="http://www.technolism.com/about">About</a></li>
<li><a href="http://www.technolism.com/contact-technolism">Contact Us</a></li>
</ul>
<?php
}
add_action('thesis_hook_before_header', 'secondnav_menu');
/* Navigation Menu Customization - END */

#3. Now go to custom file editor and select custom.css. Copy and paste the below code to custom.css file and save it:

/* Navigation Menu Customization - START */
/* paste in custom.css file */
.custom ul#menu {
border-style: 0.5px solid #000000;
background:#2C79B5 none repeat scroll 0 0;
width: 100%;
float: left;
}
.custom ul#menu li { float:left; padding: 3px 5px 3px 5px; border:1px solid #FFFFFF;}
.custom ul#menu li a { font-size: 1.3em; line-height:1.2em; color: #FFFFFF;background:#2C79B5; }
.custom ul#menu li a:hover { color: #FFFFFF;baground:#299E41; }
/* Navigation Menu Customization - END */

This is the css code that I am using on Technolism. You can customize the above style sheet code to style your navigation menu to suit your theme.

#4. Now, go to your blog and refresh it. You will see two navigation menus now in your header area which will look something like below, if all goes well.

Note: Before you make any of the above changes, please take a backup of your custom_function.php and custom.css files.

Are you using Thesis on your blog? If not, you should try it as it is very easy to customize and looks simple and clean. Do try adding an additional nav menu on your Thesis Powered blog and let me know in case of any issues.

We have already discussed a way to delete the custom fields from all your posts in a single go. This solved the problem of the thumbnails with the custom field label “image” shown in the right side bar of the Thesis theme. Read the post here.

All of you who have recently purchased the great Thesis Theme, the most cumbersome task seems to be adding the thumbnails to the posts on the Homepage in Thesis. But, believe me, it is not so tough. I just did so on my other Personal Finance related blog and now, in this article we are going to discuss how you can accomplish the thumbnail display on your blogs’ homepage.

Adding a thumbnail along your posts makes your blog page more attractive and helps in increasing the CTR (Click Through Rate). This is applicable to all the wordpress themes and not only Thesis.

We are going to use the Thumbnail for Excerpts WordPress plugin to auto generate thumbnails for all posts and the same will be displayed along with the post teaser. What this plugin does is, it pulls the very first image from your posts and resizes the image without any extra work. Below are the steps how to auto generate post thumbnails in Thesis Theme.

Step 1: Login to WordPress Dashboard of the Blog on which the thumbnails are to be generated and navigate to Plugins > Add New.

Enter the name of the plugin as “Thumbnail Excerpts”. Click on Search Plugins and on the next screen, click on “Install Now” and activate the plugin.

Step 2: Once the plugin is installed and activated, navigate to the Dashboard > Settings > Thumbs Excerpts.

Step 3: As shown in the image below, you can make the changes to configure the basic options for the thumbnail, like size, placement (alignment), Default image, link settings etc.

Step 4: Once you are done with the settings above, click on the “Save changes” button to save all the configuration settings.

That’s it. You are done with Thumbnail on your blogs’ homepage. If you want to customize the design how the thumbnail image is displayed on the homepage, you can do so by adding an effect in the Custom.css file which we will be discussing in another post.

I hope that this tutorial helped you in easily generating the thumbnails on your thesis theme homepage. Do let me know if you face any issues in doing so.

Category: Thesis Customization

[How To] include an additional Navigation menu in Thesis

[How To] generate post thumbnails on Thesis homepage automatically; Thumbnail for Excerpts WordPress plugin