Digging into WordPress » functions

Displaying Theme Data with WordPress

Jeff Starr — Wed, 14 Dec 2011 18:36:29 +0000

A cool trick you can do with WordPress is display information directly from your theme’s style.css stylesheet. I recently used this on a site where the theme’s version number is used throughout the template to keep things current and consistent.

get_theme_data()

The function that makes it possible is called get_theme_data(), and it simply returns an array of information about any of your theme files. Here is how it’s used in your theme template:

So $theme_filename is required and should be the path and filename of your theme’s style.css file. There is no default value for this, so you need to ensure a proper value.

So what information can you display with get_theme_data()? The function returns an array of values that basically comprises the different meta items in your stylesheet. Here is a list of possible return values (all strings):

Name – theme name
Title – either theme name or linked theme name
URI – theme URI
Description – wptexturized version of the theme name
AuthorURI – theme author URI
Template – theme parent template, if exists
Version – theme version number
Status – theme status (default: publish)
Tags – theme tags
Author – author name or linked author name

Note that these return values are case-sensitive and will not work if the first letter is not capitalized.

Examples

The Codex provides this example for getting and displaying the theme Name and Author:

This should get you going.. just copy/paste into your theme template and indicate the theme name in that first line of code. Displaying other bits of theme data is matter of editing/replicating those last two lines.

Once you see how it works, you can do cool stuff with it, like display your theme’s version number sort of globally throughout your site. I’m using this technique to append version parameters to my stylesheet URLs, like so:

..and the output markup looks like this (notice the appended version parameter, ?v=1.3):

Because I am using multiple stylesheets, this method really saves a LOT of time trying to keep track of everything. Here is the theme_version() function that goes in your theme’s functions.php file:

// display version number
function theme_version() {
    $theme_name = 'xycss'; // customize with your theme name
    $theme_data = get_theme_data( get_theme_root() . '/' . $theme_name . '/style.css' );
    echo '?v=' . $theme_data['Version'];
}

And with a few modifications, you can also display your theme’s information in your posts and pages via shortcode:

// version number shortcode
function theme_version_shortcode() {
    $theme_name = 'xycss'; // customize with your theme name
    $theme_data = get_theme_data( get_theme_root() . '/' . $theme_name . '/style.css' );
    return $theme_data['Version'];
}
add_shortcode('theme_version', 'theme_version_shortcode');

With that second snippet in your functions.php file, displaying your theme info directly in pages is as easy as writing this:

[theme_version]

..and the output:

1.3

It’s pretty cool stuff, and I’m sure there’s tons more you can do with it too. If you know any tricks or tips, please share in the comments, Thanks :)

HTML Formatting for Custom Menus

Jeff Starr — Mon, 28 Nov 2011 18:09:42 +0000

For some projects, it’s nice to output clean, well-formatted markup. Using theme template files enables great control over most of your (X)HTML formatting, but not so much for automated functionality involving stuff like widgets and custom menus. One of my current projects requires clean, semantic HTML markup for all web pages, but also takes advantage of WordPress’ custom-menu functionality to make things easy. In this DiW article, we’ll see how to enjoy both: WordPress custom menus and clean, well-formatted HTML markup.

Customizing HTML displayed with wp_nav_menu()

By default, WordPress custom menus are displayed in your theme template using the wp_nav_menu function, which by default outputs markup that looks like this:

Home
Demos
Downloads
Documentation

That’s a mess of class and id attributes, plus an extra

container to boot. Fortunately, the wp_nav_menu() provides some useful parameters for customizing the display of your custom navigation menus. Here is a list of the default parameters:

 ,
  'menu'            => , 
  'container'       => 'div', 
  'container_class' => 'menu-{menu slug}-container', 
  'container_id'    => ,
  'menu_class'      => 'menu', 
  'menu_id'         => ,
  'echo'            => true,
  'fallback_cb'     => 'wp_page_menu',
  'before'          => ,
  'after'           => ,
  'link_before'     => ,
  'link_after'      => ,
  'items_wrap'      => '%3$s',
  'depth'           => 0,
  'walker'          => );
?>

Of these parameters, $container lets you specify how to wrap the

'div'

'nav'

false

$container

container. The wp_nav_menu function also provides two more optional parameters for customizing menu markup:

