<?php comments_template(); ?>

That line basically calls/includes your comments.php file. Within that, the line to output all comments is something really simple like this:

<ol class="commentlist">
   <?php wp_list_comments(); ?>
</ol>

But that doesn’t leave much by way of customizing the HTML that gets output, does it? Fortunately it’s fairly easy to specify your own formatting in a non-destructive non-core-altering way. Although personally, I’m having one little issue with it. Let’s take a look.

Why would you need this?

This is what you get as the defacto standard comment output:

This is from the new 2010 theme slated to come out with WordPress 3

But what if you wanted something more like this?

From a new client site I’ve been working on

The best way to get into that new skin is to get your hands on the HTML, as CSS alone isn’t quite going to get us there.

Custom output through a callback function

The trick is is that the wp_list_comments function accepts a parameter for a callback function. This function overrides what the output of each comment will be. Here is an example of that:

<ol class="commentlist">
    <?php wp_list_comments('type=comment&callback=format_comment'); ?>
</ol>

The above code will only output “comments” (and not trackbacks or pingbacks) and will call a custom function “format_comment” for formatting the comment. This function needs to be built in your functions.php file, and better be present before you call this function otherwise you’ll throw an error.

The callback function is completely in charge of the comment formatting. It could be something completely whacky like this:

<?php
    function format_comment() {  ?>
           <li>This is whack, yo.</li>
   <?php } 
?>

Which would return that ridiculous sentence for every single comment, instead of the actual comment. Of course you wouldn’t (probably) ever do that. What you probably want to do, is just adjust how the different standard comment-related data is output. To do that, first you pull in the comment globals, then you can use all the comment functions that return the stuff that you probably want:

• get_comment_link
• get_comment_author
• get_comment_date
• get_comment_time
• get_comment_text
• etc.

Here is a customized formatting function I recently used:

<?php

    function format_comment($comment, $args, $depth) {
    
       $GLOBALS['comment'] = $comment; ?>
       
        <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
                
            <div class="comment-intro">
                <em>commented on</em> 
                <a class="comment-permalink" href="<?php echo htmlspecialchars ( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s'), get_comment_date(), get_comment_time()) ?></a>
                <em>by</em> 
                <?php printf(__('%s'), get_comment_author_link()) ?>
            </div>
            
            <?php if ($comment->comment_approved == '0') : ?>
                <em><php _e('Your comment is awaiting moderation.') ?></em><br />
            <?php endif; ?>
            
            <?php comment_text(); ?>
            
            <div class="reply">
                <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
            </div>
        
<?php } ?>

When NOT to customize output

Remember that CSS is quite the handyman at whipping things into shape. Let’s say your goal was to get rid of the gravatars that the default comment formatting outputs. Well that’s as simple as:

.avatar { display: none; }

And with more powerful tools like absolute positioning, you can take the default output and really do a ton of customization. There are some times though, when you need to alter the HTML to do it right, and that’s when all this is useful.

My little problem

My custom output works really well, save for one little problem. That is nested replies. The WORK, it’s just the output is invalid, as nested lists sit directly within the list above it instead of being wrapped in a list item like they should be. See:

I’m not quite sure how to fix that, although I imagine it can be done within the custom function somehow? If anyone knows, let me know.

Update

It was my mistake, although in my defense, the answer is a little weird. What you need to is OMIT the closing </li> tag in the callback function. WordPress will add that automatically for you.

In other news, if you find your callback function breaks the “Reply” button functionality, take a look at the add_below parameter:

