Resize the Twenty Eleven Theme

We have seen a number of solutions to resize the WordPress twenty eleven theme, there are a number of considerations when resizing the theme, like the built in headers and content area, we thought we would add our own solution to the mix.

Changing the header height is not that hard to do using a function and the after_setup_theme hook, but what if we want a wider theme, the headers will still show but will be stretched, the default header will still be the parent themes header, so lets look at the steps we take in changing our child theme.

Continue reading

WordPress Post Class

There are many themes that offer magazine style layouts for the WordPress platform, we thought it would be fun to create a twenty eleven child theme with some different layouts, we have also created a child theme download so you can grab that, review the code and use it as you want.

This post was the result of answering two topics on the same day over on the WordPress forum, the first topic wanted a way to style the page content for a table layout, the second wanted a different style for a set number of posts.

Continue reading

Twenty Eleven and the Pluggable functions

In the early releases of the WordPress twenty eleven theme, the ‘twenty_eleven_content_nav’ function was not pluggable, so we raised a WordPress trac ticket and politely asked the developers to make the function pluggable for the WordPress child theme developers.

This was a minor tweak to the theme and we forgot all about it until we were reading another website post on adding PageNavi to a twenty eleven Child Theme, we thought we could now re-visit the solution using the updated pluggable function.


What are Pluggable Functions?

With the massive uptake on using child themes, the WordPress guru’s needed a way for developers to over-ride some of the twenty eleven parent theme functions, to do this they added two lines of code one before and one after to some of the theme function.

As an example if in our parent theme we had a function called ‘my_pluggable_function’  the code might look like this, notice the first line, in plain talk is says, if not ( ! = not ) the  function_exists ‘my_pluggable_function’ then load the parent function.

if ( ! function_exists( 'my_pluggable_function' ) ) :
function my_pluggable_function() {
    echo ‘This is my pluggable function!’;
}
endif;

Before pluggable functions we had to create a new function with a different name and edit all the calls to the old function, that could mean quite a few files had to be moved to the child theme and edited, but with the Pluggable function we can just check in the parent theme’s files to see if the function is pluggable, as in our example it is pluggable,  so how do we stop the parent themes function from being loaded.

In our child theme’s functions.php we just copy the code block from the parent, make our changes in the copied function, notice that we do not change the name, and the function is not inside any ‘after theme setup’ function.

if ( ! function_exists( 'my_pluggable_function' ) ) :
function my_pluggable_function() {
   echo ‘This is my pluggable function in the child theme!’;
}
endif;

What happens at runtime is WordPress will load the child themes functions first, when it finds a function with the same name in the parent code, the code call that looks to see if the function_exists(‘function_name’) if this returns a true, then the parent function is skipped!

Pagination

We are using the page navigation to show how we can use the pluggable functions, in a real scenario, at the moment we only get a normal text link, with no way of navigating lots of posts, that is where the pagination plugins come in handy.

By using a pluggable function we can change the navigation output and style website wide, on the home page, archive, category, search, in fact any page that displays a post list!

We have created a fully working twenty eleven child theme based on this post for you to download and investigate the code!

Twenty Eleven Paginate

Lets us now add pagination support, using wp-pagenavi and wp-paginate plugin support to our twenty eleven child theme, we just copy the code block ‘twenty_eleven_content_nav’ from the twenty eleven theme, to our child themes functions.php.

Child Theme’s Functions.php

if ( ! function_exists( 'twentyeleven_content_nav' ) ) :
/**  * Display navigation to next/previous pages when applicable  */
function twentyeleven_content_nav( $nav_id ) {
   global $wp_query;
   if ( $wp_query->max_num_pages > 1 ) : ?>
      <nav id="<?php echo $nav_id; ?>">
         <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
         <div class="nav-previous"><?php next_posts_link( __( '<span>&larr;</span> Older posts', 'twentyeleven' ) ); ?></div>
         <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span>&rarr;</span>', 'twentyeleven' ) ); ?></div>
      </nav><!-- #nav-above -->
   <?php endif;
}
endif; // twentyeleven_content_nav