$items_wrap – “Whatever to wrap the items with an ul, and how to wrap them with” (source: WP Codex)
$walker – “Custom walker object to use (Note: You must pass an actual object to use, not a string)” (source: WP Codex)

These sound useful, but I haven’t had much luck with either. The $items_wrap didn’t seem to do anything, but there are plenty of custom walker scripts available for further experimentation and customization. If you can get them to work properly, a custom walker provides complete control over custom-menu markup displayed with the wp_nav_menu tag. Unfortunately, I was unable to get very far with any of them, so I sought an alternate method..

An alternative approach for custom markup

After fiddling with a few of the various custom walkers, I decided to find an easier way to customize and format WordPress nav/menu markup. The walkers are fairly extensive and complex, and just seem like overkill for building a simple list of custom menu items. After some digging through the WordPress Codex, I found the perfect function for crafting squeaky-clean WordPress menus: wp_get_nav_menu_items. As the name implies, wp_get_nav_menu_items returns the items from your custom navigation menus (as created in the WP Admin → Appearance → Menus panel). Thus, you can use this function to mark up your custom menus however you want. For my particular project, the desired format looks like this:


	
		Home
		Demos
		Downloads
		Documentation

Trying to do this with the commonly used wp_nav_menu function and a custom walker is possible, but it’s much easier building the menu structure from scratch, using only what’s required to make it happen. So alternately we use wp_get_nav_menu_items and begin with the example function provided at the Codex. After wrapping it in a function and customizing the output, we have the clean_custom_menus() function, ready for copy/paste into your theme’s functions.php file:

// custom menu example @ http://digwp.com/2011/11/html-formatting-custom-menus/
function clean_custom_menus() {
	$menu_name = 'nav-primary'; // specify custom menu slug
	if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
		$menu = wp_get_nav_menu_object($locations[$menu_name]);
		$menu_items = wp_get_nav_menu_items($menu->term_id);

		$menu_list = '' ."\n";
		$menu_list .= "\t\t\t\t". '' ."\n";
		foreach ((array) $menu_items as $key => $menu_item) {
			$title = $menu_item->title;
			$url = $menu_item->url;
			$menu_list .= "\t\t\t\t\t". ''. $title .'' ."\n";
		}
		$menu_list .= "\t\t\t\t". '' ."\n";
		$menu_list .= "\t\t\t". '' ."\n";
	} else {
		// $menu_list = '';
	}
	echo $menu_list;
}

After placing in your functions.php file, you can call the function and display your custom menus anywhere in your theme by calling it directly:

Then, you can customize the clean_custom_menus() function as follows:

Line 3: specify your custom-menu slug
Lines 8 thru 15: customize markup, tabs, and line breaks as needed
Line 17: uncomment else condition and customize if needed

For lines 8-15, anything is possible – you can include whatever list items, markup, and attributes required. Additionally, you can tab and indent markup to line up with page markup using \n for a new line and \t for a tab space. The fastest, easiest way to use this function is to copy/paste into your theme and then check out your list markup. For example, if the nav list is too far to the left, add some more tabs. You can also add class and id attributes, include custom items, and even manipulate which list items are displayed ($url, $title, etc.). After a little fine-tuning, the wp_get_nav_menu_items() function enables clean, well-formatted markup for your custom menus.

Quick Summary

In this article, we explain two ways to clean up and customize WordPress’ custom-menu markup. Either of these methods will take your code from this:

Home
Demos
Downloads
Documentation

..to this:


	
		Home
		Demos
		Downloads
		Documentation

..or whatever HTML structure that’s required. You can achieve this with either of these methods:

Combine wp_nav_menu() with a custom walker class
Combine wp_get_nav_menu_items() with the clean_custom_menus() function

As usual, if you know of better ways of doing something, please share in the comments! Thanks for reading Digging into WordPress :)

Create an Articles-Only Feed

Jeff Starr — Wed, 24 Aug 2011 15:33:10 +0000

WordPress makes it easy to publish content in any number of categories, with any number of tags, and with any type of custom post format. So for example, in addition to full articles, you could also offer screencasts, links, side posts, tweets, and all sorts of other peripheral content. Complementary material may work great for visitors surfing around your site, but including all of that extra stuff in your RSS feed dilutes the potency of your main articles. The idea here is that your visitors will subscribe to the more focused content.

