By default Thesis theme looks pretty good, but the default theme is only the starting point, a blank slate. If you’re like me, you’ll want to customize it. It’d be like buying a bicycle and just hoping it fits without adjusting the seat or handle bars—it might work, but it may not be very comfortable, or pretty, in our case.

Often, my designs remove the default interior border displays. They look nice, but might seem like overkill if you use good spatial delineation of your content. And, thanks to Thesis, with a little effort you can remove the interior border quite easily. There are many ways you could do it, but I will show you two methods I use to remove borders from Thesis.

Thesis Interior Borders Map

This graphic below shows which CSS selector targets which border. It also shows the property name that you can modify for whatever style you wish.

Click To Enlarge

Removing Borders in Thesis by Admin Options

If you want to just remove them all, then the admin option is for you.

Go to the Thesis Design Options menu. Under Fonts, Colors and More! expand the Body (and Content Area) section and uncheck the box labeled Show interior layout borders. Click the save button and you are done.

Removing Borders in Thesis using CSS

If you perhaps only want to remove one or two of the existing borders, you also have supreme control through the custom.css file.
This is definitely a more refined way of specifying just the border you want to target.

First, open up your Custom File Editor under the Thesis menu. By default, the custom.css is visible.

Removing Header Borders from Thesis

The border just above the content area is part of the #header section and is, by default, a double border. To remove we simply target that specifically like this:

.custom #header: border-bottom: 0;

Removing Bottom Borders from Thesis

Like the header, the footer is a double border that you can do away with by setting the following style:

.custom #footer:border-top:0;

Removing the content area right border from Thesis

The content area doesn’t use a border, but has an image background as separator. This can be removed by setting the following CSS rule:

.custom #content_box {background: 0;}

Removing the post_box border from Thesis

If you display posts on the main page, there will be a border between each. To get rid of it set the following style:

.custom .post_box {border: 0;}

Removing the teasers_box border from Thesis

Like the post_box borders, the teasers (if you use them) have a border between each row. This is identical to above and we specify the following CSS rule for the class:

.custom .teasers_box {border: 0}

Removing Navigation Borders in Thesis

If you’ve ever wanted to remove the borders from the default Thesis nav menu, here are two more options which make it easy.

Removing Navigation Borders in Thesis by Admin Options

The simplest way is to either set the border width of the menu border to zero, or to change the menu border’s nav border color to match the background. I’ll only outline the first as I don’t recommend the second method for most cases.

Just open your Thesis Design Options panel and expand the Nav Menu subsection. Set the nav border width (px) to zero and save.

Removing Navigation Borders in Thesis using CSS

As always, the CSS allows you to be more specific.

By default there are two borders in the Thesis nav bar: one for the menu itself, and one for each tab’s link.

You can achieve the same results with the following style changes:

.custom .menu, .custom .menu  a { border: 0; }

There, as you can see there are some further simple ways to customize your Thesis WordPress theme framework without too much work. That’s one of the many things I love about using Thesis and WordPress to design websites—so simple!

All content is copyright 2009-2010 Jim F. Munro.
Visit my blog for more great content on web design and development, WordPress and Internet Marketing: Jim F Munro

Are you looking for a powerful, easy to use and infinitely customizable WordPress theme? I suggest you try Thesis for WordPress. Read my review of the Thesis theme here.

It's 2010 and site speed matters, just ask Google.

Don't let your webhosting choice be a crapshoot, get started on the right foot with Bluehost.

I was recently at a session at Wordcamp Boulder and there was a question asked on what a good way to install plugins on multiple blogs.  I believe the question was related to the situation where you have Blog A where you have tested and installed a bunch of plugins and you have things working the way you like them and you wish to move all of these same plugins to Blog B which is a new install, or something similar.

I recommend a couple of ways which can save you boatloads of time when installing WordPress Plugins across multiple websites. It just depends on how much work you want to do.

The Plugin Method

If you are a fan of plugins there is a handy one called Plugin Central which was written by the prolific plugin author Vladimir Prelovac.  It allows you to basically paste in a list of your plugins from one site and then it will go out find (on WordPress.org), download and install all of them in one click.  It’s a pretty nice solution if you want to use a plugin for this.

The down side is that it only works for plugins and needs to be run after

