In this tutorial, we will see How to Setup Pagination on the Home Page of your Blog or Website running on the Thesis Theme for Wordpress.  This will replace the regular “Previous Entries” link that appears at the bottom of your Content Area, just below the Teasers (if you are using them).

What are we trying to create?

Install the WP Navigation Plugin

To setup pagination on your Wordpress Blog, we need to install the WP-Navigation Plug-in.

You can download the Plug-in from its Home Page -http://www.lesterchan.net/wordpress/readme/wp-pagenavi.html

Follow the instructions on the Plug-in page for installation.  Note there are different versions of the plug-in, for various Wordpress versions. Choose the right one based on your Wordpress install.

Default settings and options for the plug-in is sufficient to get started. If you need further changes, options are available under Settings – PageNavi in your Wordpress Admin Dashboard

Proceed further only if the plug-in is successfully installed and activated.

Add code to custom_functions.php

Add the following code to custom_functions.php file.  You can find this file in the following path – <Thesis Theme Folder>/custom/custom_functions.php

/* Pagination */
function my_thesis_pagination() {
  echo "<div class='prev_next'>";
  wp_pagenavi();
  echo "</div>";
}
remove_action('thesis_hook_after_content','thesis_post_navigation');
add_action('thesis_hook_after_content', 'my_thesis_pagination');

Add styles to custom.css

Add the following code to custom.css file.  You can find this file in the following path – <Thesis Theme Folder>/custom/custom.css

/* Page Navigation */
.custom .full_width #content_box .wp-pagenavi .page {
  margin: 2px;
  padding: 2px 4px;
}

Further Styling up the Pagination Bar

With the default installation, your pagination bar looks something like this.

If you like to try your hand at CSS, then the pagination bar can be further styled by making changes to the following file:

<Wordpress Installation folder>/wp-content/plugins/wp-pagenavi/pagenavi-css.css

Get in touch with me, if you need any help in styling the pagination bar.

Hope you found this simple tutorial useful.  Share it on social media using the tools given below, so that more Thesis folks might use it!

Thesis Theme makes life a lot simpler, if you are trying to customize your blog.  In this post, I will show you how to display your latest tweets at the top of your content column.  You can either choose to display this only on the Home page or on all pages.

What we will Create?

This is what we are trying to create in this tutorial – the latest twitter update on the top of your content column.  There is also a link to your Twitter profile home page.

How do we get this?

As with any other customization in Thesis Theme, this requires changes in the following files found under the <Wordpress Root>/<Thesis theme folder>/custom folder.

• custom_functions.php
• custom.css

Changes in custom.css

Copy the following code into your custom.css file towards the bottom.  I have suitably demarcated the code with a comment, so that you can easily identify it later.

/* Twitter widget Before content */
#twitter_div {
  background:transparent url(images/twitter_verysmall.gif) no-repeat scroll 0 10px;
  padding:10px 0 10px 48px; position:relative;
}
#twitter_div li {
  font-family:georgia,serif;
  font-size:1em;
  font-size-adjust:none;
  font-stretch:normal;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  line-height:normal;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
}
#twitter_div li span {
  display:block;
  font-size:1.1em;
  font-style:italic;
}
#twitter_div ul {
  margin:0 0 8px 12px;
}
#twitter_div li span a a:visited {
  color:#2A69A3; text-decoration:none;
}
#twitter_link {
  color:#2A69A3;
  text-decoration:none;
  font-size:1em;
  font-style:italic;
  float:right;
  margin-right:25px;
}
/* Twitter widget Before content */ 

I have used a very small Twitter icon that displays on the left corner.  You can download the icon from here (right click and ‘Save as’).

Copy this file into your <Wordpress Root>/<Thesis theme folder>/custom/images folder.

Changes in custom_functions.php

Now copy the following code into your custom_functions.php file.  This code uses the ‘thesis_hook_before_content’ of Thesis.  So if you are already using this Hook in your Thesis Customization, just add only the HTML portion of this code towards the end (if you have any problems, feel free to contact me).

/* Latest Tweets above Content column */
function my_thesis_before_content() {
  if (is_home()) { ?>
   <div class='format_text'>
      <div id='twitter_div'>
        <ul id='twitter_update_list'>
	  <li>
		<script type='text/javascript' src='http://twitter.com/javascripts/blogger.js'></script>
		<script type='text/javascript' src='http://twitter.com/statuses/user_timeline/**yourtwitter**.json?callback=twitterCallback2&amp;count=1'></script>
	  </li>
	</ul>
        <div id='twitter_link'>
		<a href='http://twitter.com/**yourtwitter**'>Join Me on Twitter</a>
	</div>
       </div>
   </div>
<?php
  }
}
add_action('thesis_hook_before_content', 'my_thesis_before_content');