In this post, we create a custom, “articles-only” feed for visitors who want to subscribe to the main content only, without all the side stuff. The technique is actually pretty flexible, and works great to create just about any type of custom WordPress feed content. It’s pretty easy to do, requiring a whopping two steps to make it happen..

Step 1: Create the custom page template

Go to your theme directory and create a new PHP file named article-feed.php. Then add the following code (don’t worry it’s actually not that bad):

';
?>


>

	<?php bloginfo_rss('name'); wp_title_rss(); ?> - Article Feed
	
	
	
	
	
	
	
	
	
	

	
		<?php the_title_rss(); ?>
		
		
		
		

		


		]]>


		]]>
	post_content ) > 0 ) : ?>

		]]>
	

		]]>

This is basically just a typical WordPress feed template, but with some extra query action to make it do what we want. In the first few lines of code, we specify how many posts to display, which categories to include, and whether to display full posts or excerpts:

$numposts = 10; // number of posts in feed
$posts = query_posts('showposts='.$numposts.'&cat=3');
$more = 1;

Using this default code, the custom feed will show 10 posts from category 3. And with $more set to 1, the full article will be included in the feed. This is where you customize your new feed to include whatever you want. So for example, if we post articles in three different categories, say with IDs of 1, 2, and 3, we would modify our code to look like this:

$numposts = 10; // number of posts in feed
$posts = query_posts('showposts='.$numposts.'&cat=1,2,3');
$more = 1;

The query_posts function is quite flexible and provides all of the parameters needed to set up just about any customized feed content. You can exclude/include categories, display specific types of posts, change the number of posts displayed, and so much more. For a full list of options, check out query_posts at the WordPress Codex.

Step 2: Create the custom Page in the WP Admin

Once you have the custom Page Template uploaded to your server, log into the WordPress Admin and visit the “Add New Page” screen (Pages > Add New). Create a new page named “Articles-Only Feed” (or whatever), and select the newly added “articles” page template from the drop-down menu:

While you’re there in the Admin creating this new custom-feed page, take a moment to be mindful of the feed URL and title, which may be set to whatever works best:

Once everything is ready, finish it up by publishing the page to your site. Then check that your new feed is working by visiting the URL of the new page you just created in the WP Admin. Here at DigWP.com, our articles-only feed is available at http://digwp.com/articles/.

Wrap-up + additional resources

In addition to the easy-breezy two-step custom-feed tutorial in this post, here are some additional resources that are sort of related to this general topic:

Tumblr Links with Post Formats

Jeff Starr — Tue, 05 Apr 2011 17:49:20 +0000

With WordPress 3.1’s new Post Format functionality, it’s easier than ever to create your own Tumblr-style Link posts. We do this right here at DigWP.com using our own hand-rolled method. Scroll through a page or two of the site’s most recent posts, and you’ll see that Link posts are formatted and styled differently than regular posts (see screenshot below). In this tutorial, you’ll learn how to use WordPress’ new Post Formats to setup your own Tumblr-style Links in 3 easy steps.

Link posts are meant for quick links to external resources. Ideally, they’re styled for easy recognition without breaking the flow of post content. Link posts look like link posts, Asides look like asides, Galleries look like galleries, and so on. Here’s a chart showing the differences between regular posts and Link posts:

Notice the key difference between the two types of posts: regular post titles link to the single-view of the post, but Link post titles link to the URL of an external resource (i.e., whatever awesome thing you’re sharing with your visitors). This makes it super-easy to share links via true “Tumblr-style” Link posts. And with WordPress 3.1’s new Post Formats functionality, it’s easier than ever to do.

Easy, 3-Step Tutorial

Here’s an overview of the tutorial:

Enable Post Formats via functions.php
Include the conditional template tags in your theme files
Style with some CSS via style.css (optional)
Usage and notes

Even if you don’t implement this technique, the tutorial provides a great example of how Post Formats can be used to add variety and depth to any WordPress-powered site.

Step 1: Enable Post Formats

First, make sure you have the latest version of WordPress (3.1 or better), and then enable Post Formats by adding this snippet to your theme’s functions.php file:

// Enable Post Formats for WP 3.1+
add_theme_support('post-formats',array('aside','chat','gallery','image','link','quote','status','video','audio'));