The Template Site Method

If you find that you install WordPress on a lot of different websites, there is another way which I’ve used a fair amount, but it takes a little bit of work to set up once, after that, you are ready to go.

It will provide you with a way to install the exact same Website “template” on as many domains as you would and also includes the WordPress install, any themes and all your favorite plugins.

Build It

Start by gathering up all the files to be included. WordPress install zip, theme and plugins. Just download from WordPress.org or, in the case of custom themes or plugins, from any vendors you purchase add-ons from.

Extract WordPress somewhere like your desktop and open up WordPress folder.

Delete any unwanted stuff. I usually get rid of the default theme and the Hello Dolly plugin (no offense Matt!), just to reduce the amount of files needed to copy (and for security).

Renaming your config-sample.php to config.php now will save you some time later on.

Add your theme to the folder as you would normally by extracting the theme zip into the wordpress/wp-content/themes directory. Do the same for plugins, extracing them into wordpress/wp-content/plugins.

Compress It

Now open up the WordPress folder and highlight all the files and directories and create and add them to a new zip file (or whatever archive you use) named something like wpsite-template.zip.

Be sure to zip the files in the WordPress folder and not the folder itself. This way it allows you to extract the archive of files right into the location it will run from.

Install It

Fire up your FTP program or control panel’s file manager.  Upload the archive into the root directory or sub-directory of your web server hosting account.

Now you have your base installation you can use whenever you need to set up a new website. This works well on a shared hosting account where you may decide to add a new site, in which case you create it’s directory, unzip the files there and *bam* you’ve got your installation done in a few seconds.

Extract it

Locate the file in whatever remote file manager you use, like CPanel or whatever you’re comfortable with and extract the files to wherever you’ve set up the website.

Use It

You still need to create your database, modify the config.php to add your database info, secret keys and database table prefix (you are changing these, right?).

You should also (right now, don’t wait) update your installed files (WP, theme and plugins) to all the latest versions for security reasons.  Fortunately, WordPress 3.0 makes it pretty simple to do from a single location in the control panel.

Enjoy Life

Once done you will have an easy way to add your customized sites quickly with almost a single click and will hopefully save time and avoid confusion.

Let me know if you have any suggestions to improve this concept as I’m always looking for ways to save time.

All content is copyright 2009-2010 Jim F. Munro.
Visit my blog for more great content on web design and development, WordPress and Internet Marketing: Jim F Munro

Are you looking for a powerful, easy to use and infinitely customizable WordPress theme? I suggest you try Thesis for WordPress. Read my review of the Thesis theme here.

It's 2010 and site speed matters, just ask Google.

Don't let your webhosting choice be a crapshoot, get started on the right foot with Bluehost.

Creating Content On Your iPad

I use my iPad as a media consumption device (mmm, media nom nom), but I also think it can be a powerful way to create content without being limited by the size and battery life of a laptop.  [I recommend using either the wireless keyboard or the keyboard doc for easier typing though.]

With that in mind, if you’ve ever wanted to edit a Word document on your iPad, you may have discovered there’s not a simple way to import files directly into Pages. But here is a method I’ve been using.

One of the better “high-end” word processors is Pages, made by Apple.  It may not be the best one available, but it is likely the easiest one to understand if you come from a MS Word background like I did.  It’s very similar and I find it less bloated with irrelevant features, and more intuitive to use than Word.

Unfortunately, Pages has frustratingly few ways to work with existing documents and other media formats. If you want to work with existing documents, you have to resort to some arcane methods to get the docs onto your iPad and into Pages.  As they say, there’s an app for that.

My Methods

Rather than having to resort to emailing documents to yourself, we can access the file directly. I tend to use Dropbox a lot and love it. I still have yet to use up my free 2 gigabyte account and this is a perfect application for it.

Let’s say we keep a folder called Documents and store our .doc file there.  If I want to import it into Pages I first need to get it onto my iPad.

My favorite method also requires an additional app for the iPad: GoodReader. It’s only $1.00 and is probably number 2 or 3 on my most-used-app list.  The thing is great for reading PDFs and any other materials you can throw at it.

The nice feature here is that you can directly access your Dropbox account from within the GoodReader app itself.

How To Convert A Word Document To Pages