In the above code, there are a couple of points where it is mentioned as **yourtwitter**. Replace them with your Twitter username.

Current Code as is, would display the Twitter updates only on your home page. If you want this to be displayed on all other pages and posts, just remove the following

• if (is_home()) from the top
• } from the bottom

Tip: For the sake of this tutorial, I have used the thesis_hook_before_content hook. But you can easily replace with other hooks like thesis_hook_before_post_box, thesis_hook_before_post, thesis_hook_after_post, thesis_hook_after_post_box, etc., depending on where you need the Twitter updates to appear. Love the power of Thesis!

Conclusion

And, that’s it. Now just reload your page and see your latest tweet right there at the top. Contact me @tublogger or ashwin.chandrasekaran@gmail.com in case you face any issues with setting this up on your Thesis Blog. I would love to help!

Been a while since I created a Thesis tutorial.  Here you go!  I will show you how to create a “killer” Services and Portfolio Page using Thesis Theme.  In the portfolio section, you can even add the snapshots of the sites you created, testimonials and more.  Read on how to do it!

1.  Create a Page that uses a Custom Template

To start with, let us create a Wordpress page that will use a Custom Template.

Go to Pages in your WP Dashboard and select Add New.

Create a Page with the name Services. You can choose any name for your page, but just remember it.

On the right side, under Template choose the value as Custom Template

Create the page.

Go back to the Pages section and hover your mouse pointer over the Page Link to find out the “page id”. We will use this in our code.

Note: This page will use the full width layout and does not display sidebars.  Let me know if you need the sidebars too and I can help you

2.  Add styling to the custom.css file

Now add the following styling information into the custom.css file.  You can find this file under the following path – <path to the thesis theme>/custom/.  I have tried to use unique names for the services page – but if you find any of the identifiers are already used in your custom.css, feel free to replace them.

/* Services Page Styling */
.custom #content_box { background: transparent; }

 .custom #content { width: 100%; }

.custom .headline_area { margin-bottom:1em; }

.custom #content_box .headline_area h1 { color:#310D07; font-size:30px; font-weight:normal; letter-spacing:-1px; line-height:36px; margin-top:16px; border-bottom:1px dotted #310D07; }

.services_row { margin:0 -10px; overflow:hidden; width:900px; }

.services_column { display:inline; float:left; margin:0 10px; overflow:hidden; }

.services_grid_small { width:275px; }

.services_grid_medium { width:400px; }

