In the last part of this series, you added some action hooks to your theme framework. In this tutorial you'll write some functions which you activate via those hooks.
If you've been working with the sample code, there are six action hooks in your framework now:
-
wptp_in_header, which is on the right hand side of the header -
wptp_before_content, which is just before the loop -
wptp_after_content, which is just after the loop -
wptp_sidebar, which is in sidebar.php -
wptp_footer, which is inside the footer element -
wptp_after_footer, which is after the footer element.
In this tutorial I'll show you how to add widget areas to three of those and a custom function to the last one.
What You'll Need
To follow this tutorial, you'll need:
- a development installation of WordPress
- a code editor
- zthe code files from the previous tutorial if you're working with the sample code. You can access these by viewing the tutorial or via the GitHub repository for this series, a link to which is at the top of this page.
Adding Widget Areas via a Function
The first step is to add a function for the widget areas. You may remember that these were originally coded into the relevant template files; however, adding them via a function means that users of your framework can override the function at a later date, either removing the widget areas altogether or replacing them with something else.
Creating an Include File for the Widget Areas
Because the widget areas are added via functions, you don't code them in the relevant template files. You could add them to your functions.php file, but to keep the code manageable I'm going to add an include file with the code for the widget areas.
Create a folder called includes in your theme folder and inside that, create a file called widgets.php. Save the file.
Now open your functions.php file and add the following before your other functions:
// include for widgets include( TEMPLATEPATH . '/includes/widgets.php' );
This effectively pulls in the contents of that widgets.php file at this location in your functions file.
Now save your functions file.
The Widget Area in the Header
First let's add the widget area in the header. Open your new widgets.php file and add this:
function wptp_in_header_widget_area() {
if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>
<aside class="in-header widget-area" role="complementary">
<?php dynamic_sidebar( 'in-header-widget-area' ); ?>
</aside>
<?php }
}
add_action( 'wptp_in_header', 'wptp_in_header_widget_area' );
The wptp_in_header_widget_area() function adds the code for the widget area in the correct place. First, it checks if the widget area is populated with widgets, using if( is_active_sidebar), then if that's the case it outputs the widget in an aside element.
The function is activated via the wptp_in_header action hook which you added to the header.php file in the last tutorial. This replaces the code for the widget area which was originally in header.php.
Doing it like this means that if you want to remove the widget area for a site running on a child theme, you can do so using remove_action(), like so:
remove_action( 'wptp_in_header', 'wptp_in_header_widget_area' );
It also means you can add extra functions which are activated via the same hook, so if you wanted to add a call to action button above the widget area, for example, you'd create a function containing the code and then attach it to the wptp_in_header action hook, with a priority of less than 10, as that's the default priority which will be given to the widget area function above. Functions with a lower figure for their priority are fired first.
function wptp_add_cta() {
//code for cta here
}
add_action( 'wptp_in_header' , 'wttp_add_cta', 5 );
Note that you can find out more about the add_action() function in the WordPress Codex.
The Widget Area in the Sidebar
The next step is to add the widget area in the sidebar, using a similar piece of code which you also add to your widgets.php file:
function wptp_sidebar_widget_area() {
if ( is_active_sidebar( 'sidebar-widget-area' ) ) { ?>
<aside class="sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-widget-area' ); ?>
</aside>
<?php }
}
add_action( 'wptp_sidebar', 'wptp_sidebar_widget_area' );
This adds the widget area in the sidebar, as long as it is populated, with relevant classes to identify it for styling.
The Footer Widget Area
Finally, let's add widgets in the footer. I'm going to add four footer widget areas - you might decide to add less than that if that's all your framework calls for. My widget areas use classes which take advantage of the object oriented CSS in my theme.
Again in widgets.php, add the following:
function wptp_footer_widget_area() { ?>
<aside class="fatfooter" role="complementary">
<?php
// the first widget area
if ( is_active_sidebar( 'first-footer-widget-area' ) ) { ?>
<aside class="first quarter left widget-area">
<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
</aside><!-- .first .widget-area -->
<?php }
// the second widget area
if ( is_active_sidebar( 'second-footer-widget-area' ) ) { ?>
<aside class="second quarter widget-area">
<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
</aside><!-- .first .widget-area -->
<?php }
// the third widget area
if ( is_active_sidebar( 'third-footer-widget-area' ) ) { ?>
<aside class="third quarter widget-area">
<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
</aside><!-- .first .widget-area -->
<?php }
// the fourth widget area
if ( is_active_sidebar( 'fourth-footer-widget-area' ) ) { ?>
<aside class="fourth right quarter widget-area">
<?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>
</aside><!-- .first .widget-area -->
<?php } ?>
</aside>
<?php
}
add_action( 'wptp_footer', 'wptp_footer_widget_area' );
This adds the four widget areas inside an aside element with the fatfooter class - in my theme, this is used for styling, meaning that a full width background can be applied to the footer element while the aside.fatfooter element can be centered on the screen.
Having added some widgets to my widget areas, you can see how my page is looking now:
Adding a Function for the Colophon
As well as widget areas, I'm going to add a function to my theme which inserts the text for the colophon. This will be activated via the wptp_after_footer hook, so it displays at the very bottom of the screen.
As this isn't a widget, I'm going to add the code to my functions.php file:
function wptp_colophon() { ?>
<section class="colophon" role="contentinfo">
<small class="copyright half left">
© <a href="<?php echo home_url( '/' ) ?>"><?php bloginfo( 'name' ); ?></a> 2014
</small><!-- #copyright -->
<small class="credits half right">
<?php _e( 'Proudly powered by', 'tutsplus' ); ?> <a href="http://wordpress.org/">WordPress</a>.
</a>
</small><!-- #credits -->
</section><!--#colophon-->
<?php
}
This adds a section element containing the code for the colophon. Now you can see the colophon in my site:
As you can see, the default text for the copyright link is the site title. If I wanted to override that in a child theme, I could easily do so, by creating a new function hooked to the wptp_after_footer action hook, and removing the original function using remove_action():
remove_action( 'wptp_after_footer', 'wptp_colophon' );
Alternatively I could make my original function pluggable, which means it isn't activated if another function with the same name has already been encountered by WordPress (for example in the child theme). I would do this by wrapping the function in a conditional function, like so:
if ( ! function_exists( 'wptp_colophon' ) ) {
function wptp_colophon() { ?>
<section class="colophon" role="contentinfo">
<small class="copyright half left">
© <a href="<?php echo home_url( '/' ) ?>"><?php bloginfo( 'name' ); ?></a> 2014
</small><!-- #copyright -->
<small class="credits half right">
<?php _e( 'Proudly powered by', 'tutsplus' ); ?> <a href="http://wordpress.org/">WordPress</a>.
</a>
</small><!-- #credits -->
</section><!--#colophon-->
<?php
}
}
add_action( 'wptp_after_footer', 'wptp_colophon' );
If I then add a function called wptp_colophon to my child theme, WordPress will fire that and not the one in the parent theme. Neat, huh?
Note that in this case, an even better solution to target the text in the copyright link would be to wrap that code in a filter hook. We'll cover that in the next part of this series.
Summary
Your WordPress theme framework now has some functions. In this tutorial, I've shown you how to use the action hooks you created earlier to activate functions which you add in the functions.php file or in an include file which you create in your theme.
I mentioned in the very first part of this series that a mature theme framework is more than just a parent theme: it's an ecosystem. This means that you'll be using the action hooks in your theme to activate functions in plugins which you write specifically for sites running on the theme, or on children of it.
Many of the popular WordPress theme frameworks do this and there's no reason why you can't. For example, you might write a plugin to add custom sidebars to a site, then activate that via the wptp_sidebar hook.
This could be useful if the plugin is used on more than one site, so you'd be duplicating your code if you added it to the relevant child themes. I've done this myself where the site needed a sidebar listing pages in the same part of a site's page hierarchy - this is generic code which is useful on more than one site.
In the next part of this series, you'll learn how to take the next step, and add filter hooks to your framework.
Comments