Just direct Goodreader to your file location above and select the Modify Files button, select the round button next to your file and click on the Open In… button which will appear in the panel on the right.  It will give you a couple of choices including Pages (assuming you own the app on your iPad.)

If you edited your word doc on Windows rather than Mac you may get some warnings about missing fonts, I just lived with whatever changes it made and kept going.

This should let you import Word Docs into Pages on your iPad pretty easily.

As with all technology, this could be out of date very quickly if Pages ever decides they want to support this directly, but for now it is a pretty simple solution.

What Do You Think?

Have you used your iPad for content creation for people (other than yourself)?  If so, what tools or apps have you found handy to use?

All content is copyright 2009-2010 Jim F. Munro.
Visit my blog for more great content on web design and development, WordPress and Internet Marketing: Jim F Munro

Are you looking for a powerful, easy to use and infinitely customizable WordPress theme? I suggest you try Thesis for WordPress. Read my review of the Thesis theme here.

It's 2010 and site speed matters, just ask Google.

Don't let your webhosting choice be a crapshoot, get started on the right foot with Bluehost.

I get a lot of questions about how to add theme content to only single posts. (Versus pages, the home page, etc.)

Again, I’m using the Thesis theme framework on most of my websites and will go over how to bend Thesis to your will and also I’ll give an easy way to add to any theme, Thesis or not.

I’ll give two simple ways to do this (using custom_functions.php and also with the OpenHook plugin). I’ll even throw in a bonus for people using any theme at all.

Add A Custom Function

This method assumes you’re comfortable modifying your custom_functions.php file.  I recommend testing this on a local testing machine and not your live site since you can render your site unconscious (temporarily) if you goof up a bracket. Just copy the following PHP code snippet and paste it at the bottom of your custom_function.php file.  Make sure the PHP brackets are not closed or you’ll bork up your site.

function do_in_post_only() {
if (is_single()) { /*don't show on the home page*/
?>
<h3>Test</h3>
<!--do something useful here-->
<?php}
}
add_action('thesis_hook_after_post','do_in_post_only'); /*add after the post content*/

You can see that it’s pretty simple. If you want it in a different location on the post then find where you want it to go, get the hook name and replace the text in red above with your hook name and it’ll be displayed in the location. Need a clue to some of the hook names? You can find a listing of all Thesis hooks and a visual guide is also available if that’s not clear.

Using OpenHook

A plugin I use frequently to make things even simpler (yes, it gets even easier) is Rick Beckman’s Thesis OpenHook plugin.

I won’t go into the details on the plugin, but if you like things easy, then this is for you.

To recreate what we did above, all we need to do is navigate to the plugin page under Appearance->Thesis OpenHook.  Find the appropriate hook box (here we will use After Post hook section) and drop in the following PHP code. Check the box to ‘Execute PHP on this hook’ and voila, the same fascinating result is displayed.

For Non-Thesis Themes

Again, I have to jab. If you aren’t using Thesis, why not? Life is too short to hack poorly written themes.

That being said, you can do this but it will require a) working in PHP (just cut & paste, so it’s not very difficult) and b) some trial and error depending on how your theme is designed.

You need to access the PHP files which you can do either through FTP or through the WordPress Admin interface by going to Appearance->Editor. Once there you’ll probably find a file called single.php or post.php or some variant of the two. Edit that file and play around where you want your text/image/whatever to display and paste in whatever PHP functions or HTML code you want. Save the file and that should be it. Again, I’m short cutting here because there are many ways to do it and I can’t cover them all. Just experiment.

There you have it, a simple way to add some text or function only to your single post pages.  Let me know how it goes in the comments.

All content is copyright 2009-2010 Jim F. Munro.
Visit my blog for more great content on web design and development, WordPress and Internet Marketing: Jim F Munro

Are you looking for a powerful, easy to use and infinitely customizable WordPress theme? I suggest you try Thesis for WordPress. Read my review of the Thesis theme here.

It's 2010 and site speed matters, just ask Google.

Don't let your webhosting choice be a crapshoot, get started on the right foot with Bluehost.

I’m always looking for ways to enhance my blog articles easily. I may be lazy, but I also like small changes that have big impact.