.services_grid_small h3 { color:#310D07; font-size:24px; font-weight:normal; line-height:24px; margin:16px 0 12px; }

.services_grid_medium h3 { color:#310D07; font-size:24px; font-weight:normal; line-height:24px; margin:16px 0 12px; }

.services_column ul { font-size:16px; list-style-image:none; list-style-position:outside; list-style-type:disc; margin:0 0 16px 16px; }

.services_column li { padding-bottom:8px; }

.portfolio_column { display:inline; float:left; margin:0 10px; overflow:hidden; height:250px; }

.portfolio_column img { padding:10px; width:350px; height:230px; }

.quote li { list-style-type:none; }

.quote .caption { padding:10px; margin:10px; font-size:26px; font-style:italic; background:#F5F5F5 none repeat scroll 0 0; line-height:1.1em; }

.quote .client { font-style:italic; padding-bottom:5px; padding-right:20px; text-align:right; font-size:18px; }

3.  Add code to the custom_functions.php file

Then, add the following code the custom_functions.php file.  You can find this file under the following path – <path to the thesis theme>/custom/

/* SERVICES AND PORTFOLIO PAGE */

function services_page() {

// Repeat the array for the number of Portfolio you have
// image_name - Name of the Image copied under /custom/images in your Thesis theme
// portfolio_site_url - URL of the site you created
// portfolio_site_name - Name of the site you created
// testimonial - Testimonial given by your client
// client_name - Name of your client

$portfolio = array ( "portfolio_1"  => array ( "image_name" => "port_image1.jpg",
                                       		"portfolio_site_url" => "http://supersite1.com",
                                       		"portfolio_site_name" => "Super Site 1",
                                       		"testimonial" => "Thoughts Unlimited has done a wonderful job for me.  I am definitely looking forward to work with him again.",
                                       		"client_name" => "Brian Clark",
                                       		"client_site_name" => "Copyblogger",
                                       		"client_site_url" => "http://copyblogger.com"
                                     ),
"portfolio_2"  => array ( "image_name" => "port_image2.jpg",
                                       		"portfolio_site_url" => "http://supersite2.com",
                                       		"portfolio_site_name" => "Super Site 2",
                                       		"testimonial" => "Thoughts Unlimited is amazing with his Application Developm[ent capabilities! He rocks!",
                                       		"client_name" => "Darren Rowse",
"client_site_name" => "Problogger",
                                       		"client_site_url" => "http://problogger.net"
                                     )
                 );

//Give your Page ID and Page Name here
if (is_page('press') || is_page('1023')) { ?>

<div id="content">
<div class="post_box">
<div class="headline_area">
<h1>Services</h1>
</div>
<div class="format_text">
<div class="services_row">
<div class="services_column services_grid_small">
<h3>Web Design</h3>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
<li>Service 4</li>
<li>Service 5</li>
</ul>
</div>
<div class="services_column services_grid_small">
<h3>Web Development</h3>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
<li>Service 4</li>
<li>Service 5</li>
</ul>
</div>
<div class="services_column services_grid_small">
<h3>Thesis Skins</h3>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
<li>Service 4</li>
<li>Service 5</li>
</ul>
</div>
</div>
</div>
<div class="headline_area">
<h1>Portfolio</h1>
</div>
<div class="format_text">
<?php
foreach ($portfolio as $temp => $fields) {

?>
<div class="services_row">
<div class="portfolio_column services_grid_medium">
<a href="<?php echo $fields['portfolio_site_url']; ?>?rel=nofollow"><img src="<?php bloginfo('template_url'); ?>/custom/images/<?php echo $fields['image_name']; ?>" /></a>
</div>
<div class="portfolio_column services_grid_medium">
<ul class="quote">
<li>
<div class="caption">
<?php echo $fields['testimonial']; ?>
</div>
<div class="client">
- <?php echo $fields['client_name']; ?>, <a href="<?php echo $fields['client_site_url']; ?>?rel=nofollow"><?php echo $fields['client_site_name']; ?></a>
</div>
</li>
</ul>
</div>
</div>
<?php
}
?>
</div>
<div class="headline_area">
<h1>Contact</h1>
</div>
<div class="format_text">
<!-- Put your contact form code here -->
<h3>Create your contact form here...</h3>
</div>
</div>

<?php }
}

remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample');
add_action('thesis_hook_custom_template', 'services_page');

Make sure to add the code at the bottom and there are no additional brackets that can cause compilation errors.

At the start of the function, I have used an array where you can specify the Portfolio details.  Make sure to suitably edit them to match your portfolio.  Edit the Page Name and Page Id in the function to match the one for the page you created.  Create Thumbnails of your Portfolio sites, resize them to 350×230, upload them to custom/images folder and set the file names the appropriate variables. Also, under the Services placeholder add your areas of expertise.

Also at the bottom, I have created a placeholder for the Contact form.  Create your own contact form here, for prospective clients to quickly contact you.

4.  You are done!

Were you expecting more steps?  No – you are done!  Now add the new page to the Navigation bar of your Thesis Theme (you can find this under the Appearance => Design Options from WP Dashboard).

Now, you can start enjoying your New Services and Portfolio page.  Here is a sample of how the Services and Portfolio section would appear in your blog.

Copyright
This code is free to use for both personal and commercial purposes.  But, it is provided for under Creative Commons Attribution License.  Click on the link to know more about the usage terms.

You can download the ZIP file with the Code and Installation instructions here.   Copy the sample portfolio images file in the ZIP, to Theme Folder/custom/images folder.

Please share it using the links given below, so that more Thesis users can benefit from this tutorial.  Thanks in advance, for sharing!

Thesis theme provides an option to display only post excerpts in the home page – but the problem I found was it shows very little content that might not entice the reader.  Also the post header images were gone from the home page.

Then I found a very neat option available with Thesis to control the home page post excerpt content.  You can choose to display whatever you want in the Home Page and let the rest go in to the Post Page.  I know many of you may be already using it, but it is just to the benefit for newbies like me.

1.  Disable the Post Excerpt Display

Thesis provides you an option to display only excerpts in the Home Page.  You can navigate to Admin –> Appearance –> Thesis Options and expand the Posts under the Display Options section.

Since this option doesn’t allow you to control the content displayed and also sometimes the hides the Post Header Image, we disable it for our purpose.

You can also customize the clickthrough text. This decides the Text that will be displayed on the Home Page, for the user to click and get on to the post page.

To keep it simple, I have made it “Read More…”, but you can customize it based on the needs.

2.  Inject <!—more—> into your Posts

Once you are done writing the post, decide on the contents you want to show in the Home Page.  Once decided, go to the HTML Editor in the Wordpress Post Edit and insert the following after the contents to be shown on the Home Page.

 <!--more-->

Make sure there are no spaces between these 3 entities – <!–, more, –>

Following is an example, where I have used it in one of my posts.

That’s all about it! Now check out this particular post on your Home page and you will find only the content before more tag shows up.  To read the rest, the user has to click on the link and navigate to the Post page.

Now you have greater control on what to display on the excerpts in the Home Page.  Also you can write your posts more effectively, to make the users click on the link and read more!!

Let me know through Comments if you like this tip.  As always, share the post with the options below to help more people like you.

Header of a blog is the prominent advertising spot and a banner image here would just make things better.  I will share a very simple tip to setup the header banner image using the powerful Thesis Theme.

I assume that you have setup the Thesis OpenHook plugin.  If not, go grab it here and Thesis is just 50% useful without this!

1.  Create the CSS Style for the Banner Image

Go to Thesis Custom Styling section of your Thesis Administration Panel.  (you can find it just below the Editor link)

Let us now add the following entry into the entry box, which would find its place in the custom.css file.

/* Banner Ad in the Header */
.custom #leaderboard_ad {
  float: right;
  position: absolute;
  width: 468px;
  height: 60px;
  top: 25px;
  left: 675px;
}

width – Value must match the width of the Banner Image (typical value is 468px)
height – Value must match the height of the Banner Image (typical value is 60px)
top – Gap between the top of your blog and the start of the Banner Image
left – From where the Banner Image should start, on the left side of the page.  Higher the value, the image would be shifted on the right

Adjust the top and left values based on the styling and layout of your blog.

2.  Add the HTML code for the Banner Image

Typically the banner images are setup using the Affiliate Code that your affiliate has provided you or the Google Adsense script.

Go to your Thesis OpenHook section in the administration page and add the Banner Image code in the After Title field.

Following is an example Banner Image code, that I used for display.

<div id="leaderboard_ad">
<a href="http://www.elegantthemes.com/affiliates/****" target="_blank">
<img height="60" src="http://www.elegantthemes.com/affiliates/banners/468x60.gif" width="468" border="0" />
</a>
</div>

And that’s it!  You are all set to display the Banner Image on the header section of your blog.  You can also check out how this works on my blog.

One such Banner Image I really liked, is that of ProBlogger.  It is so nicely positioned and fits exactly with rest of the header.

Got bored of the traditional Feedburner Feedcount image?  Stuck with the Twitter Plugins that claim to display the number of followers in your blog? Forget them all.  I will show you how to get the Feedburner and Twitter subscriber stats programmatically (using PHP) in your Thesis powered blog and display them at your convenience.  This can also be used on a Wordpress blog running any theme, with ease.

1.  Modify your custom_functions.php file

Let us first create a couple of functions in the custom_functions.php, that would do us the job of fetching the numbers.

You can find the custom_functions.php file under the following directory – Your Blog Theme Directory/custom/custom_functions.php

function get_feedburner_stats() {
  $fbrefreshtime = 43200;  //Refresh Feedburner twice in a day

  $fb = wp_cache_get('fbstats_key');

  if ($fb == false) {
    $yourfeeduri = 'ThoughtsUnlimited'; 
    $feed = 'https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri='.$yourfeeduri;
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_URL, $feed);
    $feed = curl_exec($ch); curl_close($ch);
    $xml = new SimpleXMLElement($feed);
    $fb = $xml->feed->entry['circulation']; 

    //Set the Value in Cache
    wp_cache_set('fbstats_key', strval($fb), '', $fbrefreshtime);
  }
  return $fb;
} 

function get_twitter_stats() {
  $twitterrefreshtime = 54000;  //Refresh Twitter Stats once every 15 minutes

  $tw = wp_cache_get('twstats_key');

  if ($tw == false) {
    $yourtwitter = 'thotsunlimited';
    $twurl='http://twitter.com/statuses/user_timeline.xml?id='.$yourtwitter.'&count=1';
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_URL, $twurl);
    $data = curl_exec($ch);
    curl_close($ch);
    $xml = new SimpleXMLElement($data);
    $tw = $xml->status->user->followers_count; 

    //Set the Value in Cache
    wp_cache_set('twstats_key', strval($tw), '', $twitterrefreshtime);  //Will expire after the Refresh time you set
  }
  return $tw;
} 

Make sure that you replace the $yourfeeduri and $yourtwitter values, with your own values

Updated on 08/05/2009:

Modified the Code to cache the numbers using WP_Cache, as excessive API calls might be unsuitable for blogs with many page views per hour. Thanks to Christian for pointing this out here.

Enable WP Caching, by adding define(‘WP_CACHE’, true); to your wp-config.php file. Check this out, for information on enabling the WP Cache

Make double sure that you enable the Awareness API for your Feedburner Account

2.  Call the function wherever you need and style the output

So now you have the way to get the numbers.  Call them from anywhere you need and appropriately style the output.  I would recommend using the Thesis OpenHook plug-in to place the output of these functions.

Calling the function is pretty straightforward. One example could be:

 <strong>Join the fleet of <?php echo get_feedburner_stats(); ?> Subscribers</strong> 

You can look at the sidebar of my blog, to see one other example in action.

Hope you found this useful. Add any useful extensions to this tip, as comments to this post.