With that in place, all nine (+1 default) Post Formats will be enabled on your site. Next time you write or edit a post, you should see a Post Formats panel with options for each of these different formats. If you know you won’t be needing some of them, feel free to edit the parameter list in the code snippet. Otherwise, it’s totally fine to leave them all enabled – it doesn’t hurt anything – it’s just a matter of preference.

Step 2: Customize your theme files

Next, in your theme’s template file(s), replace the markup/tags used to generate your post titles (located in the loop) with the following conditional code:

ID, 'LinkFormatURL', true)) : ?>

The first line tests each post using has_post_format and get_post_meta. IF the post is a Link post (has “link” post format) AND has an alternate URL (via “LinkFormatURL” custom field), the post title will be Tumblr-style as specified in the second line of code. If both of those conditions fail, the post title will be the regular/default, as specified in the fourth line of code. You may use any PHP/markup needed to customize your Link posts to suit your design.

Update: Matt Wiebe makes this step even easier. Instead of messing with your theme files, just add this snippet to your theme’s functions.php:

// filter post title for tumblr links
function sd_link_filter($link, $post) {
     if (has_post_format('link', $post) && get_post_meta($post->ID, 'LinkFormatURL', true)) {
          $link = get_post_meta($post->ID, 'LinkFormatURL', true);
     }
     return $link;
}
add_filter('post_link', 'sd_link_filter', 10, 2);

This script filters the post_link and returns the correct URL based on the same conditions as before. Just plug-n-play – no other theme modifications required. Thanks to Matt Wiebe for sharing this more elegant method.

Step 3: Style with CSS

Lastly and optionally, you are encouraged to customize the appearance of your custom Post Formats. Referring back to the opening screenshot, notice how Link posts stand out as distinct and easy to recognize as such. To style your Link posts with CSS, make sure your theme includes the post_class() tag in the outer

(or whatever) for each post. The post_class() function will then output the Post-Format name as a class attribute for each post. This provides a nice hook for hanging your custom CSS. Here is a simple example using our code from Step 2:

.format-standard { width: 100%; }
.format-link     { width: 75%; }

.format-standard h2 { font-size: 24px; }
.format-link h2     { font-size: 16px; }