Pull quotes are a fun and, more importantly, easy way to give a more professional or journalistic look to your posts or pages.  I’ve read several blogs recently which gave tips and suggestions on how to use them in your posts.

I have put together a couple of screencasts showing you the basics and how to make them useful to your blog. I’ve also included a few image files to get you started.

Why Would I Want To Use Them?

Sometimes things are easier to understand if you can see them in action. If you want plenty of visual examples you can read more about pull quotes on Smashing Magazine’s site.

Another benefit of pull quotes is that since many people (me at least) skim-read content on the web, you can give them a few summarized highlights of your article and if they read at least that, you are lucky.  So it can enhance your readability without requiring you to change your approach to presenting your content. It can also give a reader an idea if they want to devote the time to reading the article. Either way seems like a win.

You don’t need to know the definition of pull quotes to recognize them, you see them all the time in newspapers and magazines.  On the web their use seems to be less common, but they appear to be gaining in popularity.

Easy Install With A Plugin

Fortunately for us, they are quite easy to implement thanks to yet another WordPress plugin.  The plugin I’m using here is called Simple Pull Quotes and the plugin is just that. You can get this plugin either from the WordPress repository or from the author’s site.

Three things to keep in mind when using pull quotes is that they shouldn’t be used too often, they shouldn’t be too large and they shouldn’t be included for the wrong purposes. In most cases an ordinary article should have at most 1-2 pull quotes, otherwise they lose their appeal and the article becomes harder to scan.

However if you’re trying to emphasize a key point, or a key word, then this is an easy way to do it without seeming too spammy.  So they can only help your on-page SEO.

In this first video below I go over some of the basics of using the plugin.

Click here to view the embedded video.

How To Easily Make Them Unique

In the second video I demonstrate a few ways you can quickly and easily style your pull quotes to look different than the standard out-of-the-box installation.  This will help give your quotes a unique look that blends in with your website theme.

Click here to view the embedded video.

Some Examples

Here are some cut & paste examples of CSS styling I added in the second video. Just drop this into the plugin’s CSS file, upload the images and off you go.

Darker gray quote:

width:200px;
float:right;
border-top:3px #868686 solid;
background: #fff top left no-repeat url("../images/gray-quotes.png");
text-indent:10px;
padding:15px 6px 10px 10px;
margin:10px 0 10px 10px;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;


Orange background blue text:

width:200px;
float:right;
background: #ffbd54 url("../images/orange-quote.jpg") no-repeat 5px 5px;
color: #3140f3;
padding: 5px 10px 5px 35px;
margin:10px 0 10px 10px;


Red quote & border no shadow:

Oh my, oh my!

width:200px;
float:right;
border:1px solid #f00;
background: #FFDFDF top left no-repeat url("../images/red-quote.png");
text-indent:30px;
padding:10px;
margin:10px 0 10px 10px;


Centered text top borders:

width:200px;
float:right;
border-top:1px solid #333;
border-bottom: 1px solid #333
background: #fff;
text-align:center;
padding: 5px;
margin:10px 0 10px 10px;
font-family: serif;
font-size: larger;

Put them to work

As demonstrated, you can easily add impact to your next blog post with a pull quote (or two) and provide your readers with an easy way to get the meaning from your text, hopefully giving them more incentive to read the full article.

Here are the image files used above which you can try out, plus a couple of bonus images thrown in for good measure. (Click icon to download.)

[Image Attribution: CC License]

All content is copyright 2009-2010 Jim F. Munro.
Visit my blog for more great content on web design and development, WordPress and Internet Marketing: Jim F Munro

Are you looking for a powerful, easy to use and infinitely customizable WordPress theme? I suggest you try Thesis for WordPress. Read my review of the Thesis theme here.

It's 2010 and site speed matters, just ask Google.

Don't let your webhosting choice be a crapshoot, get started on the right foot with Bluehost.

I like to think that my websites are error proof. WordPress does a great job handling cases of mis-typed URLs, outdated or broken links, and general server-farts.  But no matter how bullet proof the system is, it is possible to crumb up your own system as it gets older, obtains more internal links and posts and others link to who-knows-what on your site.  These will often create a 404 error condition and how you handle them on your site can be important in order to keep visitors from leaving your site too soon.

