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).

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

• Watch the Video…

Resource: Ashwin http://thoughtsunlimited.net

So, I had a look at a site and saw some cool buttons floating on the left hand side. I thought it would be nice if I could replicate the same effect on my site. At that stage I currently had a floating Twitter badge and even posted about how how to get it on your site.

Anyway, as being curious about how they achieved it, I checked out their css file and browsed their source code. I seem to do that a lot when I find something cool. After a few trials and error, I came up with the following details and thought of sharing it with you all.

Resource: George Serradinho
How-to-put-floating-icons-on-the-side-of-site

How to change headers by page.

All of those lead you in the same general direction: a single custom header for your blog. I recently got asked for step-by-step instructions on how to specify different headers on specific pages. So, I’m going to show you two ways to achieve that: CSS image replacement and inline header images.

Resource: kristarella twitter:@kristarella
http://www.kristarella.com/2009/08/page-specific-headers-in-thesis/

Set background Colors | Format Headings

One of the first things you can do to give your site a unique look is to begin changing the color scheme.  This visual guide show you haow to change the backgrounds and add some disctinctive borders around your content.   The changes all occur the custom.css file. The picture below show how to change each portion of the page.  Just add the following code to your custom.css file and then upload to your site.

Download basic header sample code

A note about color representation.  The color paramater can be set three different ways

1. Name the color >> color: red
2. Set Hex value >> color: #FF0000
3. Hex Shorthand >> color: #F00

Below is a sample of how the code actually looks in Custom.CSS to accomplish the above effects

Code Sample:

/* valid for page framework only */
.custom #page { background: #ffffcc; border: none; }
/* background   = inner line  |   change padding for thickness */
/* border solid = outer line | set border em to for  thickness */
.custom #container { margin-top: 2em; margin-bottom: 2em; padding: 1.0em;
background: maroon; border: 2em solid green; }
/* END valid for page framework only */

/*—:[ Default customizations for header color and background---*/
.custom #header #logo a, { color: red; text-decoration: none; }
.custom #header #logo a:visited { color: red; text-decoration: none; }
.custom #header #logo a:hover { color: green; }
/*---:[ end default ]:—*/

.custom #header {
border:none;
/* border: .2em solid yellow; */
padding-top:1.1em;
}
.custom #header #logo {
float:right;
font-style:italic;
}
.custom #header #tagline {
color:purple;
float:right;
font-size:1.0em;
font-style:italic;
margin: 0.7em 0 0 1em;

Current Release

• WordPress 7.2.1
• Thesis 1.4.3