WordPress personalizing made easy


by - posted

wordpress personalizingIn the article WordPress personalizing made easy, you will learn what the basic steps are to modify a standard WordPress Theme . In the examples I used the Twenty Twelve theme.

Anatomy of a WordPress theme

WordPress themes basically consist of three main types of files.

  • The stylesheet (style.css) which controls the visual design and layout of the web pages.
  •  The template files which control the way WordPress generates pages and then displays them in the browser. Examples : header.php, sidebar.php, footer.php, etc
  •  The optional functions file (functions.php).

Modification possibilities

You can modify WP functionality in changing the core code. If you change for example the files in wp-content/themes/ “name of the theme” (the so called parent theme folder) – you will loose your modifications after the next update ! To avoid that, you have to use the the child theme mechanism !

Child themes basics

A WordPress child theme is a theme that inherits the functionality of another theme called the parent theme. The child theme allows you to modify or add to the functionality of the parent theme.

Create a child directory in wp-content/themes. The name convention for the child directory is : parent theme name-child (example : twentytwelve-child)

In the child theme directory, create a file called style.css. This is the only file required to make a child theme!

The style sheet must start with the following lines:
/*
Theme Name: Twenty Twelve Child <– required : can be any theme name
Theme URI: http://phoenix-it-mos.com/twentytwelve-child <– optional
Author: Marc Oscar Schwager <– optional
Author URI: http://phoenix-it-mos.com/ <– optional
Template: twentytwelve <– required : must be a directory match of the parent theme
Description: Twenty Twelve Child Theme from MOS <– optional
Version: 1.0 <– optional
*/

/* — Theme customization starts below — */

Connect the child and the parent CSS

– The old way

This method slows down the page load and is only for older themes which don’t use the wp_enqueue_style method.

Put the following code at the beginning of the child CSS file :
@import url(“../path to the parent theme/style.css”);

– The new way

This method gives a faster loading web page, but it is eventually incompatibility with some (old) plugins.

Add the following code to the functions.php file:

<?php

function add_require_scripts_files() {
wp_enqueue_style(‘layout’, get_template_directory_uri().’/style.css’, array(), ‘1.0.0’, “all”);
}
add_action( ‘wp_enqueue_scripts’, ‘add_require_scripts_files’ );

?>

Activate the child theme

Log in to your site’s dashboard and go to Administration Panels > Appearance > Themes. You will see your child theme listed there. Click Activate.

Change more than just the stylesheet

Your child theme can overwrite any file in the parent theme. Simply include a file of the same name in the child theme directory, this will overwrite the equivalent file in the parent theme directory.
There is one exception : the functions.php file. More information see below “The child functions.php file”

Hooks basics

Hooks are “filters” and “actions” that give us the ability to customize, extend and enhance WordPress.

WordPress hooks refer to two things – actions and filters. Actions allow us to do things, while filters change data.

Use actions when you want to add something to the existing page such as stylesheets and/or JavaScript dependencies, or send an email when an event has happened.
Reference : http://codex.wordpress.org/Plugin_API/Action_Reference

Use filters when you want to manipulate data coming out of the database prior to going to the browser, or coming from the browser prior to going into the database.
Reference : http://codex.wordpress.org/Plugin_API/Filter_Reference

Examples :
add_action
remove_action
add_filter
remove_filter


add_action(‘destination_hook’,’function_to_add’, $priority, $accepted_args );
add_action(‘customize_xyz’,’function_abcd’);
add_action reference : http://codex.wordpress.org/Function_Reference/add_action;

The child functions.php file

Unlike the style.css file, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. The child themes functions.php is executed before the parent themes functions.php.
Do not copy the full content of the functions.php of the parent theme into the functions.php in the child theme, because this will crash the application (double declaration of functions)!

Add a new function

If you need to add additional PHP functions, create a functions.php file in the child theme folder. It will load in addition to the parent theme functions.php file.

Modify an existing function

1) Replace a parent function by a new one – in using hooks

– Parent functions.php

function twentytwelve_page_menu_args( $args )
{
if ( ! isset( $args['show_home'] ) )
$args['show_home'] = true; // the default Home menu link
return $args;
}
add_filter( 'wp_page_menu_args', 'twentytwelve_page_menu_args' );

– Child functions.php

// Remove the parent function
function remove_the_parent()
{
remove_filter('wp_page_menu_args', 'twentytwelve_page_menu_args');
}

// Call the function remove_the_parent() after the parent and child functions.php are loaded
add_action(‘after_setup_theme’,’remove_the_parent’);

// The new function
function child_page_menu_args( $args )
{
if ( ! isset( $args[‘show_home’] ) )
$args[‘show_home’] = ‘Blog’; // changes the Home menu link to Blog
return $args;
}

// Activate the new function
add_filter( ‘wp_page_menu_args’, ‘child_page_menu_args’ );

2) Override a parent function

– Parent functions.php

function twentytwelve_page_menu_args( $args )
{
if ( ! isset( $args['show_home'] ) )
$args['show_home'] = true; // the default Home menu link
return $args;
}
add_filter( 'wp_page_menu_args', 'twentytwelve_page_menu_args' );

– Child functions.php

Add the prefix childtheme_override_ to the original function name

function childtheme_override_twentytwelve_page_menu_args( $args )
{
if ( ! isset( $args['show_home'] ) )
$args['show_home'] = 'Blog'; // changes the Home menu link to Blog
return $args;
}
add_filter( 'wp_page_menu_args', 'childtheme_override_twentytwelve_page_menu_args' );

Creating a child theme summary

  • create the child folder : wp-content/themes/twentytwelve-child
  • create the basic style sheet and put it in the child theme folder
  • modify the style sheet to your needs
  • put the modified PHP files in the child theme folder
  • put a screenshot.png of the child theme in the child folder (this is nice, but not a must!)
  • activate the child theme in the admin panel

If you enjoyed this article, you can :

– get post updates by subscribing to our e-mail list

– share on social media :

2 thoughts on “WordPress personalizing made easy

  1. Mike

    Extremely good article and a nice overview. Keep up your fantastic work, I read a few articles on this blog
    and I believe that your blog is very interesting and contains lots of great information.

Leave a comment Cancel reply