That being the case, I have been amazed lately how many well-known websites that run Thesis theme (I’m not naming any names.) use the default 404 error-page text. The text on the standard Thesis 404 page is, to put it simply, icky and a bit condescending to your potential site visitors.

You 404’d it. Gnarly, dude.

Surfin’ ain’t easy, and right now, you’re lost at sea. But don’t worry; simply pick an option from the list below, and you’ll be back out riding the waves of the Internet in no time.

* Hit the “back” button on your browser. It’s perfect for situations like this!
* Head on over to the home page.
* Punt.

After all, it’s not their fault they’ve ended up on a non-existing page on your site. (How many people actually type in URLs to any but the homepage.)

If you aren’t sure what a 404 error message is, here is a definition from Wikipedia:

The 404 or Not Found error message is an HTTP standard response code indicating that the client was able to communicate with the server but the server could not find what was requested.

It could be an outdated or moved page that was indexed a long time ago or maybe you’ve updated your site, moved things around. Who knows, but finding and fixing broken links is the website owners responsibility. There are some useful plugins to help to check for broken links, here’s a good one.

Rather than scare off a potential (future) visit, you can easily adjust the language (that’s why Thesis is so great, right?) to make it more user friendly. At the same time you can give the user a few options that make it more more likely they will stay on your site for awhile and then go off and tell their friends how much a genius you are. (Okay, maybe I’m gettiing a little hopeful, but you get the idea.)

There are a couple of simple methods to add a customized 404 page if you’re running Thesis:

1. The easy way using OpenHook plugin.

If you use this plugin, you’ll have things easier. You can find a simple tutorial on how to change the page title and text here. (I find it humurous that the author of the tutorial doesn’t actually use the technique she demonstrates. Oh well, it still will work for YOUR site.)

2. The code way, with the custom_functions.php.

This way involves working with a little bit of php, nothing too challenging, but if you aren’t comfortable doing that then I would suggest method #1 or asking someone for help.
Rae Hoffman has a straightforward guide to making the changes on her website here.

Now that we know how to do it, what should a 404 error page contain?

Some good ideas include:

• A link to the homepage.
• A category listing or page listing.
• A search box front and center.
• Something humorous to keep them there. Rae put a video on her page. I’ve seen someone give away a free eBook as an apology gift, how much more generous could you be?
• Try something new and creative. You can check out some ideas at Smashing Magazine.

Ideas to Avoid Confusion

I would suggest removing the “404″ from the error message as 99% of visitors usually have no idea (and don’t care) what that means. Why show them an error code at all and risk them thinking there is something wrong with your website. You should just tell them there’s a problem and that you have a solution.

The most important of all is: don’t confuse them. Help them find what they were looking for and give them as many ways as possible to get them back on track. Do that and you’ll be able to retain more visitors and get them to return again and again.

What If I Don’t Have Thesis?

Well, then go here and get it! Seriously, life is just easier with Thesis, but I’m biased I guess.

In the case you don’t have Thesis, there are some options.

The WordPress Codex on creating 404 error pages

You can find the WordPress Codex page  for handling 404 pages. Do this if you want to code it yourself or want to modify an existing theme.

404 Notifier Plugin

This plugin will help you catch 404 errors that come up on your page. Useful if you’ve moved things around on your blog.

Smart 404 for WordPress

This plugin goes even further.  Here’s the description:

When a page cannot be found, Smart 404 will use the current URL to attempt to find a matching page, and redirect to it automatically. Smart 404 also supplies template tags which provide a list of suggestions, for use on a 404.php template page if a matching post can’t be immediately discovered.

What If I Don’t Run WordPress OR Thesis theme

This was originally an article geared toward WordPress-centric websites, but I’ve had a few questions about non-blog issues or HTML/PHP-based websites.  The answer is pretty simple and direct but requires you customize your .htaccess file.  If you’re not comfortable with that, I suggest calling in a professional. But it’s pretty easy if you follow these basic instructions. It’s essentially editing a text file on your server and pretty straightforward, assuming your web hosting company gives you that kind of access (most do). Follow this and you’ll be up and running in no time.

All content is copyright 2009-2010 Jim F. Munro.
Visit my blog for more great content on web design and development, WordPress and Internet Marketing: Jim F Munro