.format-standard a { color: #000; }
.format-link a     { color: #777; }

Using the .format-{whatever} class attribute, it’s easy to style each of your Post Formats with a distinct appearance that’s easy to recognize.

Usage and Notes

Once you get everything setup, posting Links is as easy as 1-2-3..

Write your Link post
Choose the “Link” format type from the Format radio-button menu (located under the Publish panel)
Add the Link URL (external resource) to a custom field named “LinkFormatURL” (see screenshot below)

And that’s all there is to it! After posting a new Link, it will be displayed using the format and styles that you’ve applied. A few notes:

CSS hooks for post-formats are available via post_class()
When customizing your theme as per Step 2, don’t forget about archive.php, category.php, and any other template files that use the loop
This tutorial sets up Tumblr-style Links for your blog only, but you can check this post to setup the Tumblr Links for feeds as well

If you have any questions about setting this up on your site, leave a comment and we’ll try to help. Also, see the “Possibly Related Posts” below for related content on this topic.

Show Post Thumbnails in Feeds

Jeff Starr — Tue, 08 Jun 2010 07:05:49 +0000

One of the nice things about using WordPress’ new post-thumbnails feature is that they provide tons of flexibility in terms of where and how you display your post thumbnails. By design, post thumbnails are not included within post content, so they will not be displayed in your blog posts unless you call them specifically with the proper template tag:

When included within the loop, the_post_thumbnail() will output the markup for the post’s thumbnail, linked to a full-size or pre-sized version of the image. Of course, there are a few more awesome things that you can do with the_post_thumbnail. Now that we’ve seen how to include thumbnails in post content, let’s do it for feed content..

Display Post Thumbnails in Feed Content

To include post-thumbnails in your feeds, we need to filter WordPress’ feed functionality and inject the required template tag into both feed-excerpt and full-feed content:

// show post thumbnails in feeds
function diw_post_thumbnail_feeds($content) {
	global $post;
	if(has_post_thumbnail($post->ID)) {
		$content = '' . get_the_post_thumbnail($post->ID) . '' . $content;
	}
	return $content;
}
add_filter('the_excerpt_rss', 'diw_post_thumbnail_feeds');
add_filter('the_content_feed', 'diw_post_thumbnail_feeds');

Include that code in your active theme’s functions.php file and your feeds will display the post thumbnail before each post. To display the post thumbnail after the post content, a slight adjustment is made to the fourth line of the function:

$content = $content . '

' . get_the_post_thumbnail($post->ID) . '

';

The

will prevent the post text from wrapping around the post thumbnail, but theoretically its removal would enable the post content to wrap around the image:

$content = get_the_post_thumbnail($post->ID) . $content;

As easy and flexible as it is working with the_post_thumbnail(), there may be situations where you need more control over the appearance and functionality of your posts’ attached images. Fortunately, WordPress’ custom fields and image-attachment functionality enable just about any custom configuration you can imagine.

Specify Unique CSS File Per Post

Chris Coyier — Mon, 10 May 2010 21:20:39 +0000

I’m a HUGE fan of being able to link up a CSS file on a per-page basis. I just find it extremely common that a page needs CSS styling unique to it, and I hate litering a sites main stylesheet with customizations that only one particular page needs. We’ve talked about this before, and even created a custom method for doing so, as well as mentioned the art direction plugin, which makes this easily possible.

Both of those methods are still sweet, but I find in general that I like to write my CSS in actual CSS files I keep in my theme and can edit using whatever CSS editor I like, as well as keep things clean and simple in the admin. So, I’ve altered the technique a bit.

The idea is to add a simple text input to the page editor, right underneath the content area, where you can manually specify the name of a CSS file. In the image below, you can see I’ve also added one for JavaScript.

To add this to your site, it’s just some code to add to the functions.php file. Should work for any site.

// Custom Stylesheet box in Pages/Posts
add_action('admin_menu', 'digwp_custom_css_hooks');
add_action('save_post', 'digwp_save_custom_css');
add_action('wp_head','digwp_insert_custom_css');
function digwp_custom_css_hooks() {
	add_meta_box('custom_css', 'Name of custom CSS file', 'digwp_custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Name of custom CSS file', 'digwp_custom_css_input', 'page', 'normal', 'high');
}
function digwp_custom_css_input() {
	global $post;
	echo '';
	echo '';
}
function digwp_save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function digwp_insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
		  $filename = get_post_meta(get_the_ID(), '_custom_css', true);
		  if ($filename) {
			echo "";
          }
		endwhile; endif;
		rewind_posts();
	}
}

If you are happy with just CSS only, you can stop there. If you would like the JavaScript box as well, here is that code.

// Custom JavaScript in Pages/Posts  (...lots of repeated code, could be better)
add_action('admin_menu', 'digwp_custom_js_hooks');
add_action('save_post', 'digwp_save_custom_js');
add_action('wp_head','digwp_insert_custom_js');
function digwp_custom_js_hooks() {
	add_meta_box('custom_js', 'Name of custom JavaScript file', 'digwp_custom_js_input', 'post', 'normal', 'high');
	add_meta_box('custom_js', 'Name of custom JavaScript file', 'digwp_custom_js_input', 'page', 'normal', 'high');
}
function digwp_custom_js_input() {
	global $post;
	echo '';
	echo '';
}
function digwp_save_custom_js($post_id) {
	if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_js = $_POST['custom_js'];
	update_post_meta($post_id, '_custom_js', $custom_js);
}
function digwp_insert_custom_js() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
		    $filename = get_post_meta(get_the_ID(), '_custom_js', true);
		    if ($filename) {
			 echo "";
            }
		endwhile; endif;
		rewind_posts();
	}
}

You could probably combine these together a bit better than I have done here, it’s a bit redundant.

How it Works

There are three things going on here, which tap into three existing WordPress “hooks”.

Adds text inputs to the page editing screen of the admin using the admin_menu hook and the add_meta_box function
Save the values of those text inputs when the page is saved using the save_post hook
Output or '; echo ''; } add_action('wp_footer', 'add_google_analytics');
A couple of notes here: first, obviously you want to replace the “UA-123456-1” with your actual GA code. Second, you may want to check out the three currently available Analytics options and modify the code accordingly. Currently, this function is using the newer “ga.js” tracking code, but that is easily changed to either of the other methods.

Custom excerpt length

Instead of using the default 55-word limit, this function enables you to specify any length for your excerpts.
```
// custom excerpt length
function custom_excerpt_length($length) {
	return 20;
}
add_filter('excerpt_length', 'custom_excerpt_length');
```
Just set your preferred number of words by editing the “20” to whatever you wish.

