Archives for April 2012

Don’t edit child themes – use grandchild themes!

Child themes are the easiest way to style WordPress sites. Rather than create a site from scratch, you can create a theme that shares most of its code and styling with a parent theme. The benefits of creating a child theme instead of editing the main theme is that if the main theme gets updates, none of your changes are lost.

But what if you need to modify a child theme? If you’re working with a Framework, like Genesis, it’s very likely you are already using a child theme – and editing that brings about all the disadvantages of editing a parent theme – you lose your changes if the theme is ever updated.

The solution is surprisingly simple. Instead of editing the child theme, create a grandchild theme. It’s very similar to creating a child theme, except you do it via a plugin. You add your custom functions to the plugin, just as you normally would in functions.php (though remember your plugin will be called much earlier than functions.php, so you’ll need to make sure that any code in your plugin only runs when an action is fired). Use the wp_register_style and wp_enqueue_style functions to add your CSS (by default a grandchild theme will add your CSS to the CSS of the parent or child theme, but you can change this behaviour by using the wp_dequeue_style function). Finally filter the result of the get_query_template function to control which PHP files are executed when a page is requested.

A typical grandchild theme might look like this:

/*
Plugin Name: Grandchild Theme
Plugin URI: http://www.wp-code.com/
Description: A WordPress Grandchild Theme (as a plugin)
Author: Mark Barnes
Version: 0.1
Author URI: http://www.wp-code.com/
*/

// These two lines ensure that your CSS is loaded alongside the parent or child theme's CSS
add_action('wp_head', 'wpc_theme_add_headers', 0);
add_action('init', 'wpc_theme_add_css');

// This filter replaces a complete file from the parent theme or child theme with your file (in this case the archive page).
// Whenever the archive is requested, it will use YOUR archive.php instead of that of the parent or child theme.
add_filter ('archive_template', create_function ('', 'return plugin_dir_path(__FILE__)."archive.php";'));

function wpc_theme_add_headers () {
	wp_enqueue_style('grandchild_style');
}

function wpc_theme_add_css() {
	$timestamp = @filemtime(plugin_dir_path(__FILE__).'/style.css');
	wp_register_style ('grandchild_style', plugins_url('style.css', __FILE__).'', array(), $timestamp);
}

// In the rest of your plugin, add your normal actions and filters, just as you would in functions.php in a child theme.

The two actions to add the CSS should be familiar to you (although you may also want to read this post). The filter is the important function. You can create as many of these as you wish, for different pages. Supported pages include:

  • index
  • 404
  • archive
  • author
  • category
  • tag
  • taxonomy
  • date
  • home
  • front_page
  • page
  • paged
  • search
  • single
  • attachment

If you want more control before deciding which template file to give to WordPress, create a proper function and insert your logic code into it:

add_filter ('archive_template', 'emw_archive_template', 10, 1);

function wpc_archive_template ($suggested_templates) {
	// Your logic here
	if ($test_passed)
		return $template_file;
	else
		return $alternative_template_file;
}

Synchronize a menu with your page hierarchy

WordPress’s menu feature is a fantastic way of creating a hierarchical menu, but unfortunately you still have to keep your pages in their own, separate hierarchy, using a horribly cumbersome interface, or a special plugin. The code snippet below will adjust your page hierarchy to match your menu, every time you edit your menu (so long as javascript is turned on). It does this by changing post_parent and menu_order for any pages that are no longer in sync with the menu. Pages that are not in the menu are not changed. To use the function in your own plugin, on the first line, you’ll need to enter the id of the menu you want to keep in sync.

The function gets the details of the menu by calling get_term_by, whilst wp_get_nav_menu_items returns all of the items in the menu. Finally, wp_update_post modifies any pages that need to be changed.

<?php
add_action ('wp_update_nav_menu', 'emw_create_hierarchy_from_menu', 10, 2);

