Jim F Munro » Tutorials

Removing Thesis Page Titles With Filters

Jim — Fri, 12 Nov 2010 19:38:56 +0000

I see a lot of repeated questions on the best way to hide Page Titles in Thesis, so I guess it must be a pretty common issue.

While there are a bunch of ways to do it which either require hacking PHP code (which is prone to breaking something) or hiding it in CSS (which may impact your search rankings) I have never been fully satisfied with them. But, as usual, there is a better way–using Thesis Filters.

Note: I have written about this before here, but I was never satisfied with the methods proposed. So for a better way, read on.

What is a WordPress filter?

You can read all about Thesis Filters here and access the library of functions which allow you access the code to do other fabulous tricks to amuse your family.

Given the number of available places to apply filters, often the trick can be finding the right one for the job. Fortunately, there is very specific area which gives us direct laser-targeted precision directly to the headline area of any post or page.

The Problem

By default, any post or page will display a section entitled Headline Area. The HTML looks like this:


  The Title
  November 12

But what if we won’t want a title displayed on our Pages as is often the case when you are building non-blog site. There isn’t any good way at the Page-level to remove titles.

The Solution

What we want to do is remove the whole section starting with the outer div. We also want this removed before it is even served up to your HTML page, so this is where custom filters come in handy. The next step is to write our own filter to process and remove the section.

Here are 3 working examples which apply a filter to the thesis_show_headline_area function. You can cut and paste these into your custom_funtion.php file as-is and they will work fine. Just pick one

Code Examples

How to Use This Code

Warning and Disclaimer: There is some PHP coding required, but it’s pretty easy to do. But it’s also easy to miss a closing bracket and cause your site to go dark. If you break your site, I am not responsible for the damage. You’ve been warned. (FTP is your friend in case of emergency.) When in doubt, Read the Friendly Manual or visit the Thesis Forums.

Go to your Thesis Custom File editor menu, select the custom_function.php from the list and select the Edit Selected File button to display your custom_function file.

If you’ve never made changes to this file, you can go to the very bottom of the file and copy & paste in one of the following code blocks.

Version 1 – Hide all page titles

As the name implies, this will hide it on any page on your site, but not on single post pages or the home page.

function suppress_title() {
  return (is_page()) ? false : true;
}
add_filter('thesis_show_headline_area', 'suppress_title');

Version 2 – Hide a single page title by Page ID

Want to know how to find the Page ID in WordPress?

This allows you to specify a page by its ID. Useful if you only want to hide on a single page.

function suppress_title() {
  return (is_page('32')) ? false : true;
}
    add_filter('thesis_show_headline_area', 'suppress_title');

Version 3, hide multiple pages specified by title and/or Post ID

Want to know how to find the Page ID in WordPress?

Lastly, you can specify an array of Page IDs, Page Titles or Page Slugs. Pretty fancy huh? You can specify any number of additional pages by appending values to the array.

  function suppress_title() {
  return (is_page(array('35','Contact','Directions','all-about-me-page'))) ? false : true;
}
add_filter('thesis_show_headline_area', 'suppress_title');

What The Code Does

Each time WordPress builds the page to display, it checks to see if it’s of type Page, if it is then it just removes the headline area from the code. This way no CSS tricks are needed and we can just forget about this on our single pages. Nice, eh?

If you get stuck, here is the WordPress codex information on using the WordPress is_page function.

Good luck!

If you have found any other good uses for filters, leave a comment.

Image Credit via Flickr

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.

Adding Thesis Custom “Read More” Text to Postie

Jim — Fri, 29 Oct 2010 14:10:47 +0000

Image Credit: Work Less, Read More

I guess I’ve been doing a lot of work lately on being able to do blog posts by email. When combined with a useful Markdown WordPress plugin, it really expands your ability to get stuff written and I’m loving it.

Never content to leave things be, I decided to add some additional functionality to the Postie plugin: namely, customizing the Read More link text for Thesis theme.

A nice feature of Thesis (and other theme frameworks) is the customizability. When I was adding some custom Thesis post image support for Postie in my other article, I decided it wouldn’t be much more work to add a way to set the text used when you specify your tag text. This allows you to make a more interesting link than just “Read More…”.

If you are interested in doing this, then read on…

Our tutorial begins by adding a simple function to the postie-functions.php file. You can edit this right from your WordPress Admin interface if you’re feeling brave, or working on a test file might be more wise. Your choice.

Add a New Function

We want the parser to scan the post content and remove the customized more link and its value, like it does for the tags function called postie_get_tags(). Except this is even simpler.

Paste in the following function anywhere into your file:

/**
  * this function captures the user-specified more text for use with Thesis
  *
  */
