Web design & digital marketing in Poole, helping 400+ businesses since 2010.
Expect Best
Web Design Bournemouth

Top 3 WordPress customisation options with code snippets, CSS, and child themes

Written by Alex Dibben · 15 January 2024

WordPress gives you a great deal out of the box, but sooner or later most site owners want to change something the settings will not let them touch: a colour here, a bit of behaviour there, a feature the theme does not include. There are three reliable ways to do that safely, without hacking core files or losing your work at the next update. Here is a practical walk through of each one, with real code you can adapt.

A quick word of caution before you start: always back up your site first, and make changes on a staging copy if you can. Small mistakes in PHP can take a site offline, so it pays to test before you touch anything live. If that makes you nervous, our web development team can handle it for you.

1. Add functionality with a functions.php snippet

The functions.php file lets you add small pieces of PHP that change how WordPress behaves. Filters and actions are the two main hooks: a filter changes a value before WordPress uses it, and an action runs your code at a set point. Here is a simple, safe example that changes the length of your post excerpts to 25 words:

function eb_custom_excerpt_length( $length ) {
    return 25;
}
add_filter( 'excerpt_length', 'eb_custom_excerpt_length' );

You would add this to the end of your theme's functions.php file, ideally in a child theme (more on that below). The function returns the number you want, and add_filter tells WordPress to use it. The same pattern, a small function plus a hook, covers a huge range of tweaks, from changing default text to registering new features. Give your functions a unique prefix, such as eb_ here, so they never clash with the theme or a plugin.

2. Change the look with custom CSS

When you only want to change how something looks, CSS is the right tool, not PHP. You can add custom CSS under Appearance, then Customise, then Additional CSS, which is safe and survives theme updates, or in your child theme's stylesheet. The trick is targeting the right element. This example restyles the standard WordPress button block and its hover state:

.wp-block-button__link {
    background-color: #0a5cff;
    border-radius: 6px;
    padding: 12px 28px;
}

.wp-block-button__link:hover {
    background-color: #0847c9;
}

Each rule has a selector (the part before the brackets that says what to style) and a set of properties (what to change). If a change does not seem to take, your theme's own CSS is probably more specific and winning, so use your browser's inspector to find the exact selector. Try to avoid scattering !important everywhere, as it makes the CSS harder to manage later. Careful styling like this is a big part of good web design, and small, targeted rules are far easier to maintain than a pile of overrides.

3. Keep changes safe with a child theme

If you edit your theme's files directly, the next theme update wipes your changes. A child theme solves this. It sits on top of your main theme (the parent), inherits everything from it, and holds your customisations separately, so updating the parent leaves your work untouched. A child theme needs just two files in its own folder. First, a style.css with a header that points at the parent:

/*
 Theme Name:   Twenty Twenty-Four Child
 Template:     twentytwentyfour
 Version:      1.0.0
*/

The Template line is the important one: it must match the parent theme's folder name exactly. Second, a functions.php that loads the parent theme's styles so your site still looks right:

<?php
add_action( 'wp_enqueue_scripts', 'eb_enqueue_parent_styles' );
function eb_enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
}

Put both files in wp-content/themes/your-child-theme, then activate the child theme under Appearance, then Themes. From then on, your snippets go in the child theme's functions.php and your CSS in its style.css, both safe from updates.

Which one should you use?

They work best together. Use CSS for anything visual, functions.php snippets for behaviour and features, and a child theme as the safe home for both. For a one-off colour change, the Customiser is fine. For anything you want to keep and build on, a child theme is worth the small setup. For another side of running WordPress well, our post on website security is worth a read.

If all of this feels like more than you want to take on, that is completely normal, and it is exactly the sort of work we do every day. Contact us and we will customise your WordPress site properly, safely, and without the risk of breaking something live.

Want a website that actually generates enquiries?

Tell us what you need and we will come back with honest advice and a clear quote, no pressure.