<?php comment_reply_link(array_merge( $args, array('reply_text' => 'Reply', 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth']))); ?> 

That parameter takes a string, like “div-comment” for example, and then the reply links on each comment will be looking for the page element of “div-comment-XXXX” to jump the comment form up to (where XXXX is the ID of the comment). So your theme better have page elements with matching ID’s, or the reply link will “fail” and reload the page. I say “fail” in quotes because replying will still work, it just doesn’t do the cool jump-up technique which is the whole point of the comment-reply.js file that most themes load on single pages.

Like the article? Get the book!

© 2010 Digging into WordPress | Permalink | 12 comments | Add to Delicious
Categorized: Theme | Tagged: comments, functions, PHP, Theme

Unfortunately this graphic wasn’t very pretty and for some reason has a giant “Page 1″ text awkward sitting over it. We have an outdated version of this in the book, and since we are updating it right now, I thought I would take the opportunity to re-create this chart.

CLICK FOR FULL SIZE VERSION

This will also be used in the book, which should be back available for order in around a week or so! Stay tuned!

Like the article? Get the book!

© 2010 Digging into WordPress | Permalink | 12 comments | Add to Delicious
Categorized: Theme | Tagged: template, Theme

I have a “blank” WordPress theme for myself, because I make a lot of WordPress themes. Starting from Kubrick, or any other pre-made theme, would be absurd. There is to much stuff there that would to be stripped out or fought against to be useful. So, I have my own. It’s been in a folder called BLANK-theme on my computer for a while, so I’m going to call it BLANK. And now I’m making it available for you. Read on to find out the scoop on it and you can decide if it would be of any use to you.

What is BLANK?

It is a WordPress theme with all the functionality of a typical WordPress theme but almost none of the styling. The idea is that when starting a new theme, it is far easier to use this as a base then a theme that is already finished and styled.

What are some of it’s “features”?

• Things are as semantically marked up as can be for a starter theme.
• It’s XHTML 1.0 STRICT and validates. Maybe it will go HTML5 soon. We’re at that point where there isn’t a whole ton of advantages to going to HTML5 yet, but there aren’t many downsides either and it’s definitely the future.
• The sidebar is widget-ready.
• Page titles are optimized for best SEO and readability/usability.
• Functions.php file does a number of things: Sets up RSS <link>’s in the head automatically, loads jQuery, removes the weird header links like rsd_link, wlw manifest, and generator info that I’ve never once needed, and registers the sidebar widget area.
• Has some starter CSS ready to go, more about that below.

Uses includes for some key things, like under-title meta data and forward/back navigation, that are very common places for redundant code in themes.

About the CSS

As you can see from the screenshot above, the CSS is pretty baron, but not entirely! Here are some things the CSS is set up for:

• Uses a basic star-selector reset.
• Includes a .group selector for the new clearfix
• Has basic toolbox and WordPress-standard CSS classes, including .screen-reader-text for hiding things.
• Standard typography-related sectors are there but generally without any attributes.
• CSS for threaded comments is in there, but light on actual styling.
• Both screen and print styles included in single stylesheet. Print styles optimized for generic nice printing.

Demo and Download

If you want to take a peak at it live, you can view it in our Theme Playground. You can also download it from there, or directly right here.

Like the article? Get the book!

© 2010 Digging into WordPress | Permalink | 52 comments | Add to Delicious
Categorized: Theme | Tagged: CSS, free, Theme

Widgetize Your WordPress Theme: Step 1

Make a fist and howl at the monitor. Then place this code into your active theme’s functions.php file:

if (function_exists('register_sidebar')) {

	register_sidebar(array(
		'name' => 'Widgetized Area',
		'id'   => 'widgetized-area',
		'description'   => 'This is a widgetized area.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));

}

This is all that is needed for the first step. Once this widgetizing code is placed in your functions.php file, proceed to Step 2. The remainder of this section is explanation.

This code checks to make sure that the current version of WordPress supports widgets, and then declares an array of values that will be used to create the widgetized area in your theme. Here are the different values:

• name – the name of the widgetized area as displayed in the WP Admin
• id – a unique identifier for your widgetized area
• description – description of the widgetized area
• before_widget – the markup generated before any user-added widgets
• after_widget – the markup generated after any user-added widgets
• before_title – the markup generated before the title of any user-added widgets
• after_title – the markup generated after the title of any user-added widgets

So, given these parameters, our widgetizing code would result in the following output, say, if the built-in Search widget were added to our widgetized area:

<div id="search-3" class="widget widget_search">
	<h4>Search</h4>
	<form role="search" method="get" id="searchform" action="http://localhost/283/" >
		<div>
			<label class="screen-reader-text" for="s">Search for:</label>
			<input type="text" value="" name="s" id="s" />
			<input type="submit" id="searchsubmit" value="Search" />
		</div>
	</form>
</div>

Note the markup created for the opening <div>, which gets its attribute information based on the wild-card matching specified in our widgetizing array. To see this more clearly, examine the following side-by-side comparison of the sprintf directives and the resulting (X)HTML source code:

'before_widget' => '<div id="%1$s" class="widget %2$s">',
<div id="search-3" class="widget widget_search">

Hopefully the relationship is clear. This is a powerful way to ensure that all widgets have a similar class names and unique IDs, which are important for easy CSS styles.

Let’s continue with Step 2..

Widgetize Your WordPress Theme: Step 2

Finally, add the following code to the location in your theme’s template file(s) where you would like the widgetized area to appear:

<div id="widgetized-area">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('widgetized-area')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Area</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

With both steps complete, your theme should now feature a widgetized area in the location of your choosing. Nothing else needs to be done at this point. If you get it, then get to it and continue developing your theme. For more information and some juicy tips and tricks, continue reading.

Let’s examine the code used in this second step. Everything located between the if/endif statements will be output to the browser when no widgets have been activated. This is a good place to inform the user that the area is widgetized and may be customized via the Widgets area in the WordPress Admin. I also include a “pre-widget” class to help style the pre-widget area. With multiple widgetized areas on a page, having a class name to hang styles on is super nice.

Also, note that we are using the id specified in the widgetizing array (refer to Step 1) as the parameter value for the specific dynamic_sidebar() check in the third line.

Multiple widgetized areas

So we now have a nice, widgetized sidebar. But why stop there? Implementing additional widgetized areas is as simple as replicating the code in Step 1 and Step 2. For example, let’s say we wanted to widgetize the header, sidebar, and footer areas of our theme. We would be put this in our functions.php file:

if (function_exists('register_sidebar')) {

	register_sidebar(array(
		'name' => 'Header',
		'id'   => 'header',
		'description'   => 'This is the widgetized header.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Sidebar',
		'id'   => 'sidebar',
		'description'   => 'This is the widgetized sidebar.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Footer',
		'id'   => 'footer',
		'description'   => 'This is the widgetized footer.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));

}

..and then we would place the following code chunks into their respective locations within our theme template files:

<div id="widgetized-header">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Header</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>
<div id="widgetized-sidebar">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Sidebar</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>
<div id="widgetized-footer">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Footer</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

That’s all there is to it. Of course, you’ll probably want to tweak the details to suit your specific needs, but these two steps are all you need to widgetize your WordPress theme. Now let’s wrap things up with some juicy widgetizing tricks..

Some Juicy Widgetizing Tricks

Here are some sweet little tips for widgetizing your theme:

Streamline & organize custom widgets

The first thing that I do after widgetizing a new theme is to include a separate “widgets.php” that contains all of the custom widgets. A simple line of code is all that is required to acheive this functionality:

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.'/widgets.php');

Place that code into your functions.php file and place all of your widgets into a file called widgets.php. Once in place, this method will ensure that your widgets are loaded and available for all supportive versions of WordPress. This is a great way to keep your theme files nice and organized.

Replace WordPress’ default widgets

Many of the default WordPress widgets leave something to be desired. Fortunately, it’s super-easy to override any of the default widgets with your own creations. For example, here is one way to replace the default Search Widget with your own version:

<?php function custom_search_widget() { ?>

<form action="http://localhost/283/index.php" method="get">
	<div>
		<label for="s">Site Search</label>
		<input id="s" name="s" alt="Search" type="text" />
	</div>
</form>

<?php } if (function_exists('register_sidebar_widget'))

register_sidebar_widget(__('Search'), 'custom_search_widget'); ?>

Hide unused widget areas

An empty widgetized area of your theme can look strange, especially when CSS styles are applied to the container element. To prevent this from happening, we can wrap each of our widgetized areas with the following code:

<?php if (function_exists('is_sidebar_active') && is_sidebar_active('sidebar')) { ?>

<!-- code from Step 2 or whatever you want -->

<?php } ?>

With this conditional code, widgetized areas will only be displayed if they contain at least one active widget. Nice :) Also note that this conditional technique works for displaying things other than widgets.

More..?

Hopefully this easy two-step widgetizing guide will be useful for you during your next round of theme development. As always, if you know of any other sweet widgetizing tricks, please share them in the comments!

Like the article? Get the book!

© 2010 Digging into WordPress | Permalink | 19 comments | Add to Delicious
Categorized: PHP, Theme | Tagged: PHP, Theme, widgets

Our personal collection of useful ways to customize and format the WordPress more tag…

Everyone who has been using WordPress for any length of time should be familiar with the <!--more--> tag. When you are writing a post, inserting the <!--more--> tag within the post text will create an excerpt out of any text/markup that precedes it. The post will then show the default “more…” link that readers may click to view the entire post. When the more tag is used, the post’s excerpt will be displayed on all non-single views, such as category, tag, and archive views; the entire post content will only be displayed when the single-post view is displayed. Let’s look at a quick example..

A quick example of how to use the more tag

If you have the following post text:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. 
Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

<!-more->

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer 
ligula vulputate sem tristique cursus. Nam nulla quam, gravida non dolor, 
commodo a semper suscipit, sodales sit amet, nisi adipiscing.

..your post will show this on all non-single post views:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

more…

..and this on all single-post views:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer
ligula vulputate sem tristique cursus. Nam nulla quam, gravida non dolor,
commodo a semper suscipit, sodales sit amet, nisi adipiscing.

..which basically shows the entire post without the more link.

Why do we use the more tag?

Well mostly because excerpts are cool, and you can display many of them on your home page to give visitors a good overview of your content without making them scroll forever to do so. If one of your excerpts catches the visitor’s eye, they will most likely want to read the entire post, and can do so by clicking on the link created by the more tag. To help encourage this behavior, there are several ways to customize the more link text, depending on your specific design goals. Let’s take a look..

Customize the more link text on a post-by-post basis

There are a couple of good ways to customize the output format of your more link text. By far, the easiest way is to simply include your custom text right there in the more tag within your post text. For example, if you wanted to change your more text from the default to “Keep reading this post”, you would replace the usual <!--more--> tag with this:

<!--more Keep reading this post-->

This way, WordPress makes it easy to customize any post’s more link with unique text. This is one of those sweet WordPress secrets that not many people know about, as evidenced by the popular alternative method for customizing per-post more text:

<?php $custom_more = get_post_meta($post->ID, "custom_more_text", true);
if(!$custom_more) { $custom_more = "Keep reading this post &raquo;"; }
the_content($custom_more); ?>

This code looks for a custom field named “custom_more_text” and displays its value as the post’s custom more text. But again, this is complete overkill thanks to the previous method.

Customize the more link text on a sitewide basis

Instead of customizing individual more text, we can also customize it for all posts on a sitewide basis. The first and easiest way to change the default more link text is to simply add your custom text to the_content() template tag:

<?php the_content('Keep reading this post'); ?>

You can even add markup to help format and style the output according to your needs:

<?php the_content("<span class="custom-more">Keep reading this post</span>"); ?>

I think most WordPress peeps are familiar with this method and use it frequently. But there is also a newer method for accomplishing the same thing from the functions.php file. As of WordPress 2.8, we now may filter sitewide more links using the new filter hook, the_content_more_link:

function my_more_link($more_link, $more_link_text) {
	return str_replace($more_link_text, 'Keep reading this post', $more_link);
}
add_filter('the_content_more_link', 'my_more_link', 10, 2);

That goes into your theme’s functions.php file. Simply edit the “Keep reading this post” string to whatever you would like to use for your custom more text. This is a good way to change your theme’s more text without modifying any theme template files — perfect for customization via child themes! Check out Justin Tadlock’s article for more information.

Automatically display the post title in more links

Another cool more-tag trick is to include the post title in the more link text. For example, we might want to setup something like this:

Lorem ipsum..

Continue reading “Lorem Ipsum Strikes Back”

Including the post title into your more links is a great way to personalize each excerpt with a little “more” (haha). Anyway, here is how the Codex suggests doing this:

<?php the_content("...continue reading the story called " . get_the_title('', '', false)); ?>

That’ll work, but we can clean it up a little like so:

<?php the_content(the_title('Continue reading &ldquo;','&rdquo;',false)); ?>

That’s a tight little snippet that will generate custom more links that include the title of the associated post. Nice.

Stop more link from jumping to middle of page

By default, clicking on the more link will take the reader to the single-post view at the location where the more tag is specified in the source code. Thus, if you are using default more-tag functionality, your visitors are being thrown halfway-down your post after clicking on the more link. At one time, this seemed like a good idea, but the convention is now to simply open the post-view without jumping to any particular point in the page.

All of that to say this: if you want the more link to open the post-view at the top of the page, slap this little gem into your active theme’s functions.php file:

function remove_more_jump_link($link) { 
	$offset = strpos($link, '#more-');
	if ($offset) {
		$end = strpos($link, '"',$offset);
	}
	if ($end) {
		$link = substr_replace($link, '', $offset, $end-$offset);
	}
	return $link;
}
add_filter('the_content_more_link', 'remove_more_jump_link');

This will kill the more “jump” and keep visitors from being thrown around the page unexpectedly. Note that this function is only for WordPress version 2.8 and better. For older versions, you’re gonna need to hack the core. See the Codex for more information.

Target custom pages with the more tag

The typical use of the more tag is such that its link opens the single-view of the associated post. This may be changed, however, should you ever need to target a different web page. To understand this a bit better, consider the parameters available to the_content() template tag:

<?php the_content($more_link_text, $strip_teaser, $more_file); ?>

Here, the $more_link_text parameter defines the text that will be used for the more link. The $strip_teaser parameter defines a boolean value determining whether or not to display the more link. The third parameter is the one we’re interested in here. The $more_file parameter specifies the URL that the more link should reference. By default, this URL points to the associated single-view post, but we could just as easily customize this like so:

<?php the_content('Order Now!', FALSE, 'http://amazing-product.com/order-page.html'); ?>

Or whatever. Obviously, the uses for this are limited, but it’s there if you ever need it.

Styling the more link

The easiest way to style the more tag is to take advantage of the built-in class attribute, more-link. By default, this class is automatically included on every WordPress more link in the entire world. Thus, you can apply styles directly, for example:

.more-link {
	border: thin solid black;
	letter-spacing: 1px;
	background: yellow;
	font-size: 24px;
	color: red;
	}

If you need additional control, you may also incorporate custom markup to your more link via the_content() template tag:

<?php the_content("<span class="custom-more">Keep reading <em>this</em> post</span>"); ?>

Which would output markup such that the following CSS could be applied:

.custom-more {
	font-weight: bolder;
	}
	.custom-more em {
		font-weight: normal;
		font-style: italic;
		}

Obviously, this is just a simple example to help illustrate the method. Just about anything is possible!

Adding an image to your more link

Last but not least, let’s wrap up the article with a couple of ways to add an image to your more link. The first way to do it is to simply include the image element directly in the_content() template tag:

<?php the_content('<img src="http://domain.tld/read-more.png" alt="Arrow" title="Read more" />'); ?>

This will spit out an image for your more tag instead of text. You could also add in some text, but if you don’t be sure to include the alt and title attributes for the <img> element. Either way, you can also style your “Read more” image using some CSS, or even bypass the <img> element completely and add an image using a few lines of CSS:

.more-link img {
	background:url(http://domain.tld/read-more.png) no-repeat left center;
	padding: 10px;
	height: 100px;
	width: 300px;
	}

Again, just an example demonstrating how it works. The possibilities here are virtually infinite.

“I give myself a B+”

It would have been an “A”, but I just know there are more cool things you can do with the WordPress more tag. This article shares all of the cool tricks that we know, but there’s just got to be more sweet tips! Hopefully you know of some more more tricks to share with the WordPress community ;) – Chime in!

Like the article? Get the book!

© 2010 Digging into WordPress | Permalink | 24 comments | Add to Delicious
Categorized: Theme | Tagged: more-tag, tips, tricks

• All visitors will see the current theme
• Only the designer will see the new theme
• All site plugins will work with the new theme
• Smooth transition between old and new theme at launch

These are the main concerns, but there are a few other details that need addressed to ensure smooth theme development on a live site. Let’s take a look at how to achieve these goals and effectively develop themes behind the scenes..

You need a plugin

The easiest way to develop a new theme behind the scenes is to install a good theme-switcher plugin. There are plenty available:

• Theme Switcher
• Theme Switcher Reloaded
• Alternative Theme Switcher
• Theme Preview
• Theme Test Drive
• NK Theme Switch

Any of these plugins will work fine for the purposes of working with multiple themes on your site. If you also plan on enabling your visitors to switch themes, I would have to recommend the newer NK Theme Switch plugin. NK Theme Switch does everything the other plugins can do, but with the added bonus that it redirects users back to the page from which they came after switching themes. The other two plugins switch themes, but the user is always redirected back to the home page after the theme switch.

Note that, for the different theme-switcher plugins, the URLs used when switching themes include different query-string parameters that are similar but not interchangeable. Once you implement a theme switcher, replacing it with a different plugin is going to be difficult.

In any case, once you have your theme-switcher plugin of choice activated, you’re going to need to know how to actually switch the themes..

Switching themes

Different plugins involve different methods of switching to a different theme. If you are using NK Theme Switch, you can select and activate your alternate (development) theme from within the WordPress Admin. This is the easiest way to do it. If you are using one of the other theme-switching plugins, activating the alternate theme for your browser is as easy as entering a specific URL into the address bar. These theme-switching URLs look similar for either of the first two plugins:

http://domain.tld/index.php?wptheme=ThemeName

For example, here is the URL used to switch to one of my favorite themes at Perishable Press:

http://perishablepress.com/press/index.php?wptheme=Perishable

The syntax here is straightforward — the only thing that needs to be changed is the theme name, which in this case is “Perishable”. When developing a new theme for Perishable Press, I simply jot down the theme-switch URL for both the new theme and the active default theme. This makes jumping back and forth very easy. Of course, the general format of these URLs will vary depending on the particular theme-switching plugin that you use.

Another option for switching between current and alternate themes is to actually include the theme-switching links and/or dropdown menu right there on the theme pages themselves. For example, including the theme-switch dropdown menu in the footer of all your themes is a great way to speed up and simplify the development process. But be advised, unless you explicitly exclude your new theme from the theme-switch menu, it will be available for all of your visitors to see and activate. The other method of just using the URL directly is a good way to ensure privacy.

Now that you are setup and easily switching between themes, there are a few other points to consider..

Your new theme is just another theme

This may sound strange, but there is nothing special about your new theme — it’s treated by WordPress as any other theme in your “themes” directory. All of the requirements of the default theme apply:

• Your new theme needs a properly configured style.css file
• Your new theme needs a working index.php file

Assuming your new theme meets these basic requirements, WordPress will recognize your theme as such and display it when activated (either through the Admin or via theme-switch plugin). Incidentally, the name of your theme is specified via the style.css file. The “Theme Name” that is listed here will be the same one used in your theme-switching URLs.

Once you get the basics of your new theme established, use your theme-switching plugin to activate it locally in your browser. Form there, you can rock the design however you want, exactly as you would do when starting from a fresh installation of WordPress. While you are working on your new theme, your visitors will still be seeing your default active theme, which is whatever you specify in the WordPress Admin. This is why the theme-switch development method works so well.

Pages, plugins, and custom functions

Here are a few more little things that will help you when developing your themes behind the scenes..

Plugins affect all themes

Even when your theme is not set as the current default, it will still be affected by all of the plugins installed on your site. This is one of the benefits of using plugins over custom functions..

Custom functions only affect the theme being used

In contrast to plugins, custom functions (i.e., functions placed in your theme’s functions.php file) only affect the current theme being viewed. If you seem to missing some functionality in your “behind-the-scenes” theme, make sure that you have properly transferred any required custom functions.

Page templates will confuse you

This happens to everyone: you are working behind the scenes on a new theme and you can’t seem to get a custom page template to appear in the WordPress Admin. This is because the page editor only shows the templates available to the current default active theme (i.e., the one that everyone sees). To work around this, you can either upload a copy of the custom page template to the active theme, or temporarily switch the default active theme to your behind-the-scenes theme. Personally, I use the former method and just delete the page template if it’s not needed in the default theme.

And last but not least..

Prepare for launch!

Once you have your new theme pimped out and ready to go, simply change your default active theme in the WordPress Admin to launch it for the world see. That’s all there is to it! :)

Like the article? Get the book!

© 2009 Digging into WordPress | Permalink | 27 comments | Add to Delicious
Categorized: Design, Theme | Tagged: plugin, theme-switch, tips

Here are the most important ones, when it comes to commenting, are these:

• $comment_author
• $comment_author_email
• $comment_author_url

Which you can safely output anywhere in the comments.php file like so:

<?php echo esc_attr($comment_author); ?>
<?php echo esc_attr($comment_author_email); ?>
<?php echo esc_attr($comment_author_url); ?>

In order to pre-fill the comment form with this information, the inputs for your comment form could be marked up like so:

<div>
  <label for="author">Name*</label>
  <input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" tabindex="1" />			
</div>	

<div>
  <label for="email">Email*</label>
  <input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" tabindex="2" />
</div>

<div>
  <label for="url">Website</label>
  <input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" tabindex="3" />
</div>

Getting the Gravatar

Gravatars are those little pictures that show up next to comments… “Globally Recognized Avatars”. Anybody can have one, get one here. What is cool about Gravatars is you have your own account that is associated with your email, so anywhere you comment that you use that email that supports Gravatars, that image will show up, and you can “globally” change that image at any time.

It is almost trivially easy to grab the URL source of someone’s Gravatar. The direct link to the image is:

http://www.gravatar.com/avatar/MD5-HASH-OF-EMAIL

So to spit out an <img> in your comments.php file, use a little PHP:

<?php if ($comment_author_email != "") { 

    $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($comment_author_email) . '?s=32';
    echo '<img src="' . $gravatar_link . '" alt="" />';

} ?>

On CSS-Tricks, I use all of this to prefill previous commenter information, including a small Gravatar:

That’s all there is to it! I think the comment form in every single WordPress theme ever written should probably use at least the pre-fill stuff. The “default” and “classic” themes that come with WordPress have this, so it’s pretty standard, but I do see plenty of themes that don’t.

Like the article? Get the book!

© 2009 Digging into WordPress | Permalink | 9 comments | Add to Delicious
Categorized: Theme | Tagged: comments, PHP, Theme

1. Detect for mobiles

You could do it by measuring screen size with JavaScript, but that’s probably not the most solid technique. It can also be done server side with PHP, check out this project for doing so. Using that code, you could use something like this at the top of your header.php file:

include('mobile_device_detect.php');
$mobile = mobile_device_detect();

if ($mobile==true) {
  // This is a mobile device
} else {
 // This is NOT a mobile device, it's a full-featured browser
}

2. Install the Theme Switch plugin

It is available here. This is a sweet plugin for a variety of reasons. I like using it for developing themes right on live sites. We’ll use it in a different application here though. What the plugin does is create special URLs for your site that activate different themes.

http://your-website.com/?theme=Your_Mobile_Theme

3. Combine

Now you can test for mobiles, then redirect to a special theme-switching URL to activate your mobile theme:

include('mobile_device_detect.php');
$mobile = mobile_device_detect();

if ($mobile==true) {
  header( 'Location: http://your-website.com/?theme=Your_Mobile_Theme' ) ;
} else {
 // Do nothing, regular browser.
}

Like the article? Get the book!

© 2009 Digging into WordPress | Permalink | 23 comments | Add to Delicious
Categorized: Theme | Tagged: mobile, PHP, Theme

• Displaying your latest tweets, flickrs, or delicious saves
• Displaying content from your other sites in your sidebar or footer
• Providing a public link feed to which your readers may contribute or subscribe

Basically, anything that is available in any sort of feed format — RSS, XML, Atom, etc. — may be easily imported and displayed on your WordPress-powered site.

Prior to version 2.8, WordPress used Magpie and Snoopy functionality to make it easy to parse and display feeds. As described in my previous article on importing and displaying feeds in WordPress, including a feed using the built-in Magpie class is straightforward:

<?php include_once(ABSPATH.WPINC.'/rss.php');
wp_rss('http://domain.tld/your-feed/', 7); ?>

This code example will import and display the feed of your choice in WordPress versions 2.7 and older. For versions 2.8 and 2.9 (and possibly beyond), WordPress has changed from Magpie and Snoopy to SimplePie and FeedCache for retrieval, parsing and automatic caching of feeds. This is a good thing, even though SimplePie ceased development shortly after it was adopted by WordPress. Hopefully someone will pick it up and run with it.

For now, we just want to use WordPress to display external feeds on our sites. To do this, WordPress gives us the new fetch_feed() function, which retrieves, parses, and caches any RSS feed, even those generated by your own installation of WordPress.

To use this new function, we begin with a compatibility check, just in case we’re running an older version of WordPress. If the function exists, we proceed by including the required file, feed.php. Then, once we have the required file, we specify the feed URI as the (only) parameter of the fetch_feed function:

<?php if(function_exists('fetch_feed')) {

	include_once(ABSPATH . WPINC . '/feed.php');  // include the required file
	$feed = fetch_feed('http://digwp.com/feed/'); // specify the source feed

} ?>

At this point, all of the XML data from our source feed is returned as a standard SimplePie object that we capture as a variable called “$feed”. With the feed data cached and ready, we may use a variety of SimplePie methods to manipulate and display the data according to our needs.

The first thing that we may want to do is specify the number of items to display:

$limit = $feed->get_item_quantity(7); // specify number of items

Here we are showing seven items, but you can choose any number you want. Next, we want to create an array containing all of our feed items so that we can then loop through it and display stuff like the title, the date, the post contents, and so on. Here is how we create our array of seven items:

$items = $feed->get_items(0, $limit); // create an array of items

Note that the first feed item is numbered zero (“0”) and the last feed item is specified by the previously declared $limit variable, so we know exactly how many items to include in the array.

At this point, we are ready to loop through the array and display data from each of our feed items. Before we do, however, we want to ensure that the feed isn’t empty. Once this is verified, we proceed to loop through each item and display its title, permalink URL, and post date:

<ul>

   <?php if ($limit == 0) { ?>

   <li>The feed is either empty or unavailable.</li>

   <?php } else { foreach ($items as $item) : ?>

   <li>
      <a href="<?php echo $item->get_permalink(); ?>" title="<?php echo $item->get_date('j F Y @ g:i a'); ?>">
         <?php echo $item->get_title(); ?>
      </a>
   </li>

   <?php endforeach; } ?>

</ul>

Not bad, but what about post content? In addition to the post title, date, and permalink, it’s useful to be able to display an actual snippet from each feed item. No problem, just add the following method to your feed loop:

<?php echo $item->get_description(); ?>

You can also display the title of the feed itself with this snippet:

<?php echo $feed->get_title(); ?>

Of course, there are many more types of data that may be extracted and displayed from your feed items. For more information, check the references at the end of this article.

For now, allow me to wrap things up by putting everything together into a nice, plug-&-play, copy-&-paste code snippet that is perfect for importing and displaying feed items on your WordPress-powered site:

<?php if(function_exists('fetch_feed')) {

	include_once(ABSPATH . WPINC . '/feed.php');               // include the required file
	$feed = fetch_feed('http://feeds.feedburner.com/jquery/'); // specify the source feed

	$limit = $feed->get_item_quantity(7); // specify number of items
	$items = $feed->get_items(0, $limit); // create an array of items

}
if ($limit == 0) echo '<div>The feed is either empty or unavailable.</div>';
else foreach ($items as $item) : ?>

<div>
	<a href="<?php echo $item->get_permalink(); ?>" 
	  title="<?php echo $item->get_date('j F Y @ g:i a'); ?>">
		<?php echo $item->get_title(); ?>
	</a>
</div>
<div>
	<?php echo substr($item->get_description(), 0, 200); ?> 
	<span>[...]</span>
</div>

<?php endforeach; ?>

This is the code that I use on my new site, jQuery Mix. It displays the following information:

• Seven items from the jQuery.com feed
• Permalink, date, and title for each item
• First 200 characters of each item’s post content

This code snippet seems to work great and should be easy to customize to fit your specific needs. Check the docs for more information!

References

• SimplePie Documentation
• SimplePie Function Reference
• WP Codex Function Reference
• Import and Display RSS Feeds in WordPress

Like the article? Get the book!

© 2009 Digging into WordPress | Permalink | 14 comments | Add to Delicious
Categorized: Theme | Tagged: feeds, PHP, tricks

• Main Content Feed (posts, articles, etc.)
• Main Comments Feed (all comments left on your site)
• Comments Feed for individual posts (all comments left on a post)

This is a nice feed offering, but many people use the Subscribe to Comments plugin and find the individual-post feeds to be unnecessary. In this situation, it is easy enough to remove all comment-feed links from the theme-template files, but even after the physical links are removed, WordPress will continue to generate links in the <head> section of your pages.

This may not be a big deal, but visitors with a “feed-aware” browser such as Firefox, Opera, and Safari (I think) may be alerted to the availability of these feeds. Besides leading to potential confusion, you may not want people to actually subscribe to these feeds for whatever reason.

These individual comment-feed links are automatically created by the wp_head function when present in the <head> section of your header.php file. Fortunately, there are a couple of ways to eliminate these links from your pages. For the first technique, drop the following code into your active theme’s functions.php file:

// disable comment feeds for individual posts
function disablePostCommentsFeedLink($for_comments) {
	return;
}
add_filter('post_comments_feed_link','disablePostCommentsFeedLink');

That will stop the individual comment-feed links from appearing in your <head> section, but the actual feeds will remain available to anyone who is savvy enough to find them. I am pretty sure there is a way to stop the feeds themselves from being generated, but I can’t seem to remember it. Hopefully someone will remind me. ;)

While the previous method removes only the individual comment-feed links, there is another technique that will remove all feed links except for the main posts feed and main comments feed:

// kill all extra feed links in the head
remove_action('wp_head','feed_links_extra', 3);

As you might have guessed, this tasty little code slice goes into your functions.php file. Once there, it will eliminate all extraneous feed links (post-comments feed, archive feeds, tag feeds, category feeds, etc.), leaving links only for your site’s two main feeds. To kill those feed links as well, add this additional slice:

remove_action('wp_head','feed_links', 2);

When combined, these two remove_action directives are pretty much going to kill all feed links in your <head>. So use with caution!

Like the article? Get the book!

© 2009 Digging into WordPress | Permalink | 6 comments | Add to Delicious
Categorized: PHP, Theme | Tagged: feeds, functions, posts, tricks