A Guide to Overriding Parent Theme Functions in Your Child Theme

If you’ve had any experience working with parent and child themes in WordPress, you’ll know that the template files in your child theme override those in your parent theme. So for example if your parent theme has a page.php file and you create a new one in your child theme, WordPress will use the one in the child theme when displaying pages.

You might think that functions would work in the same way: create a new function in your child theme’s functions.php file with the same name as one in the parent theme, and it’ll take precedence. Unfortunately it isn’t as simple as this.

In this tutorial I’ll show you three methods you can use to override functions from the parent theme in your child theme:

  • pluggable functions
  • function priority
  • removing functions from the hook they’re attached to

How Functions in Parent and Child Themes Work

Before examining the methods for overriding functions in your child themes, it helps to understand how functions work in parent and child themes.

Firstly, you need to know that all of the functions in your parent theme will be run when you’re using a child theme. You don’t have to add anything to your child theme’s functions file to make this happen. This is different from CSS, where you have to manually include the parent theme’s stylesheet in the child theme’s stylesheet.

The functions in your child theme will be loaded before the functions in the parent theme. This means that if your parent and child themes both have functions called my_function() which do a similar job, the one in the parent theme will load last, meaning it will override the one in the child theme.

However you can change the order in which functions are fired, and you can prevent functions from being fired altogether, as we’ll see shortly.

Pluggable Functions

Pluggable functions are something you code into your parent theme, so they won’t be any use to you if you’re working with an existing parent theme that doesn’t have them.

But if you’re writing your own parent theme, maybe as a starting point for future projects, or if you’re creating your own theme framework, it’s good practice to make your functions pluggable so that you can easily override them in child themes. It’s also a good idea to look through the functions that are written into the parent theme you’re using, as many of them, including the WordPress default theme, will have pluggable functions.

To write a pluggable function, you simply enclose it in a conditional tag to check if a function with that name has already been run:

So if you enclose the functions in your parent theme in a conditional tag like this, WordPress will check if there is a function with the same name in your child theme that’s already been run, and if that’s the case it won’t run the function from the parent theme.

Then when you come to write a function in your child theme which you want to override the one in the parent theme, you just give it the same name as the one in the parent theme:

WordPress will run the function in the child theme first, and when it comes to the one in the parent theme, it’ll check if it already exists and because it does, it won’t run it.

Function Priority

If you’re not using your own parent theme, or you’re using a third party one without pluggable functions, you’ll need another method.

When you write functions you can assign them a priority, which tells WordPress when to run them. You do this when adding your function to an action or filter hook. WordPress will then run the functions attached to a given hook in ascending order of priority, so those with higher numbers will run last.

Let’s imagine the function in the parent theme isn’t pluggable, and looks like this:

This function is attached to the init hook and hasn’t been given a priority. By default WordPress assigns a priority of 10 to functions which haven’t had a priority added, so to fire your function after it you use a number larger than 10. I tend to use 15 so I’ve got some breathing room in case I want to add another function between the two later on.

This means the function in your child theme would look like this:

Alternatively, the function in your parent theme may have had a priority assigned to it:

So you just need to make sure the priority you give the function in your child theme is higher:

Removing Functions From Hooks

Sometimes running another function after the first one isn’t enough to override it—you need to make sure the function in the parent theme doesn’t run at all. In this case, you can remove the parent theme function from the hook it’s attached to, using the remove_action() or remove_filter() functions. The one you use will depend on whether the function is attached to an action hook or filter hook in the parent theme.

So let’s return to our previous function in the parent theme:

To remove this function from its action hook and therefore prevent it from firing, you create a function in your child theme to remove it using remove_action():

However, this won’t work on its own—you need to attach this function to a hook which will fire after the hook which the parent theme function is attached to. This is because you can’t remove the action before it’s been fired. You can find details of the order in which actions are fired in the Codex.

Once you’ve done this, you can simply write an alternative function to replace the parent theme function in your child theme’s functions file, or you can do nothing if all you wanted to do was remove the functionality from the parent theme.

A Note on Priorities

Note that if you’re trying to remove a function using remove_action() or remove_filter() and the function has had a priority assigned to it, you must include the priority when removing it, or it won’t work.

So if the function in the parent theme looks like this:

… you’ll need to include the same priority value when removing it:

Summary