function postie_more_text(&$content, $default_text="Read More...") {
  $more_text = $default_text;
  //try and extract a value
  if ( preg_match('/moretext: ?(.*)\n/i', $content, $matches))  {
    $content = str_replace($matches[0], "", $content);
    $more_text = $matches[1];
  }
  return($more_text);
}

Modify the Existing Post Array

Next we need to add support for the object that gets passed around and filtered.

Line 176:

Add an additional entry to the end of the array, don’t forget to add a comma to the previous line.

'more_text' => $more_text

Call the Code

After the call to postie_get_tags on Line 106 insert the following line to call our function:

$more_text = postie_more_text($content);

Add (yet another) Postie Filter

If you followed my previous article, you already have a Postie filter that will add Custom fields for the Thesis post image. If not, go check out the article.

Add the following line to your filter function:

add_post_meta($post['ID'], 'thesis_readmore', $post['more_text']);

Add moretext to Your Posts

Now anytime you send a post you can specify a line like:

moretext: Read My Brilliant Article

Remember, it needs to be on its own line, like the tags.

And you’ll find that this value is now added as a custom field in your post. You’ll need to include the More link in your post to activate it, but you can insert that into any post by email since it handles inline HTML just fine.

Give it a whirl and let me know how it works for you.

Oh, and start writing more!

Using Markdown With Your WordPress Blog

Jim — Thu, 28 Oct 2010 19:55:04 +0000

In a previous article I wrote about how you can send in posts by email with enhanced functionality. This works by default with the Postie plugin, but if you are running these there are some advanced features you can take advantage of if you modify the default plugin code.

If you really want to add some power to post by email without adding a lot of typing overhead, I recommend also writing your post in Markdown.

If you haven’t seen Markdown, it’s a lightweight markup language to help maximize readability and ease of writing. It is easy to learn and has a very simple syntax. Its main benefit for writing is that it allows you to format text for printing, like HTML, but also retains its readability in cases where there is no translation to HTML (i.e. not in a browser). (Unformatted HTML is very difficult to read if it’s viewed in its raw state.)

There are a couple of ways you can use markdown on a WordPress site, you can run Markdown directly by PHP, but the easiest method I’ve found is by installing, you guessed it, a WordPress plugin that enables Markdown.

Some Tips When Using Markdown On A WordPres Blog

If you ever intend to edit it in the WP Admin interface, make sure you aren’t using the visual WYSIWIG editor for your text, or it will reformat the post and remove all your Markdown tags. Very annoying.
If you use Markdown in your post-by-email, make sure your email client is set to send text-only emails rather than rich HTML formatting as it will cause havoc with your content.
Make sure you use a full line between content to ensure paragraph tags are inserted. This is true especially if you have images within your post (when using the Postie plugin).

That’s pretty much it, for a users guide. I hope you get a chance to read my other article on Postie because by using both it may really let you write more easily, without having to think about the technical details of presentation. A good thing.

Customizing Postie Plugin for Thesis Theme

Jim — Wed, 27 Oct 2010 02:54:42 +0000

Image Credit via Flickr

Websites like Posterous and Tumblr are becoming more and more popular lately. Why? Because they are so easy to use, you can concentrate just on your writing and let the software worry about itself. The post-by-email feature makes it even easier, you don’t even need to log into a website to post your articles.

I’ve been really into making my life easier and creating posts by email has been a fun way to update a blog without having to log in to wordpress. It comes in handy if you’re behind a firewall (read: at work), in a coffeeshop where you don’t trust WIFI security, or you could even write a full blog post from your mobile phone.

Post By Email

I know, it’s already built into WordPress, but the default version is lacking in features I like (such as image attachments and specifiying tags & categories on the fly).

As usual, another plugin comes to our rescue–Postie. If you haven’t seen it before, it’s basically a more powerful version of the post-by-mail features.

Using Postie with the Thesis Theme

Postie is pretty nice out of the box, and it even comes with a filter that allows you to easily extend it with customized behaviors. But as with many plugins, there are a few limitations that I discovered when I wanted to specify post images and this required a bit of customization.

The feature I most enjoy, being a Thesis theme user, is the ability to add the custom image fields to my posts. Thesis has several options for post images that you can add. They are all custom (Meta) fields in the post and can be set/read with WordPress functions.

Postie lets you specify inline images OR add them as a custom field to the post. Well, I wanted to do both. With a little work it’s possible.

Image Credit via Flickr

Warning and Disclaimer: There is some PHP code hacking required, but it’s pretty easy to do and I’ll walk you through it. But if it breaks your site, I am not responsible for the damage. You’ve been warned. (FTP is your friend in case of emergency.)

Required plugin settings

There are a bunch of settings in Postie and I am not going to cover any that aren’t relevant to our tutorial. I’m just going to list them and add comments sparingly.