Custom excerpt “continue” string

Or whatever they call that funky bracketed ellipses thing “[...]” that is appended to your post excerpts by default. I like to remove the brackets, but with this functions.php snippet you can change it to anything:
```
// custom excerpt ellipses for 2.9+
function custom_excerpt_more($more) {
	return '...';
}
add_filter('excerpt_more', 'custom_excerpt_more');

/* custom excerpt ellipses for 2.8-
function custom_excerpt_more($excerpt) {
	return str_replace('[...]', '...', $excerpt);
}
add_filter('wp_trim_excerpt', 'custom_excerpt_more'); 
*/
```
As you can see, there are two different versions of this code, depending on your version of WordPress. We like to stay current, so we commented out the older method but left it there in case you need it. For either version of this technique, just replace the “...” with “pants on the ground” or whatever happens to suit your needs.

No “more” jumping for the “read more” link

One of the weirdest things that WordPress does is “jump” the reader to the location of the “” tag on the single-post-view when the “read more” link is clicked. It’s just awkward — if the jump was on the same page, it would make sense, but to load a new page and then take the reader halfway down without explaining anything is just wrong. In any case, here is a nice little function that will stop the jumping once and for all:
```
// no more jumping for read more link
function no_more_jumping($post) {
	return ''.'Continue Reading'.'';
}
add_filter('excerpt_more', 'no_more_jumping');
add_filter('the_content_more_link', 'remove_more_jump_link');
```
Nothing else needs to be done for this to work – just plug it in and enjoy your new “jumpless” functionality. Note that this is also a convenient place to customize the “read more” link with whatever attributes or custom text you wish.

Add a favicon to your blog

You just gotsta have a favicon for your blog, and this code makes it super easy to do. Just create your image and upload to site’s root directory. The following code in your functions.php file makes it so by adding the required line to your area:
```
// add a favicon to your 
function blog_favicon() {
	echo '';
}
add_action('wp_head', 'blog_favicon');
```
Feel free to change the directory to whatever you desire. Also make sure that the wp_head is present within your theme’s header.php file.

Add a different favicon for your blog’s Admin area

While we’re here, let’s add a unique favicon to our Admin pages, so that they are easier to recognize when bookmarked or working with tabs. Just create a favicon and upload to your theme’s /images/ directory. This code takes care of the rest:
```
// add a favicon for your admin
function admin_favicon() {
	echo '';
}
add_action('admin_head', 'admin_favicon');
```
As before, feel free to change the directory to whatever you desire. It might be best to keep your admin favicon in a separate directory than your blog favicon. Just sayin’.

Custom Admin Login logo

You know that snazzy blue WordPress logo that is branding your various login pages? Yeh, you can change that to whatever you want. Just create your custom login image, name it “custom-login-logo.png”, and upload it to your theme’s /images/ directory. This code will take care of the rest:
```
// custom admin login logo
function custom_login_logo() {
	echo '';
}
add_action('login_head', 'custom_login_logo');
```
The key here is to make sure that the path and image names match that of your setup. Also, when creating your image, you may want to keep in mind the properties of the original: 30px length, 31px height, transparent GIF format, and header background color of #464646 (for the image matte).

Disable unused widget areas

