Thoughts Unlimited » Thesis Theme

How to Use Thesis 1.7 SEO Controls like a Pro?

Ashwin — Sun, 02 May 2010 12:10:56 +0000

Thesis 1.7 has introduced a slew of New SEO Controls and Features. But do you know How to Use them? This Post will show you, How to Configure and Use everyone of them like a Pro!

Understanding the Robot Tags

The “Robots” Meta Tag gives you an opportunity to keep your Content out of Google’s Indexing Services. But why would you want to do that?

Not all Pages of your Site, must necessarily be indexed for better SEO. For example, the “Tag” pages of your Wordpress Blog do nothing much to the Search Engine, but dilutes the Search Results. Essentially, you’ll want to keep the “Bloat” pages out from Google’s Purview.

Here is an example of a “Robots” Meta Tag, that prevents the Search Engine from Indexing the Page and also ignore scanning of the Pages, for the Links to follow:

...

What Content Values are Possible for the Tag?

Following “Content” Values are possible to be used in the “Robots” Meta tag:

INDEX, NOINDEX – Prevents the Indexing of the Page by the Search Engine. To be used for “Bloated” Pages that can dilute Search Results

FOLLOW, NOFOLLOW – Prevents the Scanning of the Page for Internal and External Links to follow, by the Search Engine. To be used for Pages with too many links, which you don’t wish the Search Engine to follow

ARCHIVE, NOARCHIVE – Prevents the Archiving of Pages by the Search Engine. Generally used to Protect Privacy, but Archiving is sometimes useful – for instance to serve Pages when your Site is down!

NOODP, NOYDIR – Prevent search engines from displaying Open Directory Project (DMOZ) listings in your meta descriptions. NOYDIR is the Yahoo! Version of it!

Please note, if NOXXXXX is not specified for any Page, then the appropriate feature – Indexing, Archiving etc. – are assumed to be available, by the Search Engines. That is, for example, If there is no robots tag, the default is “INDEX,FOLLOW” and so on.

Setting up “Robots” Meta Tag Controls with Thesis 1.7

Thesis gives you 2 ways of setting up the “Robots” Meta Tag Controls:

Default Setting at the Site Level
Overridden Setting at the Specific Page, Category or Tag Level

Any setting at the Site Level will be applied to all appropriate Pages, Categories and Tags. To set this, you’ll have to go to Thesis -> Site Options in your WP Admin Panel. Here is a screenshot:

Thesis Site SEO Controls

In addition, you can override the Robots Meta Tag setting at the Specific Post, Page, Category and Tag level. For instance, this can be helpful, if you wish to ‘NOINDEX’ all Categories, except a Particular Category.

For Home Page, Category and Tag level override setting, you’ll have to go to Thesis -> Page Options

Home Page, Category and Tag Specific Settings

For Individual Post and Page Settings, you can check the controls at the Post or Page Edit Pages respectively.

Page, Category or Tag Specific Description and Keywords

The Page Options setting we just used by going to Thesis -> Page Options, also allows you to set up Description and Keywords for the Home Page, Category and Tag Pages.

Description Tag is used by most Search Engines as a Summary of a Page and often shown in the excerpt of the Search Results. It resides inside the element of your HTML Page.

Use appropriate Text inside the Description Tag, that you think as the Summary of the Page. For individual Pages and Posts, you’ll find the option in the Page or Post Edit sections, respectively.

Keywords Tag is used to match the search terms that people type in the Search Engine.

Use appropriate Keywords, which when people search, you’ll want your Pages should be shown up in the Search Results.

Easy 301 Redirects for your Affiliate Links

Using this feature of Thesis, you can turn the URL of any Post or Page into an Affiliate Link – thus not preventing People to click on it.

You can also use this to do a 301 Redirect to any other URL, you wish to. Handy Feature!

Target Link where the Post/Page Permalink will Redirect to

Don’t have Thesis Yet?

You are definitely missing a lot of Wordpress! Go grab it and let me know if you need some Help with Thesis. We offer Thesis Customization Services at competitive prices.

How to Install any Thesis Skin on your Wordpress Blog?

Ashwin — Tue, 30 Mar 2010 17:33:45 +0000

Thesis Skins add Beauty to your already-Powerful Thesis Powered Wordpress Blog. Though any clean Thesis Skin come bundled with sufficient Installation information, this post will give you the basics to Install any Thesis Skin on your Blog.

