I gave a talk the other night at the Boston WordPress meetup about how I use shortcodes to enable my clients to create better looking content. A problem I was having was people were paying me to set them up on WordPress so they can take control of their content and then they were paying me even more to edit the content for them to “make it look pretty”. I guess if you need the business this isn’t a problem but I like to avoid small jobs, like manipulating content, so I can focus on my bigger projects and plugin support.

Pros and Cons of WordPress Shortcodes

Themes vs Plugins

The most popular implementation is currently in premium WordPress themes as a means of creating better looking content that matches the look and feel of the rest of the site. The problem then becomes you are tied to that theme if a majority of your site is relying on theme shortcodes to lay out your content. This won’t be a problem if you plan on rewriting your content but definitely something worth keeping in mind. It’s best to take functionality out of your theme you would like to be theme independent and put it in a functionality plugin.

My problem with using formatting shortcodes in a plugin as opposed to a theme is your content is less likely to match the look and feel of the rest of the site. That’s not to say their aren’t some great solutions out there and ultimately using a plugin will keep your content theme independent.

Usability

One of the obvious problems with shortcodes is if you’re taking the time to learn them, you can probably just learn HTML and CSS. I find this is true in most cases but not all. A shortcode is still easier to to use if you find the Visual/HTML editor confusing. You also don’t have to muck around with CSS.

One thing I think helps tremendously is the presence of a user interface to assist in the creation of the shortcodes. Most of the time this is in the form of a button on the visual editor that provides a popup with more options. There is no standard implementation of this so you won’t always have the luxury. More important is you now know it’s possible and can keep an eye out for how themes approach this problem. Most premium themes in ThemeForest do a good job of this.

Speed

If you don’t have to use shortcodes, just don’t use them. We’re talking milliseconds here in most cases so it really doesn’t matter too much. One problem with shortcodes is you cannot detect if a shortcode is being used in your content from your header so you can conditionally load javascript. You can however conditionally load javascript in the footer but it can be kind of a hack.

Resources

Code Snippets

• 10 incredibly cool WordPress shortcodes - Cats Who Code
• Mastering WordPress Shortcodes – Smashing Magazine

Advanced Development

• How to load JavaScript like a WordPress Master – scribu
• Make Shortcodes User-Friendly – Gary Cao

Plugins & Themes

• Styles with Shortcodes for WordPress
• ElegantThemes
• JShortCodes
• HubSpot for WordPress
• ThemeForest

Slides from Boston WordPress Meetup

[slideshare id=8441481&doc=wordpressandshortcodes-110627214435-phpapp02]

I used the [slideshare] shortcode to display the slides!

Come to Boston WordCamp

I’ll be speaking more about shortcodes again at Boston WordCamp so be sure to go and sign up. I’ll be showing different examples of how businesses can use shortcodes to create better looking content. There are a bunch of other great speakers with some very interesting topics lined up. It’s sure to be a great time and an awesome place to get brushed up on all the latest WordPress tips and tricks.

The best part about finding new WordPress themes through these lists is you will discover even more cool new themes as you begin to click through to the individual theme developers pages.

… explore and enjoy!

Free WordPress Themes

Premium WordPress Themes

Elegant Themes

Theme Forest

StudioPress

WooThemes

iThemes

More Premium Themes On WordPress.org

Let Me Know What You Think!

Please share your favorite WordPress themes or even just your favorite place to find them in the comments.

Keep in mind that these are the basics and this is not a guide on how to develop themes for public release.

What You Will Need

• An XHTML web template
• A WordPress install
• A text editor (Like Dreamweaver or Notepad++)
• An FTP client (Like Filezilla)

Getting Started

First, let’s set up our theme files.

Prepare your files

For this tutorial we are going to use the minimum number of theme files needed to create a functional WordPress theme. Your existing template files should include the following:

• An HTML Template File
• A CSS Stylesheet
• An images folder

You should rename your HTML Template File to ‘index.php’ and your CSS Stylesheet to ‘style.css’. This is important and is how WordPress knows which files are which.

This is an example of what your theme folder should look like

Add WordPress Theme Info (video)

This is where your WordPress Theme gets your theme name, description, author link, etc. All you need to do is create a commented out area at the top of your stylesheet as follows:

/*
Theme Name: Rose
Theme URI: the-theme’s-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme–optional
Version: a-number–optional
.
General comments/License Statement if any.
.
*/
CSS Goes here…

Adding Template Tags To Your Theme

Template Tags are bits of code that WordPress uses to populate your website with content. Different tags display different bits of information from the WordPress database. These are the main tags needed to make your WordPress theme work.

Page Title – (video)

Change whatever is within your <title></title> tags to:

<?PHP wp_title(”); ?>

Stylesheet – (video)

We are going to need to swap out the call to our stylesheet with:

<link rel=”stylesheet” href=”<?PHP bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

Plugin Hooks – (video)

Next you will need to add Action Hook Template Tags so WordPress plugins can access your theme. All you need to do is add:

<?PHP wp_head(); ?>

to your header (Usually write above the closing </head> tag).

Then you should add:

<?PHP wp_footer(); ?>

to your footer (Usually write above your </body> tag).

Media and Script Paths – (video)

By default, your paths will most likely reference your site root. You will need to point all of your multimedia, scripts and stylesheets to your new theme folder within the WordPress file structure using:

<?PHP bloginfo(‘template_directory’); ?>

The easiest way to do this is to do a search and replace for ‘src=’ and add the appropriate template tags. This is not fool proof as not all template structures are created equal but it will work a majority of the time.