Message Tab
Preferred Text Type = Plain
(Expand the Advanced Settings arrow)
Wrap Content in Pre Tags = No
Filter Newlines = No
Replace Newline characters with HTML Line Breaks = No
Image Tab
Automatically insert image gallery = No
Image Template = Use whatever makes sense for your site.
Use Custom Image Field = Yes

At this point any images attachments are now added as custom fields, but they are not named for use with Thesis and they won’t be inserted into the post automatically.

Let’s fix that.

Add and Modify the PostieFilter plugin

First, you’ll need to copy the included template file filterPostie.php.sample to the root plugin directory.

There are more detailed instructions on creating filters for Postie .

I have added support for all Thesis image options the ones I use, but if there are others like thumbnail size, you can just add another line to the function.

In the interest of SEO value for the page I am copying the post title as the image alt tags. If you wanted to customize this it might take additional work to be able to add a custom field to your post. I am not bothering with it.

Helpful hint: For testing purposes, be sure to set Postie’s post setting to Draft and the Delete email to No. (And remember to set them back when you are done.)

function add_thesis_image_custom_fields($post) {
  add_post_meta($post['ID'], 'thesis_post_image',
  $post['customImages'][0]); /*the first attached image is the post image*/
  add_post_meta($post['ID'], 'thesis_post_image_alt',
  $post['post_title']); /*alt tag is post title*/
  add_post_meta($post['ID'], 'thesis_post_image_frame', 'on'); /*I use image frames in my design, set to off if you don't*/
  return ($post);
}
add_filter('postie_post', 'add_thesis_image_custom_fields');

At this point you now have some of the desired functionality, but you still can’t add inline images into the post.

Hack the plugin

Even if you don’t code, this is easy. You can edit your plugin right from the WordPress administration interface. You might want to disable it first.

There are 3 sections that need modification and I’ll reference each by line number:

Line 575

if ($customImageField) {
  if (count($details['customImages'])>1) {
    $imageField=1;
    foreach ($details['customImages'] as $image) {
      if ($imageField > 1) {  /*this is new*/
      add_post_meta($post_ID, 'image'. $imageField, $image);
    }
  $imageField++;
  }
} else {
  //add_post_meta($post_ID, 'image', $details['customImages'][0]);
  }
}

What We Did:

The if statement will prevent the first attachment from being included into the post. The commenting out in the else statement will do the same thing in the case where it’s the only file attached. We want to use our own code in the filter we created above.

Line 1881

/*if ($images_append) {
$content .= $pics;
} else {
$content = $pics . $content;
}*/

What We Did:

The settings we need to use in the plugin to be able to include images into the post will also put additional attached images at the beginning or end of the post. I didn’t find this useful so I removed it. Comment it out to test, or excise it if you prefer.

Line 2566

Copy and paste the line from the if statement:

ReplaceImagePlaceHolders($content,$attachments["html"], $config);

into the first line of the following else statement.

What We Did:

This copied line allows you to include additional images into your post by attaching them and referencing them. Anything attached after the first image will be accessible in your post by the plugin’s default insertion tags (e.g. #img%#).

Code Downloads

I generally don’t recommend running any code you download from the internet unless you check it for weirdness. But seeing may be easier than following along. You can just cut and paste the entire contents of the file into your postie-functions.php file if you wish. Not recommended.

Download: postie-functions.php Rename extension to PHP.

Download: filterPostie.php Rename extension to PHP.

What’s next?

In an upcoming article, I will go over how you can use Markdown to add an additional layer of ease and power to your post-by-mail.

Removing Borders from Thesis

Jim — Tue, 24 Aug 2010 18:31:23 +0000

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!

WordPress Installation For Multiple Websites

Jim — Mon, 02 Aug 2010 19:28:20 +0000

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.

Import Word Documents Into Pages on the iPad

Jim — Tue, 27 Jul 2010 18:06:40 +0000

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?

Adding Content Only In Posts With Thesis Theme

Jim — Thu, 17 Jun 2010 04:07:31 +0000

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/
?>
Test

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.

Designer Pull Quotes Made Simple

Jim — Sun, 30 May 2010 21:40:50 +0000

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.

Pull quotes are used to pull a text passage out of the reader’s flow and give it a more dominant position in the post or the article.

What are pull quotes? The short definition of Pull quotes is that they are simply short excerpts from the text you are presenting. They are used to pull a text passage out of the reader’s flow and give it a more dominant position in the post or the article. I take that to mean any important key phrase or special point you want your reader to take away from the article.

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

If you have used pull quotes on your blog and have anything to add, please feel free to leave a comment.

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]

Customizing Thesis 404 Pages

Jim — Thu, 20 May 2010 19:48:11 +0000

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.