Prerequisites

Wordpress
Thesis Theme (Licensed, of course! If you don’t have one, get it here)

Usual Contents of a Thesis Skin

Though not all Skins are similar, they share some similarity in the way the files are organized. Here is an example of how a typical structure of a Thesis Skin might look like.

Typical Thesis Skin Structure

The custom files are the core of any Thesis Skin and the other files/folders support the customization.

Check the Thesis Theme + Skin Compatibility

One of the thing to check – is the compatibility of the Thesis Skin with your Thesis Theme. The best source, is the information available on the Download (or Purchase) Page of the Skin.

If it is not mentioned explicitly, contact the Author of the Theme for relevant information. Make sure not to Buy or Install a Thesis Skin, unless the Compatibility is known.

As of this writing, the Stable version of Thesis Theme is 1.6 and your Skin must be able run with this!

Backup your Existing Thesis Theme Customization

If you are using Thesis Theme for sometime and planning to switch to a New Thesis Skin, it is highly recommended to backup your existing Thesis Theme Customization.

Thesis 1.7 has an in-built backup feature, but it is not yet production ready. Till theb, you can use the Thesis Import/Export Plug-in for backing up your existing Customization.

Follow the instructions that come with the plug-in and here is how the sample Export screen looks like.

Thesis Export Plugin

Make sure to “Download Current Layout” both for Thesis Options and Design Options. These will create 2 files – both with a .dat extension. Keep them in a safe place – in case you require.

Installing the Thesis Skin

Now the showtime. Keep the Installation document that came with your Thesis Skin handy and following it “step after step”.

If the Skin author gave your the “Importable” files with a .dat extension – then the above plug-in should do the job for you. Follow the instructions carefully.

If the Installation must happen by copying the customization files using FTP Uploader: make sure to download your /wp-content/themes//custom folder to your Computer, before overwriting/copying the contents.

In any case – Installation Document supplied by the Author must be used as the Reference and should be followed as is

Something Screwed Up!

Most of the skins start running great at this point. But if you find that the display of components and hence your Blog is screwed up – don’t panic. There is a “possible” quick fix!

Go to: WP Admin => Thesis Options => Thesis Options and click on the ‘Big Ass Save Button’. Do the same for WP Admin => Thesis Options => Design Options

If this doesn’t work out, use the Backup to restore your Thesis Blog and contact the Thesis Skin Author

This is pretty much all you have to do – for installing any Thesis Skin on your Blog. Have any questions? Drop in a comment and I will be glad to help.

A Quick Peek in to Thesis 1.7 Beta

Ashwin — Sun, 14 Mar 2010 00:30:10 +0000

Thesis 1.7 Beta was released last week, amidst enormous expectations and enthusiasm. Being one among the crowd, I would say that I am not disappointed – both as a Thesis User and Thesis Developer.

Let’s take a quick look at what’s new in Thesis 1.7

Note: If you have a Thesis Developer License, you can download the Beta file here http://bit.ly/8ZVoqV

Better and Improved Options Management

The first thing you’ll notice on installing Thesis 1.7, is the additional option panels in your Wordpress Dashboard and also (better) re-grouping of few existing options.

The earlier Thesis Options and Design Options are re-christened and re-grouped as – Site Options, Design Options and Page Options. The third option is something new, that helps you better control the configurations related to Pages.

Thesis Setting Export/Import

Good news for Thesis Developers! Now you don’t have to worry about exporting/importing Thesis Theme settings – across the Development and Live Sites.

The new addition of ‘Manage Options’ (in the above snapshot) helps you seamlessly export or import the Thesis Theme Settings of any site. So good bye to the ‘Thesis Export/Import Plugin’! (ooff, one less plugin!)

Better SEO – Control Robots File from within Thesis

As promised, here is a welcome feature on the SEO front. Now you can control the Robot meta tags for your – Pages and Posts from the Thesis Administration Panel.

Also added is the support to include Canonical URLs for your site. These are very welcome features!

Now you can control the Home Page Meta and Title Tags, from within Thesis -> Page Options. Very Nice!

Never Upload a Javascript Library

This is really cool for the developers! You’ll never need to manually upload and use a Javascript Library, for the customization needs.

