Tag: thesis theme customization

I have already covered few articles to decrease bounce rate of blog, like by creating 404 error pages or styling previous next links in WordPress. In the following article I will explain how beneficial Post Tags are in WordPress and how we can style tags in single posts to decrease bounce rate of blog.

Why WordPress Tags are useful ?

Post Tags play a vital role in WordPress as they group similar articles together. Tags works as multiple categories for a blog entry which can be reused in future as an archive of articles. Another reason why I say why WordPress tags are important, is that they describe a visitor, what the article is about.

How to Style Post Tags in WordPress?

Usually every WordPress Theme like Thesis Theme has Post Tags enabled in Single Post Entries. You can always style Post Tags using CSS to increase Call to Action. For Instance, you can see the screenshot below, where you can see the post tags in blue.

Below is the post tags style code which you can add it in style.css or custom.css in case of Thesis Theme.

Make sure you take backup of style.css or custom.css using FTP, before adding the code in it.

[css]

.custom .post_tags a {
background-color: #e33e00 !important; /*Change Background Color*/
color: #FFFFFF; /*Change Text Color*/
line-height: 40px;
margin: 2px;
padding: 7px !important;
text-decoration: none !important;
}

[/css]

The above code is for Thesis Theme Post Tags Styling only. In case of custom WordPress Theme you can simply replace the class according to your Theme. You can play around with the background color and text color, as I have mentioned in the code.

We’re Done!

Once you have added the code, refresh on any single post entry to see the effect and you will find something like the screenshot below:

WordPress post tags though are optional, but I would recommend people to use WordPress to its best. Do you use Post Tags ? Let us know with a simple feedback, by posting comment below.

In my recent work on advertising website design, client being a flyer designer had an amazing portfolio on automotive flyer design. In order to show portfolio work, client demanded for a presentation or a slide show of work on landing page. A featured content slider was added on the homepage using thesis theme. A screenshot below will clear you about the featured content slider.

Featured content slider uses JavaScript which takes your blog to next level along with SEO advantage. In this article, we will learn to add image slider in wordpress thesis theme. But before we proceed with this article I recommend you to safely upgrade thesis theme.

Step 1: Add Content Slider Plugin in WordPress

In order to add featured slider in wordpress we will have to install a plugin. Below is a simple procedure to add slider plugin:

• Login to Dashboard Admin of WordPress site.
• Navigate to Plugins > Add new Plugin.
• Type “Content Slide Plugin” in search box and click on the submit button.
• In the listed result, click Install Now link under WordPress Content Slide Plugin by Snilesh. (Refer to the screenshot below)

• Install the plugin by clicking on install link underneath it and further Activate it.

Step 2: Configure Content Slider Settings

On activating the plugin, a left pane menu item “Content Slide” is added. In order to customize content slider, we will have to configure its settings for width height and content. Below is a simple procedure to configure slider.

• Navigate to Dashboard > Content Slide.
• Content Slide options are divided into three sections General Settings, Effects & Animation Settings and Image Source Settings.
• General Settings for content slider can be configured by referring the screenshot below:

• Effect & Animation Settings can be configured by referring the screenshot below:

• Image Source Settings can be configured by referring the screenshot below:

• Once you are done with the settings click the update button to save the configurations.

Step 3: Show Featured Slider in Thesis Theme

Now that we are done with the configuration of featured slider, we are left with to display slider on homepage template. Copy-paste the code snippet in the custom_functions.php, below:

Make sure you take full backup of custom_functions.php file using FTP before modifying it.

[php]
//Author: AkyJoe
//Email: akyjoe@gmail.com
function content_slider() {
if (is_home())
{ ?>
<div id="slider"><?php if(function_exists(‘wp_content_slider’)) { wp_content_slider(); } ?>
</div>
<?php }
}
add_action(‘thesis_hook_before_content’, ‘content_slider’);
[/php]

We are Done!

Now, that we have added the code, you can refresh the website and see the slider in homepage. If you find the slider not adjusting the layout, you can repeat Step 2, above to change width, height and color settings for slider, till you are satisfied.

We  come to the end of this tutorial to add featured content slider in thesis theme. If you have any query or further assistance is required, post comment below as your feedback.

With the increasing number of people writing articles on web, blogs are working hard to present them in best way. Being a blogger, I always get excited when I see my name published on web, for instance, a short bio explaining about you after each article you publish. By Blogs presenting its Author, I mean that a self-respect, delights a blogger and make them more enthusiastic towards their blogging. This is can be done, by adding an image of the author add adding a short bio about author, like you can see in the screenshot below.

In this article we will learn to add author bio in Thesis Theme. As we all know about the DIY thesis theme and its SEO optimization and design customizations. Thesis being a simple wordpress theme, is incomplete with few options like  Author Bio, share buttons, etc. But since thesis theme does allows customization, so we will add author bio after post on wordpress blog. But before we proceed with this article I recommend you to safely upgrade thesis theme.

Author BIO after post in Thesis

As we are know that Thesis customization is done using thesis hooks which are overriding functions. To show author bio in single post, copy-paste the code snippet in the custom_functions.php.

Make sure you take full backup of custom_functions.php file using FTP before modifying it.

[php]
//Author: AkyJoe
//Email: akyjoe@gmail.com

function add_author_bio() {
if (is_single())
{ ?>
<div class="postauthor">
<?php echo get_avatar( get_the_author_id() , 120 ); ?>
<h4>Article by <a href="<?php the_author_url(); ?>">
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
<p><?php the_author_firstname(); ?> has written <strong><?php the_author_posts(); ?></strong>  articles for us. <br/><br/><?php the_author_description(); ?></p>
</div>
<?php }
}
add_action(‘thesis_hook_after_post_box’, ‘add_author_bio’);

[/php]

• Now that we have added the author bio code, next we will have to style author bio by CSS code.
• Navigate to Thesis > Custom File Editor, select custom.css file and copy paste the below code snippet very carefully in Custom.CSS file.

[css]

.postauthor {background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }

[/css]

• Above code will style author bio for single post and you can change color of box background and font color accordingly in the above code to match the theme.
• Now, that we have added the code, you can refresh the website and see the author bio after post detailed page.

I’m sure by adding author bio in single post, will increase blog rating and a check plus to boost your author’s enthusiasm. Do let us know the after effects of adding Author Bio in your blog, by a simple feedback.

If you have any query or further assistance is required, then you can post comment below.