Sometime back, I wrote a post on how to turn your Wordpress Blog into a Membership Site using Free Plugins.  Though it is sufficient for beginners, a fully-featured Wordpress Membership Site requires much more than that!

In this post, we will look a Premium and Highly Robust Wordpress Membership Plugin – MagicMembers – and what it has to offer.

About Magic Members

MagicMembers is a Premium Wordpress Membership Plugin that turns your Wordpress Blog in to a fully featured Membership Site

Highlights of the Product

• Multiple Membership Levels – You can choose to have Gold Members, Silver Members, Bronze Members and what not!
• Flexible Membership Options – Choose to create Daily, Weekly, Monthly or Annual Subscriptions for your Members.  So they have all the flexibility to pay you
• Payment Options – Choose popular Payment Options for your Membership site like PayPal, ClickBank & WorldPay, thus helping your customers choose an option of their choice
• Unlimited Coupon Creation – Create Promotional Coupons and boost your sales.  There is no limit!
• Login Redirection – Use different and custom login pages for each of your Membership Levels
• Partial Content Display – Easily choose what your Paid and Public Members will see!
• Pay-per-Post Access – Also enable your readers to pay per post or article, thus allowing free memberships to purchase articles on per post basis
• Secure RSS Access – Make sure that your Members have easy access to RSS Feeds while others are not
• Protect Downloads – Protect your Download Files for Member Access and restrict it for non-Members

Help & Support

A Purchase of the MagicMembers Product, will automatically enrol your for the following benefits:

• Free Video Training and Tutorials
• Free Screenshots and Support Guides
• Free Unlimited Updates
• Free Unlimited Support

Pricing

MagicMembers Wordpress Membership Plugin is very reasonably priced.  You can choose one among these 3 options:

• Single License – can be used on 1 Site
• 3 Users License – can be used on 3 Sites
• Unlimited License – can be used on any number of Sites

All Licenses are eligible for the Help & Support, as described in the previous section.

So what are you waiting for?  Go grab your copy of MagicMembers Wordpress Membership Plugin now!

Do a Google Search for “Wordpress Membership Software” and you will find hundreds of results pointing to a wealth of paid & premium software. Most of them are great and powerful, like Wishlist Membership Plugin. But if your needs are simple like creating subscriptions and restricting access to few Posts/Pages – it is unnecessary to shell out 100$+ on these software. I will show you 2 simple and FREE plugins that can do the trick!

Note: This post or the plug-ins does not suggest replacement of your Premium Membership software, for complex uses./p>

1. Installing the Plugins

We are using the following Wordpress plug-ins for the topic of this post.  Both these plug-ins are FREE – but their authors would definitely not mind a donation!

• Wordpress Member Access
• Wordpress User Role Subscriptions

Follow the instructions under the “Installation” tab of each of the plug-in pages.  I am assuming that both the plug-ins are installed and functional, through the rest of this tutorial

2.  Setting up the User Role Subscriptions

The role of this plug-in is to manage the user account creation for New Subscribers, integrated together with Paypal for their payments and deleting/deactivating subscribers on expiration.  This plug-in does not restrict access Pages/Posts/Categories based on the subscription (which the other plug-in, Member Access would do)

On your WP-Admin, navigate to Users =>Role Subscriptions on the left panel. (This link would appear only if the plug-in is installed without any errors).  You should see something like this:

User Role Subscriptions - Admin Area

You can see a series of tabs at the top – Subscription, Paypal, Notifications, Documentation, Forum
Most of our work is going to be in the first 2 tabs!

Creating your Subscription Details

Under the Subscription tab be sure to enter the Subscription details.  Take care to enter proper values for the following fields – the required instructions are available in the page:

• Subscription Title
• Item Number (item you are selling)
• Description
• Price
• Buy Button Text
• Duration (how often the subscription must be renewed)
• Trial periods (if any)
• Invoice
• Modification Behavior (will the subscriber be allowed to modify his/her subscription)
• Member Directory (list of Premium Categories which the subscriber will see on login – if you are not sure yet, you can always come back and enter values later!)

Save your settings and move on to the Paypal tab.

Entering your Paypal details

This page has many fields, but the essential ones you would need to edit are the following.  The other ones, you may choose to skin and update later (if needed)

• Paypal Email (most important!)
• Sandbox Mode (Check this if you using it for development purposes.  Unchecked for most commercial uses!)
• Return,Cancel URL (by default subscription returns to the plug-in confirmation page – If you have a custom page, then enter them here)
• Return to Merchant Text (This is the text displayed on the Paypal page after transaction completes!  Change it if you need to)

You can ignore the Notifications and the other tabs for now.  Under Notifications, you can choose to change the emails sent to users on Subscription, Renewal, Expiration and Cancellation.  A good example might be adding a link of a premium download to Subscription email!

3.  Creating the Subscription and Login Pages