Search and Replace to change paths to WordPress theme paths

Adding The WordPress Loop

The WordPress loop is what handles all of your websites content. Its main components are:

• A header
• A permalink
• Some Content

First you will need to identify where your content starts/repeats (if it repeats). The easiest way to do this is to look for your content’s header and begin The Loop there. The Loop will usually end immediately after your content unless you are displaying extra information below your entries. You will also need to identify where your content begins and ends. Scroll to the end of this section to view some example code.

The Loop Code – (video)

Beginning:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

End:

<?php endwhile; endif; ?>

Template Tags Within The Loop – (video)

The Title:

<?php the_title(); ?>

The Permalink

<?php the_permalink() ?>

The Content

<?php the_content(‘<p>Read more</p>’); ?>

Example Code

So this becomes this.

Navigation – (video)

Most themes will have the navigation within an unordered list. This makes things easy for you. All you need to do is replace the list elements (everything between the <ul></ul> tags) with the following:

<?PHP wp_list_pages(‘title_li=&depth=1&sort_column=menu_order&exclude=’); ?>

This is the most basic of menus and wont display child pages. You can exclude pages by simply adding the page ids separated by comas after “exclude=”. Learn more about wp_list_pages().

Upload and Activate Your Theme

Now all you have to do is upload your theme folder which should now consist of:

• An index.php file with custom code
• A CSS file with header information about the theme
• An images folder with all of your images

If all goes accordingly you should have a functional WordPress theme that allows you to add new pages and posts as well as use most popular WordPress plugins. It is important to note that you will not be able to add widgets to your sidebar and people will not be able to comment on posts. There may also be some other limitations due to the themes simplicity.

Feel free to contact me if you would like to learn how to bring your theme to the next level with a sidebar, comments and other interactive elements.

More Resources

• Theme Development
• Stepping Into Templates
• WordPress Theme generator

To do this, I would need to:

• Suppress all video posts from being displayed with other posts
• Create an archive of all video posts
• Resize and place my most recent video in the sidebar

The first step was pretty easy. I just created a new category called “Video Post” and assigned it to all of my video posts. This would become a fairly intuitive list of videos people could access at their will.

Next I wanted to remove all video posts from being displayed among other posts on the home page. However, I still wanted my videos to be displayed in RSS feeds as well as archives and search pages. To do this, I just modified the default WordPress query used to pull the most recent posts by placing the following code before “The Loop”.

Be sure to change ‘-66′ to the id of whatever category you are trying to hide. How do I find the category IDs?

Also, if you are not sure where the WordPress Loop begins, it is usually located inside of index.php in your theme folder and starts with:

The last step is to display my most recent video in the sidebar. To do this I decided my best course of action was to save the embed code of my videos into a custom field as well as within the content of the post. This would allow me to easily pull the embed code and I would still be able to add text along with my video within the content.

In the example below I used the custom field ‘embed’ in my posts. Just paste this code in your sidebar where you would like your video to be displayed.

You will notice I also included a link to my last video however you can remove this or replace it with a link to your video archive. This code should work with most video embed codes. Be sure to change the width and height so everything fits nicely into your sidebar.

And that’s it. Now all you need to do when adding a new video post is:

1. Assign the post to your video category
2. Paste your embed code into the content and your ‘embed’ custom field
3. And Publish Your Post!

• SEO
• Awesome Layout
• It’s constantly being optimized

I guess what originally hooked me was the fact that most of the blogs I was reading by professionals within my industry were already on the Thesis theme. You’ve got Chris Brogan (who wrote about it here), Darren Rowse (who wrote about it here), Brian Clark (who wrote about i here), Matt Cutts and more.

So now a little about what makes it so great.

Matt Cutts recently spoke at WordCamp San Francisco 2009 where he discussed WordPress’s ability to satisfy 90% of your websites SEO. WordPress itself takes care of the obvious things like pretty URLs, syndication, interlinking pages, hiding duplicate content, etc. However, one thing WordPress does not control is the layout of the theme you are using. This is where Thesis comes in and satisfies several immediate needs:

• Cleanly laid out HTML for easy indexing by search engines
• Extra fields that allow editing of header meta on a page to page basis
• Clean, easy to read typography

But if everyone had the same theme, wouldn’t that get kind of dull?

Sure, if everyone was using the same settings. Thesis comes with two new settings pages under the appearance tab of your admin panel. You can move sidebars around, change major content area, and control all your fonts across the entire site.

Now while every other theme out there may eventually become outdated, I know I’m safe with Thesis because they are consistently releasing new versions. Their unique method for customizing the theme allows for easy upgrades and a lot more control. They have even added several new wordpress hooks that developers have already begun integrating into their plugins for easy one-step setup.

But I like it for the cutting edge look and feel

This was probably the culprit for the themes instant appeal in my eyes. Out of the box, the home page of the theme allows you to display excerpts in a slick boxlike fashion. You also get a dynamic content area in your sidebar that you can change on a post to post basis, great for promoting services relevant to the content your readers are viewing. Finally, they’ve added options to your posts and pages that allow you to display images in your posts that are automatically resized for the excerpts on the home page.

I’ve never promoted a product on my blog because I feel money can dilute an honest review by making it slightly more biased in any one direction. However, with Thesis I will make an exception. Ever since I’ve started using it I’ve been able to focus a lot more on content creation and less about SEO and blog maintenance. I very much look forward to future releases and hope you can too.

Disclaimer: All links to Thesis from this blog are an affiliate link. If you purchase the theme through one of these links I will receive a percentage as commission. This is the first (and probably only) product I would ever endorse for money.