function emw_create_hierarchy_from_menu($menu_id, $menu_data = NULL) {
	if ($menu_id != 1)  // You should update this integer to the id of the menu you want to keep in sync
		return;
	if ($menu_data !== NULL) // If $menu_date !== NULL, this means the action was fired in nav-menu.php, BEFORE the menu items have been updated, and we should ignore it.
		return;
	$menu_details = get_term_by('id', $menu_id, 'nav_menu');
	if ($items = wp_get_nav_menu_items ($menu_details->term_id)) {
	    // Create an index of menu item IDs, so we can find parents easily
		foreach ($items as $key => $item)
    		$item_index[$item->ID] = $key;
    	// Loop through each menu item
		foreach ($items as $item)
			// Only proceed if we're dealing with a page
			if ($item->object == 'page') {
				// Get the details of the page
				$post = get_post($item->object_id, ARRAY_A);
				if ($item->menu_item_parent != 0)
					// This is not top-level menu items, so we need to find the parent page
					if ($items[$item_index[$item->menu_item_parent]]->object != 'page') {
						// The parent isn't a page. Queue an error message.
						global $messages;
						$messages[] = '<div id="message" class="error"><p>' . sprintf( __("The parent of <strong>%1s</strong> is <strong>%2s</strong>, which is not a page, which means that this part of the menu cannot sync with your page hierarchy.", ETTD), $item->title, $items[$item_index[$item->menu_item_parent]]->title) . '</p></div>';
						$new_post['post_parent'] = new WP_Error;
					} else
						// Get the new parent page from the index
						$new_post['post_parent'] = $items[$item_index[$item->menu_item_parent]]->object_id;
				else
					$new_post['post_parent'] = 0; // Top-level menu item, so the new parent page is 0
				if (!is_wp_error ($new_post['post_parent'])) {
					$new_post['ID'] = $post['ID'];
					$new_post['menu_order'] = $item->menu_order;
					if ($new_post['menu_order'] !== $post['menu_order'] || $new_post['post_parent'] !== $post['post_parent'])
						// Only update the page if something has changed
						wp_update_post ($new_post);
				}
			}
	}
}
?>

Automatically add Lorem Ipsum text to blank WordPress pages

If you’re creating a new WordPress theme, it can be helpful to have some filler text in your pages. The snippet below adds a few paragraphs of lorem ipsum text to any blank post or page by filtering the_content. The text is retrieved from the www.lipsum.com site, and is cached, site-wide, for one hour using the set_transient and get_transient functions.

add_filter ('the_content', 'emw_custom_filter_the_content');

/**
* Returns Lorem Ipsum text for blank pages
* 
* @param string $content - the page's current contents
* @return string
*/
function emw_custom_filter_the_content ($content) {
	if ($content == '') {
		if ($c = get_transient ('lipsum'))
			return $c;
		$content = wp_remote_get ('http://www.lipsum.com/feed/json');
		if (!is_wp_error($content)) {
			$content = json_decode (str_replace ("\n", '</p><p>', $content['body']));
			$content = '<p>'.$content->feed->lipsum.'</p>';
			set_transient ('lipsum', $content, 3600); // Cache the text for one hour
			return $content;
		}
	} else
		return $content;
}

Changing the settings for Genesis Reponsive Slider to allow multiple slideshows

Out of the box, the Genesis Responsive Slider can only be used in one way on your site because it’s options are set in an options panel. However, you can hook in to every setting, to create different sliders on different pages (although this code will not allow you to have different sized slideshows on every page – we’ll cover that in a future post).

I hook to the ‘wp’ action, because that is late enough for you to be able to calculate what slideshow parameters you may want, but early enough that the slideshow won’t have been generated yet. The parameters are changed by filtering genesis_pre_get_option_*, and a very useful PHP function called create_function.

add_action ('wp', 'emw_change_slide_show');

function emw_change_slide_show() {
	$slide_show_vars = array(
		'slideshow_timer' => 8000,
		'slideshow_delay' => 1500,
		'slideshow_arrows' => 1,
		'slideshow_pager' => 0,
		'slideshow_loop' => 1,
		'slideshow_height' => 250,
		'slideshow_width' => 978,
		'slideshow_effect' => 'fade',
		'slideshow_title_show' => 1,
		'slideshow_excerpt_show' => 0,
		'slideshow_excerpt_width' => 30,
		'location_vertical' => 'bottom',
		'location_horizontal' => 'right',
		'slideshow_hide_mobile' => 1,
		'include_exclude' => 'include',
		'post_type' => 'page',
		'post_id' => '4, 7, 9'
	);
	foreach ($slide_show_vars as $option => $value)
		add_filter ("genesis_pre_get_option_{$option}", create_function ('', "return '{$value}';"));
}

If you want to change the size of the slideshow, as we’ve done for this example, you’ll need a few additional lines (and you’ll need to re-generate WordPress thumbnails after you’ve made the change). Although the code on this page allows you to change the size of the slideshow from the default, you’ll need to have the same size on every page:

add_action ('wp', 'emw_change_slider_image_size');

function emw_change_slider_image_size() {
    add_image_size ('slider', 978, 250, true);
}

Finally, if you want to remove the Responsive Slider menu from the admin (because those settings are now overridden):

add_action ('init', 'emw_remove_responsive_slider_menu');

function emw_remove_responsive_slider_menu() {
	if (is_admin())
		remove_action('admin_menu', 'genesis_responsive_slider_settings_init', 15);
}