Then we add a couple of extra lines of code to call a new function that returns the plugin output, first we look for the function wp_pagenavi if we find this we can load pagenavi and exit, we fall through to the function wp_pageinate and then the default output.

if ( ! function_exists( 'twentyeleven_content_nav' ) ) :
/**  * Display new navigation to next/previous pages when applicable  */
function twentyeleven_content_nav( $nav_id ) {
   global $wp_query;
if ( $wp_query->max_num_pages > 1 ) : ?>
       <?php
       /**
       Call our new function to see if any pagination plugins are active
       If one of the plugins is active then exit this function
       If none of the plugins are active use the default styles
       */
      if( dr_custom_navigation( $nav_id ) ) return;
      ?>
      <nav id="<?php echo $nav_id; ?>">
         <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
         <div class="nav-previous"><?php next_posts_link( __( '<span>&larr;</span> Older posts', 'twentyeleven' ) ); ?></div>
         <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span>&rarr;</span>', 'twentyeleven' ) ); ?></div>
      </nav><!-- #nav-above -->
   <?php endif;
}
endif; // twentyeleven_content_nav

dr_custom_navigation

As we can see we only added a line call to a new function, we have our code in a new function to make our changes easy to track, also notice that we have changed the <nav id= to <nav class=. this is so we could add our own styles to the classes in the child themes style.css.

function dr_custom_navigation( $nav_id ) {
   /* Is the Pagenavi plugin active ? */
   if( function_exists('wp_pagenavi') ) : ?>
      <nav class="<?php echo $nav_id; ?>">
         <?php wp_pagenavi(); ?>
      </nav>
      <?php return true; //Get out of here!
   endif;
   /* Is the Paginate plugin active ? */
   if( function_exists('wp_paginate') ) : ?>
      <nav class="<?php echo $nav_id; ?>">
         <?php wp_paginate(); ?>
      </nav>
      <?php return true; //Get out of here!
   endif;
   return false;
}

WP Paginate

WP PageNavi

There we are a little introduction to pluggable functions, and support for two of the top pagination plugins.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

Understanding WordPress Excerpts

A number of WordPress users find themselves over on the WordPress Forum looking for a code solutions to show excerpts and not full posts on the home page of their website, there are many different theme, and some have options to choose the post output.

Continue reading

Woo Themes Flex Slider

The Flex Slider we have been working with has changed ownership to Woo Themes, this does not affect us using the Flex Slider in our own themes, we have created a child theme with two sliders as a proof of concept.

The child theme we have created and is downloadable from this page has two sliders, the header slider and a widget slider, a basic slider has it uses but we have enhanced the theme with a settings page, and a number of options.

Continue reading

Mobile Twenty Eleven Option

We were talking before the WordPress London meet-up and the subject of how twenty eleven looks on a mobile, as the WordPress twenty eleven theme is responsive the images all resize, and the content stacks.

One of the main issues is the way the menu wraps, there are solutions out there being developed to make the menu change, so we can hope the menu issue get resolver at a later date.

Continue reading

WordPress Categories Extended Twenty Eleven

This is our third and last post on enhancing the categories in our twenty eleven child theme, so we now have three different solutions, this one is extended as it is more rich in features.

We wanted to be able to choose a header from a list, add a nice description in the editor not just the description area, have a selectable choice per category of how the content is displayed and reverse the sort order.

Continue reading

Category Header Images Two

A Different Header Image for Each Category two for the twenty eleven WordPress theme, we come across a topics over on the WordPress.org forum asking about a header image per category.

We created a working child theme which found the earliest post for the category that had a header and returned the header image, this is another way using the uploaded header images.

Continue reading

Different Header Image for Each Category

A Different Header Image for Each Category in the twenty eleven WordPress theme, we often come across topics over on the WordPress.org forum which we think are generic enough to make a good Twenty Eleven Child Theme download, and this theme comes from such a post.

The topic starter is creating a travel blog where each county is a category, we can add a different header to posts and pages but not to a category, we thought of several ways we could do this, and settles on a simple solution.

Continue reading