All popular JS libraries including – jQuery, Prototype, Scriptaculous etc., – are included and can be activated from the Thesis Administration Panel. So you’ll never need anything out of this list.

You have an option to select one or more of these libraries for the site! But make sure of library compatibilities, when planning to use multiple ones.

Word of Caution

Thesis Theme 1.7 is still in Beta and the Thesis Community Members on Twitter (#thesiswp) are coming up with some problems already – in terms to compatibility to their existing skins and customizations. Hopefully, these will be resolved as the Beta is transformed into a “production ready release”

Make sure NOT to install Thesis 1.7 Beta yet on Live Sites!

If you still don’t have a copy of the Marvelous Thesis Theme, Grab it here now!

Hide Dates in Old Wordpress Posts using Thesis Theme

Ashwin — Sat, 09 Jan 2010 04:21:56 +0000

Hiding the published-on date in old Wordpress posts is requested in many Thesis Customizations. Sometimes this helps in avoiding the content to appear outdated, for the readers of your site.

In this post, I will show you how to hide the date in posts using the Thesis Theme custom files, without the need to tweak any of the core files. To know how – read on!

What we will do at the end of this tutorial?

We will try to do the following at the end of this very simple tutorial:

Hide Published-on date in the Post Bylines for posts older than 30 days
Also Hide these dates in Teasers – if the site is using any

Disable the Date Display in Thesis Options

Since we are coming up with our own logic to display the Dates, let us first disable the default date display in Thesis Theme.

To do this, go to WP Admin –> Thesis Options –> Display Options –> Bylines and un-check the “Show published-on date in post byline” option. (Don’t for to click the Big Ass Save Button !)

Now the dates magically disappear on the post bylines!

Hide Dates in Posts older than 30 days

Now on to the job! We will have to display the dates only in posts that were written in the last 30 days and hide them on older posts. To do this:

Calculate the age of the current post – in number of days
Display the date only if the posts was written in the last 30 days

The following code will help you calculate the age:

  //Number of days this post is old
  $daysold = (current_time(timestamp) - get_the_time('U') -
            (get_settings('gmt_offset')))/(24*60*60);

To add this date to the Byline item, we would need to override the ‘thesis_hook_byline_item’. Following is the code does that will be added to the – /custom/custom_functions.php file.

function add_date_to_byline() {
  //Number of days this post is old
  $daysold = (current_time(timestamp) - get_the_time('U') -
(get_settings('gmt_offset')))/(24*60*60);

  if ($daysold < 30 ) {
      echo ' on ' . get_the_time(get_option('date_format')) . '';
  }
}

add_action('thesis_hook_byline_item', 'add_date_to_byline');

This code, once added will hide dates in all posts older than 30 days.

Oh, we forgot the Teasers!

First we must hide the Date in Teasers, to make sure that the default behavior gets out of the way.

To do this, go to WP Admin –> Design Options –> Teasers –> Teaser Display Options and un-check the “date” option. (Don’t for to click the Big Ass Save Button !)

Now add the following code to your custom_functions.php and this will hide dates from posts older than 30 days, on teasers.

function add_date_to_teaser() {
  //Number of days this post is old
  $daysold = (current_time(timestamp) - get_the_time('U') -
(get_settings('gmt_offset')))/(24*60*60);

	global $thesis_design;
	$date_formats = thesis_get_date_formats();
	$use_format = ($thesis_design['teasers']['date']['format'] == 'custom') ? $thesis_design['teasers']['date']['custom'] : $date_formats[$thesis_design['teasers']['date']['format']];

  if ($daysold < 30 ) {
    echo '' . "\n";
  }
}

add_action('thesis_hook_after_teaser_headline','add_date_to_teaser');

Note we are using the thesis_hook_after_teaser_headline hook for getting things done. Now we are truly done!

Credits

Following posts were useful in obtaining handy information for writing this tutorial.

Hope you found this post useful. If yes, please share it using Twitter and Facebook, for more readers to benefit

Create a Full-Height Sidebar and Full-Width Navigation Menu in Thesis Theme

Ashwin — Tue, 29 Dec 2009 17:19:47 +0000

Thesis Theme gives you complete freedom in customizing the looks and the behavior of your Wordpress Blog.

In this post, I will show you how to make the Sidebar of your Thesis Theme “Full-Height” and the Navigation Menu “Full-width”. As with the other Thesis Theme tutorials – you will be editing the custom.css and custom_functions.php files. If you are not sure about these files – please read on and I will give you the step-by-step procedure for getting things done.

What are we trying to create?

Before we start, let’s try to see what are we trying to create at the end of this tutorial. Here is a snapshot of my Blog (yes, this Blog which you are reading) and I have used exactly these techniques for the customization.

The Navigation Menu is full length and extends across the entire page. Also it is at the extreme top of the page
Header and the Sidebar are the same level. In other words – the Sidebar is full-height

This is exactly what we will create at the end of this tutorial. However, I will not get too much into the styling aspect of it and you are free to use the styles as required.

Please note that this tutorial works best with 1 Sidebar. With 2 or more Sidebars – the appearance may not be too pleasing. Also this tutorial works only with Thesis Theme Version 1.6 and above

Enable Full Width HTML Framework

To start with this tutorial – you will enable the Full-width HTML Framework for your Thesis Theme.

This can be done by navigating to WP Admin Dashboard => Thesis Options (on left) => Design Options => Framework Options => HTML Framework

Under this choose the Full-width framework option.

Bring Header and Sidebar to the Same level (Full-Height Sidebar)

Next we will work on bringing the Header and Sidebar to the Same level – as shown in the screenshot above. To do this – we will proceed as follows:

Remove the original Header
Add the Header back into the Content Column – in line with the Sidebar

If you are using a FTP Editor to connect to your Blog – custom_functions.php and custom.css can be found in /wp-content/themes//custom. Instead, you can also edit the file by navigating to WP Admin Dashboard => Thesis Options (on left) => Custom File Editor

As a first step – let us remove the Original Header. For this, add the following code into the custom_functions.php file.

// Remove the Thesis header from its default location
remove_action('thesis_hook_header', 'thesis_default_header');

This code will just remove the Header contents – by leaving the area blank, still occupying whitespace below the Menu Bar. So, to get rid of the blank area – add the following code the custom.css file.

/* Remove the Header */
.custom #header_area #header {
  display:none;
}