Once all these settings are done, you can create the Subscription and Login Pages for your Site.  For this, first create 2 Wordpress pages, by navigating to WP Admin => Pages => Add New. I am assuming the Page names are – Subscription, Login (you can choose your own name)

Login Page

Get into the edit mode of your Login Page (WP Admin => Pages => Edit), select the HTML tab and paste the following code:

<!-- byrd_login() -->

Save your page and view you page after logging out of your WP Admin account (or open the page in a different browser). You can see something like that shown below.

User Role Login Page

This is the plain-vanilla Login page in action. If you wish to – then any kind of Look-and-CSS customizations can be done on this form. But it is beyond the scope of this tutorial!

Wait – there is the Subscription Page!

Without a subscription page, your readers wouldn’t even know about your subscription service.

Get into the edit mode of your Subscription Page (WP Admin => Pages => Edit), select the HTML tab and paste the following code:

<!-- byrd_subscription() -->

Here is a preview of the plain-vanilla Subscription page.

User Subscription Page

It is highly recommended that your Subscription Page is essentially a Sales Page – highlighting the reasons why someone will subscribe! Also showcase benefits and recommendations. The above code will insert just the bare minimum code essential for the technical purposes

4. Setting up the Member Access (to restrict content)

Now we have our Subscription and Login pages. Next is to setup the Member-Only Access to premium content.

Navigate to WP Admin => Plugins => Member Access and access the Administration area for the Member Access plug-in.  Take care of setting up the appropriate values for the following fields (others can be ignored for now):

• Perform Redirect for Non-Members (Choose the ‘Subscription’ Page you created earlier in the drop-down box!)
• Repeat this for – Pages, Archives and Search Results

There are also options to restrict all Pages/Posts of your Site.  Set it up if that is what you’ll need!

5.  Restricting Pages and Posts

I will show you how to restrict a particular Page, to be viewed only by members of your site.  The same trick can be used for Posts too.

Go to WP Admin => Pages => Edit. Choose the page you wish to restrict for members.  In my case, I choose an example page named ‘About’.

Go to the bottom of the Edit page and you’ll find a section named ‘Member Access’.  Under this, choose the option ‘Ignore the default settings and make this page visible only to members‘ and Save the page.

Member Access Admin Page

Now, logout from the Administrator account and try to load this ‘About’ page.  You’ll see that it automatically redirects to the Subscription page.

Restricting Posts for Members

Follow the similar approach, as for Pages.  Go into your post and make it visible only for members.

Currently this plug-in doesn’t help in restricting al posts belonging to a category.  I hope this is a feature, that the author of the plug-in can think of!

Conclusion

In summary, WP User Roles Subscriptions and WP Member Access, plug-ins help you to setup a minimalist Membership system on your Wordpress Blog.  And this is for absolutely no money!  But if you need more sophisticated membership features, the best way is to go for a Premium Plug-in

Credits to brownoxford, jandal, maestrobob (Member Access Plugin) and Jonathon Byrd (User Roles Subscriptions), who are the authors of these wonderful stuff (without whom this tutorial might not have been possible!)

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 – <Thesis installation directory>/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 <abbr class="published" title="' . get_the_time('Y-m-d') . '">' . get_the_time(get_option('date_format')) . '</abbr>';
  }
}

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 '<abbr class="teaser_date published" title="' . get_the_time('Y-m-d') . '"<' . get_the_time($use_format) . '</abbr>' . "\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.

• Removing the Date from Older Posts in Wordpress
• Adding Date based Triggers to your Posts

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

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 <Blog Installation Path>/wp-content/themes/<thesis-folder-name>/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 '<div id="header">';
  thesis_default_header();
  echo '</div>';
}

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 '<div id="header">';
  thesis_default_header();
  echo '</div>';
}

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!

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

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:

• <Thesis Installation folder>/custom/custom_functions.php
• <Thesis Installation folder>/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 <ul class=”menu”> – in Thesis 1.6, insert the Search Box code
• Properly close the HTML and return for further parsing

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 class="menu">.*<\/ul>/sU', $buffer, $matches) > 0) {

// Search box markup
$search = sprintf( "<li class='nav_right search'><form class='search_form' method='get' action='%s'><input class='text_input' type='text' name='s' id='s' value='search - hit enter' onfocus=' if (this.value===\"search - hit enter\") this.value=\"\";' onblur='if (this.value==\"\") this.value=\"search - hit enter\";'/></form></li>", get_bloginfo('wpurl') );

// Add markup to the navigation
$nav = str_replace(' <ul class="menu">', ' <ul class="menu">' . $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() { ?>
    <li class='nav_right search'><form class='search_form' method='get' action=''><input type='text' name='s' id='s' value='search' onfocus="if (this.value==='search') this.value='';" onblur="if (this.value=='') this.value='search';"/></form></li>
<?php
}

add_action('thesis_hook_last_nav_item','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.

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