Overriding functions in a parent theme is more complicated than overriding template files or styling, but it can be done. Here I’ve shown you three methods for doing this:

  • If you’re writing your own parent theme, or using one which has them, use pluggable functions so that a function in the child theme with the same name as one in the parent theme will replace it.
  • Assign higher priorities to functions in your child themes to ensure they’re run after those in your parent theme.
  • Use remove_action() or remove_filter() to remove functions in the parent theme altogether.

Which method you use will depend on the way your parent theme is coded and whether you need to remove the parent theme function altogether or just run another function after it to override it.

from Tuts+ Code – WordPress http://ift.tt/1FQJ1XP

20 Free HTML5 Web Templates


A readymade template is the perfect option for you to build a powerful website for your business. There are numerous pro designed templates available but fairly often they require a degree of customization. Eventually, you find yourself with lines of code to change to get the required result. It’s great if you know some HTML and CSS basics, but what’s the option for those users who don’t know a thing about coding?

All templates you find in this collection have been sourced only from trusted websites. They are also built in accordance with the latest web design trends and combine a striking look with unmatched functionality. In addition, they feature a number of cool effects like parallax scrolling, mega menu, responsive design and much more. Here they are:

Landed

If you need an up-to-date website with a hot look and advanced functionality this Landed template will be a perfect choice. It features a full-screen image at the top of the homepage, lazy loading images with parallax effect and much more.

Colossus

This template offers a clean and responsive layout that allows you to engage more visitors as it automatically adjusts your pages to any screen resolution whether it is a desktop or a tablet.

Cafe and Restaurant

Here is a responsive HTML5 template specially designed for cafe and restaurant websites. It is loaded with an assortment of cool effects like burger menu, full-screen slider, lazy-load, parallax and hover effects.

Flex

This one page template can be a perfect fit for an online CV or portfolio. It combines a lovely design with great functionality and features a full-screen slider with fixed mega-menu, gallery with lightbox, etc.

Alpha

Alpha is another pro-designed template that features a simple design with clean layout. Thanks to these features it will be a great fit for business websites.

Viral

The template features a clean and minimal layout with a full-width image in the header section, mega menu and buttons with hover effect.

Design Agency

Choose this creative HTML5 template to give your design agency a brand new look. It is built in accordance with the latest web design standards and features a large hero area, clean layout, image with parallax effect, full-width Google maps, etc.

Ion

Need a powerful template for a blog? Ion would be a great option for that as it offers a clean and minimal design. It offers a full-width image at the top of the homepage and a fixed mega menu.

Extant

This simple HTML5 template with a clean and responsive layout will be a great option for blogs and online education courses. It features an image with parallax effect and mega-menu.

Modi

Modi is a pro designed HTML5 template with a number of cool effects that give it a touch of personality. It features a full-screen slider, fixed mega menu, images with hover and parallax effects, animated backgrounds, etc.

Abele

This Abele template features a responsive design, mega menu, large hero area, etc. It can be a great fit for any online news or educational blog.

Transit

Use this template to give your website a brand new look and style, along with unmatched functionality.

Volton

This one page portfolio website can be quite handy if you are a freelance designer, copywriter, or whatever. Thanks to a vertical menu at the left sidebar it ensures user-friendly interface and advanced navigation.

Corporate

Build a powerful corporate website with this pro designed template that features a full-width slider, fixed mega menu, parallax, hover and lazy load effects.

Photon

Photon is a one page HTML5 template that features images with parallax effect and buttons with hover. Chose this template to give your online resume a striking look.

Horizons

This is a simple template with a clean and minimal layout. It will be a perfect fit for business and news blogs.

Masonry

This template could be a great option for those who need a powerful and stylish online portfolio both modern and classy.

Lawyers Bureau

This HTML5 template is specially designed for layers so it features a conservative look with a clean and minimal layout. Thanks to a fully responsive design the website will automatically adjust to any screen resolution.

Highlights

Highlights is a one page template specially designed for online CVs and portfolios. It offers a full-screen slider and a responsive design that makes the website perform equally well on screens of different sizes.

Linear

This template is a great option if you need both a conservative and modern look. It features images with parallax effect and a clean layout.

Finished!

Go ahead and find a suitable template for your website and give it a brand new look and enhanced functionality. With any of these HTML5 templates you will surely cultivate a growing audience and increase your conversion rate. If you like, you could check out last years HTML5 template collection as well.


The post 20 Free HTML5 Web Templates appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine http://ift.tt/1Njf8OO