Search the site:

Copyright 2010 - 2019 @ DevriX - All rights reserved.

How to Patch and Tweak Your WordPress Site?

Patch and tweak your WordPress

Most site owners don’t have a team of developers sitting around ready to implement news ideas. If this is your case, you have a few options to chose from:

  • Ask the local kid next door that is good with computers (hint — don’t).
  • Hire a freelancer that will work on a set of requirements for some time.
  • Take on an employer full time (full stack 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.

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 want.

Related Posts:

Understanding How WordPress Works and What You Can 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 as it’s the code that installs your site, creates the database and updates it; it manages the multisite – editing, publishing, managing media, managing plugins, themes, 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.

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, 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 “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 best 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 a person to add such hooks in his/her theme or plugin. So when you’re thinking of making a change, 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 normal people across the globe. They all provide (to a reasonable extent) free support or troubleshooting of the plugin.

WordPress Plugins

However to define a good plan of action, we need to separate the plugins into 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.

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 movies added, and you switch to a new plugin that says it does the same thing, 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.

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, on 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 shouldn’t change the plugin’s files! For the same reason — when the plugin is updated, you will lose all your changes. Again, a solution is to use hooks if they are provided.

If there are no hooks, 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 larger ones come with proper documentation that lets you create “plugins for the plugin.” But obviously, that will require development experience, therefore a freelancer or an agency is probably a good idea.

Thirdly, and the most risky option, is to create a fork of the plugin. This is not recommended and requires a lot of experience. But a hint — you can try it 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

Put it shortly — to modify, using 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 can 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 great 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 to 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 from your new style.cssfile. 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;
}

Perhaps, the red and blue links are not that pretty, but they are 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 of it especially when they’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, the harder the site is to maintain. Experienced developers can use the best methods and write cleaner code that gets the job done without regressions.

If you have a lot of changes you want to make and grow your business, there are very suitable retainer plans at Devris with experienced developers that can manage your site for you to improve your google ranking, user experience and much more.

Leave a Reply

Your email address will not be published. Required fields are marked *