Justin Tadlock shares this handy function for removing unwanted widget areas from our theme – a must for customizing existing themes:
```
// disable all widget areas
function disable_all_widgets($sidebars_widgets) {
	//if (is_home())
		$sidebars_widgets = array(false);
	return $sidebars_widgets;
}
add_filter('sidebars_widgets', 'disable_all_widgets');
```
This code is plug-&-play – no other modifications need to be made. Note: if you only want to disable widgets on your Home page, then remove the two comment slashes (“//”) from the third line.

Kill the WordPress update nag

This is one of my favorites, but I know it’s not for everyone. In any case, you know that “Please update now..” message that appears on every page in the WordPress Admin when new versions are available? This sweet little function kills it dead (or disables it, actually):
```
// kill the admin nag
if (!current_user_can('edit_users')) {
	add_action('init', create_function('$a', "remove_action('init', 'wp_version_check');"), 2);
	add_filter('pre_option_update_core', create_function('$a', "return null;"));
}
```
Feel free to comment this one out or remove it if you rely on the Admin nag to keep you informed of changes.

Include category ID in body_class and post_class

By default, WordPress body_class and post_class do not include the ID of the category of the current post. This custom function changes all that:
```
// category id in body and post class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes [] = 'cat-' . $category->cat_ID . '-id';
		return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');
```
Even if you aren’t using it, it’s a nice function to have around, which is why it’s included here for this custom functions.php template of essential functions. Keywords in the house because we can.

Get the first category ID

Another useful function when working with different categories is the ability to get the first category ID of the current post. This function makes it happen:
```
// get the first category id
function get_first_category_ID() {
	$category = get_the_category();
	return $category[0]->cat_ID;
}
```
Strictly plug-&-play: just use in your theme template file to access the data.

Putting it all together..

As promised, here is the full-meal deal – the entire collection neatly organized into a single chunk of code:
```
';
	echo '';
}
add_action('wp_footer', 'add_google_analytics');


// custom excerpt length
function custom_excerpt_length($length) {
	return 20;
}
add_filter('excerpt_length', 'custom_excerpt_length');


// custom excerpt ellipses for 2.9+
function custom_excerpt_more($more) {
	return '...';
}
add_filter('excerpt_more', 'custom_excerpt_more');

/* custom excerpt ellipses for 2.8-
function custom_excerpt_more($excerpt) {
	return str_replace('[...]', '...', $excerpt);
}
add_filter('wp_trim_excerpt', 'custom_excerpt_more'); 
*/


// no more jumping for read more link
function no_more_jumping($post) {
	return ''.'Continue Reading'.'';
}
add_filter('excerpt_more', 'no_more_jumping');


// add a favicon to your 
function blog_favicon() {
	echo '';
}
add_action('wp_head', 'blog_favicon');


// add a favicon for your admin
function admin_favicon() {
	echo '';
}
add_action('admin_head', 'admin_favicon');


// custom admin login logo
function custom_login_logo() {
	echo '';
}
add_action('login_head', 'custom_login_logo');


// disable all widget areas
function disable_all_widgets($sidebars_widgets) {
	//if (is_home())
		$sidebars_widgets = array(false);
	return $sidebars_widgets;
}
add_filter('sidebars_widgets', 'disable_all_widgets');


// kill the admin nag
if (!current_user_can('edit_users')) {
	add_action('init', create_function('$a', "remove_action('init', 'wp_version_check');"), 2);
	add_filter('pre_option_update_core', create_function('$a', "return null;"));
}


// category id in body and post class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes [] = 'cat-' . $category->cat_ID . '-id';
		return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');


// get the first category id
function get_first_category_ID() {
	$category = get_the_category();
	return $category[0]->cat_ID;
}

?>
```
Download the custom functions.php template file

If you prefer, you can download this code in a ready-to-go functions.php file in zipped format:

Download zipped functions.php Template File

Also..

If this post is useful to DiW readers, I’ll be writing up another article (part 2) with even more useful custom functions. If that happens, the second set of functions will include some slightly more advanced techniques as opposed to these “must-have” template functions. Stay tuned! Update: Custom functions.php Part 2 is here!

© 2010 Digging into WordPress | Permalink | 80 comments | Add to del.icio.us | Post tags: functions, template, Theme

Digging into WordPress » functions

Displaying Theme Data with WordPress

get_theme_data()

Examples

HTML Formatting for Custom Menus

Customizing HTML displayed with wp_nav_menu()

An alternative approach for custom markup

Quick Summary

Create an Articles-Only Feed

Step 1: Create the custom page template

Step 2: Create the custom Page in the WP Admin

Wrap-up + additional resources

Tumblr Links with Post Formats

Easy, 3-Step Tutorial

Step 1: Enable Post Formats

Step 2: Customize your theme files

Step 3: Style with CSS

Usage and Notes

Show Post Thumbnails in Feeds

Display Post Thumbnails in Feed Content

Specify Unique CSS File Per Post

How it Works

Custom excerpt length

Custom excerpt “continue” string

No “more” jumping for the “read more” link

Add a favicon to your blog

Add a different favicon for your blog’s Admin area

Custom Admin Login logo

Disable unused widget areas

Kill the WordPress update nag

Include category ID in body_class and post_class

Get the first category ID

Putting it all together..

Download the custom functions.php template file

Download zipped functions.php Template File

Also..