Are you looking for a powerful, easy to use and infinitely customizable WordPress theme? I suggest you try Thesis for WordPress. Read my review of the Thesis theme here.

It's 2010 and site speed matters, just ask Google.

Don't let your webhosting choice be a crapshoot, get started on the right foot with Bluehost.

The Facebook like button is here and is potentially going to be huge.  Do you want to add one to your website?

If you already have the awesome Thesis theme framework, this will be easy to do without having to touch any .php template files directly. If you do have Thesis, I also recommend using the Thesis Openhook plugin, it make working with hooks simpler and “safer” than ever.

Note: I see there are now a ton of Like Button plugins on wordpress.org, in fact there are tons of them. So if you want another way to add this on your blog or if you don’t have the remarkable Thesis theme (you don’t!?), it might be another way to go. However, the main downside to plugins, in general, is plugin-bloat and overhead during page access. It may impact page speed and also depending on how well the code was written may inject some extra CSS into the document head, bulking up your pages. So the tutorial below is still a viable method for adding a Like button.

I have replaced my old post subscription footer with a new footer where I include the Facebook Like button. As shown here:

The HTML

You can go to the Facebook site and generate your own customized code here, or you can just cut and post this snippet below:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=lucida+grande&amp;colorscheme=dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

Note the bolded section is *not* created by the Facebook widget generator, this is an addition that will enhance the specific link to point directly to your post. So if you generated code from Facebook, replace the url with the bold text above.  [Thanks to Andreas Jacob for this idea.]

Assuming you want to add this just to your posts (not pages or the home page), then add the following snippet into the OpenHook plugin section named “After Post” (or the thesis_hook_after_post if you are editing the custom_functions.php).


<?php if (is_single()) { ?>
<div id="fb">
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>
</div>
<?php } ?>

Note: Be sure to select the checkbox to “Execute PHP on this Hook”.   Don’t forget to save the changes.

The div section will allow us to style this into a eye-catching box, which we’ll do next.

The CSS

Go to the Thesis Custom File Editor and work on the custom.css file.  I presume you’ll want to customize this, be original. This is just for reference to get you started.

Add the following section somewhere in the custom.css file:

  .custom #fb {
  padding:5px;
  background:#CFE7FF url('images/facebook_32.png') no-repeat 5px 7px;
  border:2px solid #3b5998;
  width:85%;
  margin: 0 auto 20px auto;
 -moz-border-radius: 5px; -webkit-border-radius: 5px;
}
.custom #fb iframe { height: 25px; margin:5px 0 0 45px;}

You can see there is a background image for the Facebook logo specified. If you want to make it easy, right click on the one on this post and save it to your machine and upload it to your Thesis custom images directory.

Save your changes to the custom.css file.

Go to any post page on your site and it will be displayed simiarly.  Now go write amazing articles that everyone will like and you will be loved by all.

All content is copyright 2009-2010 Jim F. Munro.
Visit my blog for more great content on web design and development, WordPress and Internet Marketing: Jim F Munro

Are you looking for a powerful, easy to use and infinitely customizable WordPress theme? I suggest you try Thesis for WordPress. Read my review of the Thesis theme here.

It's 2010 and site speed matters, just ask Google.

Don't let your webhosting choice be a crapshoot, get started on the right foot with Bluehost.

There were a couple of threads in the DIYThemes forum about removing page titles.  Lots of solutions were thrown out including hiding the title with CSS rules like:

    h1 { display: none;}

While this does work, it’s not really a recommended solution because of the possibility of being construed (by the search engines) as a nefarious, evil, black hat technique. Oooooh *hand waving*.

I suggested that the easiest way is just to chop the titles straight out of the PHP code and be done with it. No need to hide, align, obfuscate or anything tricky on the presentation end.

What’s Involved?

This can be as simple as commenting out 2 lines of code.  If you aren’t comfortable with mucking around with your thesis files, please don’t. But I expect even beginners can achieve this by following the directions. (Famous last words.)

This modification assumes that you don’t need titles to display on any Page (not Posts) within your WordPress website (it removes it from every pages on your site).

Keep in mind — that we are going to modify the php templates within Thesis, not the Custom files.  This is usually a no-no only because if you upgrade your theme (or reinstall for whatever reason), you will lose your changes.  Not the end of the world, but you should keep this in mind and possibly back up your changed files.  (You do back up your site frequently anyway, right?)

