Details

1. Making your style your own

By far one of the most frequent requests we get are for small detail-type visual edits — that color should be this color, this button is too close or too far away, this plugin’s sidebar widget looks entirely different than the rest of the sidebar, etc. The good news is that things that are strictly CSS-related (that is, where don’t need to create or change the order of the content) can be easily taken care of in WordPress’ built-in customizer. You can access the customizer by going to your WordPress dashboard, mousing over “Appearance” in your menu and clicking “Customize.”

As of WordPress 4.7, the tab “Additional CSS” has been added by default to the customizer. (It is possible for themes to disable this, but if they’re doing that, you shouldn’t be using them anyway.) This tab allows you to enter in your own styling information, so you can make changes as long as you know the appropriate CSS.

Please note that this section assumes at least some understanding of how to write CSS. CSS stands for Cascading Style Sheets for a reason, and that reason is because you can have multiple styles apply to the same element and they cascade down. CSS looks like this:

.class1 {
    font-size: 30px;
    color: blue;
}

#header {
    font-size: 20px;
    color: red;
}

The bits in front of the curly brackets are called selectors, because they select what you want to modify. Hashtags (#) denote ID attributes, while the periods (.) are class names. The first paragraph in the following example could be identified with .things p, #important, div #important, or a number of other ways, depending on your overall styling goals.

<div class="things">
    <p id="#important" class="important-content">Words here</p>
    <p>Words</p>
</div>

When you’re making style changes, the two things you need to remember are specificity and order. Order literally refers to the order of the styles on the page, meaning that if you have two CSS rules with the same selector, the one that comes last will be used.

p {
    font-size: 10px;
    color: green;
}
p {
    color: blue;
}

This will ensure what we want, assuming everywhere .things is used on the whole site should have black text. Sometimes you want to make larger changes — maybe ALL .important-content should be red, so we should do

.important-content, .things .important-content {
    color: red;
}

just to be on the safe side (using a comma between selectors or groups of selectors means all of the selectors apply the same rule).

2. Bigger changes with child themes

When you have a regular WordPress install, the theme is what defines how your site looks and, in many cases, functions. WordPress has a fairly easy-to-use theming system — there are templates for each type of content and how that content appears (archives, single posts or pages, etc.) — and there’s a big file, functions.php, that includes a lot of the code that makes your theme unique.

Modifying functions.php is pretty easy. Often we see people who just want to make small tweaks find someone in the vast WordPress community online offering up a snippet of code. Take that code, pop it into functions.php, and it works just great.

Until you update your theme. (And yes, you have to update your theme, for security and compatibility reasons.) Because functions.php is part of the theme, it can (and often does) get overwritten when your theme updates, meaning all of your changes get lost.

But not to worry! WordPress offers a solution for that, called Child Themes. A child theme is, at its core, just a folder with a single file (style.css) that tells WordPress to use another theme as the “parent theme,” and the child theme to modify that parent theme. For functions.php, it means you can add a functions.php to your child theme, and WordPress will run both it and the parent theme functions.php. For all other files, if you like, you can offer up version in your child theme of, say, header.php, and it will override the header.php from the parent theme. (This means you really need to make sure you provide the original code that’s required for your theme to work if you’re overriding templates.)

For our purposes, this means you can put your custom code in your child theme functions.php and not worry about it getting overwritten when the parent theme updates. (Though you should check to make sure any updates to the parent theme don’t conflict or mess with your changes.) You can create a child theme manually, or use plugins. We recommend Child Theme Configurator or Child Themify. Of course, you can also ask your friendly neighborhood Technical Penguins, and they’d be glad to help, too.

But! There is a large “but” here! If you’re using a theme that’s already a child theme (this is common with some page-builders, where there’s a parent page-builder theme and then a specific child theme), you cannot create a “grandchild” theme. At that point, you need to be looking at a custom plugin.

3. Custom plugins

A custom plugin is exactly what it sounds like: A plugin that you can use to make all sorts of code edits that will persist through theme updates, and even changing themes. We’ve used them in a number of cases for different things, like inserting affiliate disclaimer text into posts and feed items, or adding a “Read More” button on a blog page where the theme didn’t support it. We do not give detailed descriptions on how to create these (both because there’s really no one-size-fits-all solution depending on what you’re changing, and because you can really break your website if you use these without knowing how everything works), but we do offer it as a service, and it’s pretty cheap. We can also create a custom plugin that would allow you to enter (some) custom code a la functions.php, if you’re already using a child theme you can’t modify, but in a way that will persist through updates