Now we got rid of the Header from it original location. Now let us add it back to the Content column – at the same level as the Sidebar. This is easily done by placing the following code into the custom_functions.php file.

// Place header at the top of the content column instead
add_action('thesis_hook_before_content', 'move_header');
function move_header() {
  echo '';
  thesis_default_header();
  echo '';
}

That’s it! Now your Header and Sidebar will appear at the same level and surprisingly you have a Full-Height Sidebar.

Caution: You might lose your Header Customizations if they are done in an unusual way – without the usage of .custom #header in the custom.css file. So please exercise caution before creating this customization

Full-Width Navigation Bar

Moving on to the next part of this tutorial – we will create a full width Navigation Menu that extends across the page and sticks to the top of your Blog (close to the browser Bookmarks bar).

Here are the steps to achieve this:

Remove the padding space between the Navigation Menu, Top of the Blog (close to the browser Bookmarks bar) and Sideways
Give a color to the entire Navigation Bar
Adjust the Site Background color to match the Navigation Menu color

Before you start – choose the color for your Navigation Menu. This color will also be used for the Site Background. For the purpose of this tutorial – I will use #333333.

To remove the padding space around the Navigation Menu, copy the following code into the custom.css file.

/* Remove padding around the Navigation Bar */
.custom #header_area .page {
  padding:0em;
}

Once you add this code and refresh the page to see the changes – you will notice a small indent on both the sides of the Navigation Menu. We will soon take care of this!

Use the following code to add a Background color to the Navigation Menu. Don’t forget to change the color code with the one suitable for your Blog.

/* Give a Background to the Navigation Bar */
.custom .menu {
  background-color:#333333;
  border-bottom:none;
  margin-left:-2.2em;
  margin-right:-2.2em;
}

Adding this code will only change the color of the Navigation Menu Background – and not the colors of the Menu items. These are best controlled using the WP Admin Dashboard => Thesis Options (on left) => Design Options => Font, Colors and More! => Nav Menu

Now give the same Color to the Site Background – to give the effect of a Full-width Navigation Menu. You can do this by going to WP Admin Dashboard => Thesis Options (on left) => Design Options => Font, Colors and More! => Body (and Content Area) and giving the color value under Site Background Color.

Now you will notice that the indent on the sides of the Navigation Bar is gone.

Here you have the Full-Height Sidebar and a Full-Width Navigation Bar.

Complete Code

Add the following code to the custom.css file.

/* Remove the Header */
.custom #header_area #header {
  display:none;
}

/* Remove padding around the Navigation Bar */
.custom #header_area .page {
  padding:0em;
}

/* Give a Background to the Navigation Bar */
.custom .menu {
  background-color:#333333;
  border-bottom:none;
  margin-left:-2.2em;
  margin-right:-2.2em;
}

Add the following code to the custom_functions.php file.

// Remove the Thesis header from its default location
remove_action('thesis_hook_header', 'thesis_default_header');

// Place header at the top of the content column instead
add_action('thesis_hook_before_content', 'move_header');
function move_header() {
  echo '';
  thesis_default_header();
  echo '';
}

Hope you found this tutorial useful. I am available for professional Thesis Theme Customization projects! Use the Contact form of my Blog to get in touch with me!

Looks Good Naked Skin – for Thesis 1.6

Ashwin — Sat, 07 Nov 2009 09:21:17 +0000

I keep hearing from Thesis lovers – Can I get the Looks Good Naked Skin for Thesis 1.6? So to make them all happy – here we go!

Looks Good (Better) Naked theme has been greatly simplified and now fits into your Thesis Theme 1.6

Follow these instructions to install this theme on Thesis 1.6 (no documents needed!):

Backup the following folder from the Thesis Theme Installation Directory
- custom
Unzip the “Looks Good Naked” theme package
Copy the custom_lgn folder to your Thesis Theme Installation Directory
Rename the folder to custom
Navigate to Thesis Options from your Wordpress Dashboard
Select Design Options and enter the following values under Nav Menu
- Link Text color : FFFFFF
- Link Text Hover Color : FFFFFF
- Current Link Text Color : 900B09
- Current Parent Link Text Color: FFFFFF
- Link Background Color : 464646
- Hover Background Color : 900B09
- Current Background Color: FFFFFF
- Current Parent Background Color : 900B09
Under Framework Options
- Choose HTML Framework – “Full-width framework”

Other Goodies Added:

Sidebar Social Iconz – http://thesistutor.com/how-to-add-killer-social-icons-with-thesis/ (Be sure to change Twitter ID etc. in custom_functions.php)
Footer by Asnio – http://asnio.com

Tada! You’re done. Now your Blog hosts the famous – Looks Good Naked skin.

Live Demo – https://thoughtsunlimited.net/skins/looksbetternaked

Under the images folder of your custom directory, is a file named logo_text.png. You can replace this with the Logo of your website. Recommended dimensions are 344 px X 91 px

Since this is a greatly simplified version of the original skin – sans a lot of Javascript code and images – some fine features might be lost. But most of it are retained – to give you the same experience as much possible

I do not distribute this skin. Visit http://thesispress.com/looksgoodnaked/ to grab a copy or mail to curator@thesisgallery.com

Search Box in Navigation Bar of the Thesis Theme

Ashwin — Sat, 31 Oct 2009 17:53:20 +0000

In this tutorial, we will see how to add the Search Box on the Navigation Bar of the Thesis Theme for Wordpress.

Note: This is tested with Thesis Theme version 1.6. Will not work with the older versions. Contact me via the Comments section and I will help you!

Caution! The code in this tutorial is not guaranteed to work on all hosting and Wordpress installations. Please navigate to the last part of this tutorial for the updated code

Using HTML Filters

Here we will take a slightly different approach. Since Thesis Theme provides you only hooks for moving the Navigation menu around – we will not be able to use it directly for controlling the content inside the Navigation menu.

So we will use the filters to parse the HTML code of the Navigation menu and insert the content where we need.

Getting the Code Work Done

Caution! The code in this tutorial is not guaranteed to work on all hosting and Wordpress installations. Please navigate to the last part of this tutorial for the updated code

As with every other customization, this tutorial needs changes in the following files:

/custom/custom_functions.php
/custom/custom.css

First, let us hit the custom_functions.php file.

We need a handle to get the HTML code, as it is rendered on to the page. So we will have a custom method and this method will get a handle to the HTML code as input. We call this function – ‘thesis_navmenu_search’