Let’s Begin

Just comment out line 36 & 37 from \lib\functions\content.php (This is in Thesis 1.6)

Looks like this below: (starts on line 33)

Change this:

elseif (is_page()) {
	if (is_front_page())
		echo ' <h2>' . get_the_title() . '</h2>' . "\n";
	else
		echo ' <h1>' . get_the_title() . '</h1>' . "\n";

elseif (is_page()) {
	if (is_front_page())
		echo ' <h2>' . get_the_title() . '</h2>' . "\n";
	//else
		//echo ' <h1>' . get_the_title() . '</h1>' . "\n";

Things To Consider

The only issue you may see is that the formatting will leave a gap where the title used to be, but that could be worked around with some extra css rules.

Let me Know How It Goes

Did this tutorial answer your questions? Did you use it on your own site?  Please leave a comment.

All content is copyright 2009-2010 Jim F. Munro.
Visit my blog for more great content on web design and development, WordPress and Internet Marketing: Jim F Munro

Are you looking for a powerful, easy to use and infinitely customizable WordPress theme? I suggest you try Thesis for WordPress. Read my review of the Thesis theme here.

It's 2010 and site speed matters, just ask Google.

Don't let your webhosting choice be a crapshoot, get started on the right foot with Bluehost.

I haven’t found a lot of great resources for adding basic CSS customizations for the Thesis theme so I created one of my own.

Note: If you’re looking for a Thesis theme hooks map, you can find one here.

I didn’t drill down to every single child element, but if you’re looking for the basic container divs on the main default page or need some place to start here it is.

I colored the divs with the following custom CSS.

.custom #body {}
.custom #container { border: 1px solid blue !important; }
.custom #page { border: 1px solid green !important; margin:4px;}
.custom .menu { border: 1px solid red !important; }
.custom #header { border: 1px dashed blue;}
.custom #content_box { border: 1px dashed green; width: 952px;}
.custom #content { border: 1px dashed red;}
.custom .post { border: 1px dotted blue;}
.custom .headline_area { border: 1px dotted green;}
.custom .teasers_box { border: 1px dotted red; }
.custom #sidebars {border: 1px dashed purple;}
.custom #sidebar_1 { border: 1px dashed brown; width: 190px;}
.custom #sidebar_2 { border: 1px dashed black; width: 190px;}
.custom #footer {border: 1px solid red; }

(Click the the thumbnail for the full size link)

All content is copyright 2009-2010 Jim F. Munro.
Visit my blog for more great content on web design and development, WordPress and Internet Marketing: Jim F Munro

Are you looking for a powerful, easy to use and infinitely customizable WordPress theme? I suggest you try Thesis for WordPress. Read my review of the Thesis theme here.

It's 2010 and site speed matters, just ask Google.

Don't let your webhosting choice be a crapshoot, get started on the right foot with Bluehost.

People go to a lot of effort to get people to visit to their site.  Once you get them there, why not encourage them to come back?

Since my blog is kind of new, I’m doing all I can to encourage people to come back and read all this fantastic, brilliant and inspirational content day after day.

Assuming you’re actually creating content regularly, one way you could get more readers to your blog is to give them a way to keep up-to-date on your latest content. By giving them options to follow your updates, you are lowering the barrier and making it easy for people. This is key.

The problem with a lot of the default RSS feed, contact form and social bookmark links is that they live at the top-right corner of your blog theme. Once you read down to the bottom of a post, they are long gone, but this seems like the perfect location where you should be asking your reader to follow you, the assumption being that if they got the end of an article, they might very well be interested in future articles.

My post footer box.

They just need to know where to find it and you will show them.

One great method you can use is a single post footer, which provides your readers several ways to subscribe to your content — RSS, email, Twitter, etc. This will be displayed at the bottom of every individual post page on your site.

Let me show you one easy way to add a post footer to your blog.

Easy With Thesis and OpenHook plugin

First off, I use Thesis as my theme. It’s great: easy to customize and simple to use. However,  no matter what theme you use, you can still follow this tutorial. The steps might be a little different or more involved. Need help?

In addition to the Thesis theme, you can simplify things greatly by using the Thesis OpenHook plugin (get it here). This allows you to access Thesis system of custom hooks without needing to mess with custom theme files. (Note: I may expand this tutorial to use the native Thesis custom files if anyone asks for it. If that would be useful, leave a comment.)

Write the HTML

I chose to keep things simple, by using a simple box containing an RSS icon and some actionable text. Using an icon will show instantly what you’re trying to achieve. (Need an RSS icon? Try this site.)

You can obviously dress it up and make it as fancy as you want. Be creative and differentiate yourself. Don’t just cut and paste my example.

This is the html and text I used for my own site:

<div id="subscribe-box">
	<div id="rss-icon">
		<a href="http://feeds.feedburner.com/" target="_blank" /><img src="/icon-rss.png" /></a>
	</div>
	<div id="subscribe-text">
		I regularly add new articles about . If this article was helpful why not subscribe to my <a href="http://feeds.feedburner.com/" target="_blank" />RSS feed</a> and get the latest updates immediately. You can also subscribe through <a href="http://feedburner.google.com/fb/a/mailverify?uri=&loc=en_US" target="_blank" />email</a> or follow me on <a href="http://twitter.com/" target="_blank" />Twitter</a>.
	</div>
	<div class="clear"></div>
</div>

Format With CSS

I chose to retain some standards and decouple the presentation (formatting) from the data by adding CSS rules to the custom.css file within Thesis. (If you are not using Thesis, this would likely go in your themes style.css.)

Select the following menu (the CSS file will be displayed by default):

Thesis Options->Custom File Editor

Paste in the CSS and update the formatting to your liking:

/* Subcribe box*/
#subscribe-box { padding:5px; background:#F4F9FD; border:2px solid #BFF0FF; width:90%; margin: 0 auto 20px auto;}
#subscribe-box #rss-icon {float:left; width:10%; padding-top:5px; padding-left:5px; margin-right: 10px;}
#subscribe-box #subscribe-text {float:right; width:87%; font-family:arial, verdana, sans-serif; font-size:1.2em;}
.clear { clear: both; }

Add It To OpenHook

Now we will take what you created in the HTML section and add it to the footer on each post.  (I am assuming it’s already installed on your blog.)

From the Administrator console, you access the plugin options by going here:

Appearance -> Thesis OpenHook

Scroll down or choose the hook from the floating menu. The Hook you want to use is called, oddly enough, After Post (For reference, the Thesis hook name is thesis_hook_after_post in the floating menu).

Paste in the following code:

<?php
if (is_single()) { //only use it when displaying a single post on it's own
?>
<div id="subscribe-box">
	<div id="rss-icon">
		<a href="http://feeds.feedburner.com/StickyBeanLegs" target="_blank" /><img src="http://www.jimfmunro.com/wp-content/uploads/2009/12/icon-rss.png" /></a>
	</div>
	<div id="subscribe-text">
		I regularly add new articles about resources, tutorials and WordPress for web designers and developers. If this article was helpful why not subscribe to my <a href="http://feeds.feedburner.com/StickyBeanLegs" target="_blank" />RSS feed</a> and get the latest updates immediately. You can also subscribe through <a href="http://feedburner.google.com/fb/a/mailverify?uri=StickyBeanLegs&loc=en_US" target="_blank" />email</a> or follow me on <a href="http://twitter.com/jimfmunro" target="_blank" />Twitter</a>.
	</div>
	<div class="clear"></div>
</div>
<?php
}
?>

Be sure to select the checkbox (located below the code input field) named Execute PHP on this hook so it will actually run the code instead of displyaing it as text.

View It

Go to any single post on your blog, and there it is — a way for your readers to sign up and follow your brilliant words.

If this tutorial was useful, please consider leaving comment feedback.

All content is copyright 2009-2010 Jim F. Munro.
Visit my blog for more great content on web design and development, WordPress and Internet Marketing: Jim F Munro

Are you looking for a powerful, easy to use and infinitely customizable WordPress theme? I suggest you try Thesis for WordPress. Read my review of the Thesis theme here.

It's 2010 and site speed matters, just ask Google.

Don't let your webhosting choice be a crapshoot, get started on the right foot with Bluehost.