In my last post I mentioned making a child WordPress theme mainly to offer customization to parts of theme footer that is usually hard coded. Maybe it’s too much detail, but I thought it a small example of how this is done.
I break down here the making of the Kid Hamilton and Kid Hitchcock themes, both now available in GitHub.
The parent themes, ones by my favorite theme designer Anders Norén have pretty much all I needed. But this thing that the majority of WordPress themes do bugged me here on a site Bryan Alexander uses for hos Future of Education Observatory using the Hamilton theme:
Generally WordPress Theme footers always put a copyright followed by the current year and name of the blog; these are hard coded into themes:
|
1 |
This is fine likely for Bryan’s work, he likely wants a copyright.
Many of my sites, however, I don’t want a copyright. In the past I have end arounded this by using some custom CSS to hide this line. But with a little bit of code work, what I did in the Kid themes, was to make the footer more flexible.
Child themes are a fabulous example of Why I Love WordPress So Much – it allows someone like me (or you) to modify aspects of a theme for your purposes, but keep your changes seperate from the main theme, which allows it to get updated rather than making your theme left out on a dead end fork.
I start my installing the parent theme, in this case Hamilton available from the WordPress collection, so it is available (note that on Multisite WordPress the parent themes do not need to be network activated).
I then create a new directory for my child theme in wp-content/themes, calling it kid-hamilton. To establish the relationship, I create a style sheet file styles.css in my new directory. I can start by copying the one from the parent, and modifying to suit my usage. I like to keep credit in the description to acknowledge the creator of the parent theme.
The thing that makes it a child is adding one line:
|
1 |
Template: hamilton |
In the old days, you would add then an include statement to link to the parent stylesheet, but we will take care of that in the next step using the current recommended approach.
The power of having the style sheet in the child theme, is now you can add any custom styles, even things to change what’s in the parent theme.
Everything I do next is done by creating a functions.php file in my child theme directory. Most files in a child theme directory replace the same named one in the parent theme; but for this one, it just offers a place to add additional custom functions I need.
The first thing I add is the code that enqueues or links in the parent’s style sheet, this is the newer way to do this referred to above:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* ------ enqueue custom style sheet ------------------------------------------------ */ add_action( 'wp_enqueue_scripts', 'kidhamilton_enqueue_style' ); function kidhamilton_enqueue_style() { $parent_style = 'hamilton-style'; // define parent // enqueue parent first wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); // now enqueue the child wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } |
The next steps walk through the code for adding a section to the WordPress customizer that will create a way to let a site owner put anything they want in that first line of the footer. I’ve really gotten to like adding theme options to the Customizer, largely because the site owner can see the changes as they enter them.
I should mention I learned much of this from Adding a Text Block via the Customizer in WordPress by WP Beaches.
These next steps create my own section on the customizer called Kid Hamilton Stuff with a control for editing the footer. In the end we will have this in our Customizer:
We start by telling WordPress we are going to add some stuff to the Customizer, we add an “action”:
|
1 |
add_action( 'customize_register', 'kidhamilton_register_theme_customizer' ); |
This tells WordPress when it is setting up the customizer, to call my own function kidhamilton_register_theme_customizer to add a few more things.
So we start this function with the first step which adds a “section” to the Customizer;
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// register custom customizer stuff function kidhamilton_register_theme_customizer( $wp_customize ) { // Setting for custom footer // Add section in customizer for this stuff $wp_customize->add_section( 'kid_stuff' , array( 'title' => __('Kid Hamilton Stuff','kidhamilton'), 'priority' => 500 ) ); } |
Adding the section with priority 500 puts it at the bottom of the other stuff.
Next we add code to add the new setting, this sets up both a place to store the data internally, and also a function to call to make sure it has only a limited set of HTML when someone enters text; we will see later how this works.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function kidhamilton_register_theme_customizer( $wp_customize ) { // Setting for custom footer // Add section in customizer for this stuff $wp_customize->add_section( 'kid_stuff' , array( 'title' => __('Kid Hamilton Stuff','kidhamilton'), 'priority' => 500 ) ); $wp_customize->add_setting( 'kid_footer_content', array( 'default' => __( '', 'kidhamilton' ), 'sanitize_callback' => 'kidhamilton_sanitize_html' ) ); } |
The name of the setting kid_footer_content is important to use whenever we refer to it. For this one, I am setting up the initial value as blank for the default.
Now we tell the Customizer what kind of “control” or web form interface to use, I am going with a text area.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// Setting for custom footer // Add section in customizer for this stuff $wp_customize->add_section( 'kid_stuff' , array( 'title' => __('Kid Hamilton Stuff','kidhamilton'), 'priority' => 500 ) ); $wp_customize->add_setting( 'kid_footer_content', array( 'default' => __( '', 'kidhamilton' ), 'sanitize_callback' => 'kidhamilton_sanitize_html' ) ); // Add control for footer text $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'kid_footer_content', array( 'label' => __( 'Footer Text (allowable HTML tags are: "a, img, em, strong, br" all others will be stripped out)', 'kidhamilton' ), 'section' => 'kid_stuff', 'settings' => 'kid_footer_content', 'type' => 'textarea' ) ) ); } |
I use kid_footer_content again as the id for this item, it helps me keep track of them. The setup is done by the array of data sent in the add_control call.
- Label is what appears above the form field, it lets the user now what kind of HTML can be used (maybe I should learn how to embed the mini wordpress editor??) it’s simple raw HTML now).
- section tells the control where to place tis text area, in the new section
kid_stuffcreated above. - settings associates the form field with the settings created in the previous step, it binds these two parts together.
- type defines the form field element used for input
The next function kidhamilton_sanitize_html I add is what the add_settings code calls to clean or sanitize the HTML input through a form field, this strips out all HTML tags except for the ones I allow:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
function kidhamilton_register_theme_customizer( $wp_customize ) { // Setting for custom footer // Add section in customizer for this stuff $wp_customize->add_section( 'kid_stuff' , array( 'title' => __('Kid Hamilton Stuff','kidhamilton'), 'priority' => 500 ) ); $wp_customize->add_setting( 'kid_footer_content', array( 'default' => __( '', 'kidhamilton' ), 'sanitize_callback' => 'kidhamilton_sanitize_html' ) ); // Add control for footer text $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'kid_footer_content', array( 'label' => __( 'Footer Text (allowable HTML tags are: "a, img, em, strong, br" all others will be stripped out)', 'kidhamilton' ), 'section' => 'kid_stuff', 'settings' => 'kid_footer_content', 'type' => 'textarea' ) ) ); // Allow just some html function kidhamilton_sanitize_html( $value ) { $allowed_html = [ 'a' => [ 'href' => [], 'title' => [], ], 'img' => [ 'src' => [], 'alt' => [], 'title' => [], ], 'br' => [], 'em' => [], 'strong' => [], ]; return wp_kses( $value, $allowed_html ); } } |
And that is all I need to create the Customizer interface. But right now all that does is make the input form. How do I get it in my site?
I need a function to generate output based on the customizer settings; if it is blank (default) then it displays the standard output for the theme, the copyright statement. But if someone has used the customizer, we will use that string instead.
|
1 2 3 |
function kidhamilton_get_footer() { if ( get_theme_mod( 'kid_footer_content') != "" ) { echo ' |
‘ . get_theme_mod( ‘kid_footer_content’) . ‘
|
1 2 3 4 5 |
'; } else { echo '© ' . date( 'Y' ) . ' ' . get_bloginfo( 'name' ) . ''; } } |
We get the value of the customizer setting with the get_theme_mod() function, passing it the name of the setting as a string.
Now we want to make the footer come to life. We copy the parent theme’s footer.php template from the parent theme to our child theme directory. This is the original one from Hamilton:
|
1 2 3 |
<!-- footer --> <!--?php wp_footer(); ?--> |
In my Kid-Hamilton theme, I replace the two lines in the
<code>
tag to use my customizer function value for the first line:
|
1 2 3 |
<!-- footer --> <!--?php wp_footer(); ?--> |
and I have changed the second line to give myself credit (hey why not), but also link to the child theme, and as well give more specific credit and links to the parent themes.
You can see this in action on my own site I first used this kid theme. Rather than a copyright, I can now insert a Creative Commons statement:
Footer from https://cog.dog/roo
Maybe that’s a lot of work to replace one line in a footer (and in your own you could just hard code it), but once yo crack this simple bit of Customizer wrangling, you might see all kinds of ways you can make playful, fun, wild child themes of your own.
Featured Image: Chaplin The Kid edit.jpg Wikimedia Commons image by James Willis Sayre shared into the public domain modified by cropping and adding black background to widen image.