// Start buffering after the tag
add_action('thesis_hook_before_html', 'thesis_buffer_start');
function thesis_buffer_start() { ob_start('thesis_navmenu_search'); }

Close the handle, once the page is completely rendered. This is done using the following code.

// Stop buffering before the tag
add_action('thesis_hook_after_html', 'thesis_buffer_stop');
function thesis_buffer_stop() { ob_end_flush(); }

Now let us create the exact function – thesis_navmenu_search. This function will do the following:

Keep parsing the HTML Code

When it encounters the Navigation menu – identified by

This is a powerful technique – the whole ideology behind the hooks. You can use this to alter anything that Thesis Hooks prevents you from getting into!

Here is the complete code (including the previous snippets) to be copied into your custom_functions.php file.

Caution! The code in this tutorial is not guaranteed to work on all hosting and Wordpress installations. Please navigate to the last part of this tutorial for the updated code

// Add Search Box to Navigation Bar
// We use Wordpress filters here

// Start buffering after the tag
add_action('thesis_hook_before_html', 'thesis_buffer_start');
function thesis_buffer_start() { ob_start('thesis_navmenu_search'); }

// Stop buffering before the tag
add_action('thesis_hook_after_html', 'thesis_buffer_stop');
function thesis_buffer_stop() { ob_end_flush(); }

function thesis_navmenu_search($buffer) {
// Filter for the header navigation
if(preg_match('/.*<\/ul>/sU', $buffer, $matches) > 0) {

// Search box markup
$search = sprintf( "", get_bloginfo('wpurl') );

// Add markup to the navigation
$nav = str_replace(' ', ' ' . $search, $matches[0]);

// Modfy the buffer
$buffer = str_replace($matches[0], $nav, $buffer);
}

// Send the modified markup to the screen
return $buffer; }

Styling it up

Now if you reload your Blog page, you will see the Search box already in the Navigation Bar. Let us do some CSS patch up – to make it look good. Copy the following code to your custom.css file.

Basically I am just setting up some basic input box styles, in this piece of code.

/* Navigation Bar Search */
.custom ul.menu li.nav_right {
  float:right;
  height: auto;
  overflow:hidden;
  font-size:10px;
  letter-spacing:1px;
  text-transform: uppercase;
}
.custom ul.menu li.search input {
  height:25px;
  width:200px;
  padding:4px 10px 0 10px;
  background-color:#FFFFFF;
  color:#000000;
  font-size:14px;
  letter-spacing:1px;
  text-transform: uppercase;
}

You might want to change the following 2 parameters – under .custom ul.menu li.search input – in the previous code snippet

Height and Width

Updated on 15 Jan 2009 and guaranteed to work!

Modified Code – Guaranteed to work!

Copy the following code to your custom_functions.php file:

// Search Box in Navigation Menu function search_nav_menu() { ?>

Now copy the following to custom.css file:

/* Nav Search */
.custom ul.menu li.nav_right {
  float:right;
  font-size:10px;
  height: 22px;
  letter-spacing:1px;
  overflow:hidden;
  text-transform: uppercase;
}

.custom ul.menu li.search {
  background-color: #CCC;
  border-bottom:none;
  height:25px;
  margin-bottom:0;
}

.custom ul.menu li.search input {
  background-color: #CCC;
  border:1px solid #333;
  color:#333;
  font-size:10px;
  height:18px;
  letter-spacing:1px;
  padding:4px 10px 0 22px;
  text-transform: uppercase;
  width:125px;
}

Change custom.css entries suitably to match your Theme and the Navigation Menu appearance.

Here is a sample on one of my sites:

Conclusion

So that’s all about it to add the Search Box into the Navigation menu in Thesis Theme. Let me know how it goes – I love to hear back from people. Also, feel free to contact me if you need any help.

Thesis Theme : Setup Pagination on Home Page

Ashwin — Sun, 20 Sep 2009 04:01:21 +0000

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 – /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 – /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:

/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!

Show your latest Tweet on top of Content Column in Thesis Theme

Ashwin — Tue, 15 Sep 2009 16:45:13 +0000

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 //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 //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!

Create a Killer Services and Portfolio Page with Thesis Theme

Ashwin — Wed, 02 Sep 2009 07:41:18 +0000

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

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

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

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

&lt;?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!