Skip to content

Instantly share code, notes, and snippets.

@xavortm
Last active July 13, 2017 13:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save xavortm/9a9b85ef102edfb9b34f7bf7135736d4 to your computer and use it in GitHub Desktop.
Save xavortm/9a9b85ef102edfb9b34f7bf7135736d4 to your computer and use it in GitHub Desktop.

Probably the bigger percentage of site owners don’t have a team of developers sitting around ready to take any requirement and implement it with the best practices in mind. If this is the case for you too you have a few options to chose from:

  • Ask the local kid next doors that’s good with computers (hint — don’t)
  • Hire a freelancer that will work on a set of requirements for some time
  • Hire an employer full time (fullstack developer)
  • Hire an agency that can deal with the entire range of requirements from marketing, generating new ideas for your site/business, implementing any request and more
  • Do It yourself.

We will look more in depth into the last option here. This means that you will have to understand a little about the way WordPress works, the settings for your hosting, a few tools to work with as well as writing some code.

Don’t worry; we are not going to focus on implementing new features here, just the general idea of patching and tweaking a working theme to make it look as you desire.

Understanding how WordPress works and what can you do with it

There are three main groups of components that make your site work.

  • The WordPress Core — this is the zip you download from wordpress.org containing the whole CMS
  • The set of plugins you have installed
  • The theme you’re using

Let’s look at each one of them and see what’s their role.

The WordPress Core

It makes everything run. It is the code that installs your site, creates the database and updates it; it manages the multisite, it is everything you see on a fresh new install in the dashboard. Editing, publishing, managing media, managing plugins, themes, all settings, and comments.

WordPress Dashboard

The WordPress core is also the thing you don’t want to edit. Do not alter the core files. Ever. Unless of course, you’re contributing to the core. The reason that modifying them is bad is that the moment you update WordPress, you will lose your changes. And the chances are that if you don’t have a strong background in programming, you will be making the wrong changes anyways. So just don’t do it.

What can be done instead depends on what is the reason you have to edit them. That can be:

  • You’ve found an error from your error log or x-debug
  • You want to change the output of a particular function
  • You want to change a string or remove an element you don’t like

Or something else really, there can be many more reasons, but the fact that it’s the wrong place to do it remains. WordPress is an excellent system for developers as it provides a ton of hooks to insert your code.

Hooks allow developers to modify the work of the core, the plugins or themes. They are the places where you can to “hook in” to make your modifications. Here is an example of a hook:

function project_enqueue_scripts() {
    wp_enqueue_script( 'custom-js', 'custom.js', false );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_script' );

The hook here is “wp_enqueue_scripts.” It will let you insert your custom javascript (or CSS) file in the header. It is the better way to do it as now you allow any other plugin or theme to modify the way you include the asset.

Example — a plugin that minifies your assets will be able to loop through all files and bundle them or move them to a different place in the document. If you were to add this in the `header.php' file of the theme, however, this would be impossible, and refactoring of the code would be necessary.

There are many hooks from the WordPress core,. These hooks don't appear magically, they are added by the WordPress Core contributors, and it’s possible for every person to add such hooks in his/her theme or plugin. So when you think of making a change in the way something works, first look for this.

The WordPress plugins

They act as an extension to the WordPress core. hint - there is a hook to the moment when WordPress loads them. The bigger part of the WordPress plugins is hosted at the wordpress.org plugins repository with over 500,000 items ready to download for free. And all of them are made by regular people across the globe. They all provide (to a reasonable extent) free support for the usage or troubleshooting of the plugin.

WordPress Plugins

But to give a good plan of action, we need to separate the plugins a little in the type of work they do. First, we have plugins that let you create/modify your content in a different way — custom post types, new meta fields, custom commenting systems and more. These plugins are hard to replace for a simple reason.

Let’s say you’ve installed a plugin that let you add a star-based review for movies on your site. If you have, for example, 100 of them added already, and you switch to a new plugin that says it does the same, but better, you will lose these 100 movies.

And this will happen simply because the two plugins will define, store and edit the movies in very different ways. And this is one of the reasons that proper testing beforehand is necessary for you.

Tip: Setup a local or staging testing environment with the same database and media files from your public one. Have all themes, plugins, and changes that you experiment with there, safely separated from your production (what your visitors see) site.

Server setup

Shortcode plugins fall into the same category just because they are invoked by a unique identifier like [unique-named-gallery images='1,2,3,4,5']. When the plugin is activated, this will result in some custom gallery view, but the moment you deactivate it, in every single article on your site your visitors will see the text above instead of the images.

But what happens when you like the plugin, but there’s an extra feature that you need? Well, just like with the WordPress core, you don’t write in the plugin's files! For the same reason — when the plugin is updated, you will lose all your changes. A solution is once again to use hooks if such are provided.

If there are no hooks to use, then you have three choices — one is to contact the plugin developers and request that feature. They may or might not implement it, so this is not ideal when you’re in a hurry.

The second option is to create an extension to the plugin. The bigger ones come with a proper documentation that let you create “plugins for the plugin.” But obviously, that will require more development experience for which a freelancer or an agency would do a better job.

Third and most risky is to create a fork of the plugin. This is not very recommended and requires more experience to see when it’s a good fit. But to give some hints — you can try that on older and smaller plugins that are no longer in active development.

A fork means to duplicate the plugin, change the name and edit the code directly there. Doing that will stop you from getting updates (or support) from the original author, so make sure you understand the risk well.

WordPress Plugins Preview

If we can put it shortly — to modify with a custom code the way a plugin works is probably the hardest of the three. The WordPress core comes with a lot of hooks that will help you out, and the themes are mostly a way to present the information, not to modify it.

WordPress Themes

The themes are the ones with probably the most questions about how to modify them. This is because they are responsible for the look of your site and most people want to change some colors, positions, font sizes, images and so on.

And there is good news! WordPress Themes come with an elegant solution — child themes. Every single theme can have a child theme, and they are your best friend when you want to make your theme suit your needs better.

Always use a child theme, they are there to solve the problem of modifying the core files from above — once you update your theme, your child theme will remain working, and you won’t lose your changes. Always edit a child theme.

But how does it work?

A child theme inherits all stylings and functionality of its parent theme. Let’s take Twenty Seventeen for example here. If you want to change the color of the menu, you can create a new folder in your themes/ directory and name it twentyseventeen-child for example.

Then you will need to create a file named style.css with the following content inside it:

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://example.com/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-seventeen-child
*/

Note * — You need the have the proper “Template” value. It is the directory name of your parent theme. This will find and extend it.

Now you will also need to add functions.php file with the following content:

<?php
function my_theme_enqueue_styles() {

        // This is 'twentyseventeen-style' for the Twenty Seventeen theme.
        $parent_style = 'parent-style'; 

        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 ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

This will let you use the same stylings as your parent theme and build on top of them as you like from your new style.css file. You can read more about all options you have for your child themes from the WordPress Codex.

So how does editing the look of your site happen? First, you have to identify the problem/goal. Let’s work with examples:

Change the styles of an element. We will modify the color of the links in the header. From your browser (Chrome preferably) right-click on the menu item and press “Inspect element” (last).

A new panel will open with the complete markup of the site as well as the styles applied to a given element. On the right, you will see the selector in use for this element. If there’s none, then you can target it on your own. Here is an example for twenty seventeen: main-navigation a .

So to style the links in the main menu, in your style.css file add

.main-navigation a {
        color: blue;
}

Now your standard menu links will be blue! This is the essence of modifying the view of your theme. You find the element you want to change, inspect it to see the way to reach it and add your styles in your style.css file.

But we have one more element to design — the current page. Just inspect it, and you will see the selectors for it:

How to find a class

In our case that is .navigation-top .current-menu-item > a, .navigation-top .current_page_item > a (two of them, see the comma). So in your style.css add this as well:

.navigation-top .current-menu-item > a,
.navigation-top .current_page_item > a {
        color: red;
}

I believe we both agree that red and blue links are not that pretty, but it’s good for illustrating the changes. Now you will have your current page red and all others blue.

Changes result

CSS can be easy for quick changes, you shouldn’t be scared from it especially when there’re so many answers for general questions in Stackoverflow or the WordPress support forums.

It is important however to keep in mind that the more patching you do like this, the harder the site can become to maintain in the future. A more experienced developers can use the best methods and write cleaner code that gets the job done without regressions, so if you value your business you should really look into one.

If you have a lot of changes you want to make and grow your business in parallel, there are very suitable retainer plans to try out — developers with years of experience will be managing your site by updating, modifying and implementing any new features that you request together with suggestions that can improve even more your google ranking, user experience and much more.

— CTA to retainers —

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment