WordPress Child Themes: getting ready for custom scripts, jQuery, and AJAX

Introduction

Although these lessons are not focused on WordPress, I have found the platform to be an excellent place for the novice web developer to start.  The reasons for this are many:

  • WordPress handles much of the “heavy lifting” of the look-and-feel of a new web.  A novice user can easily get the platform installed (see the previous lesson) and then customize things with Themes and Plugins.
  • Although WordPress can be a bit inflexible for the fine detail development we might want to achieve; nevertheless, it’s relatively easy to get around these limitations.
  • There is an enormous support community.  Almost any question a novice developer might have has probably already been answered dozens of times.  Therefore, learning is made much easier from the paths created by the developers who have gone before.

In this lesson, we’ll make some modifications to our basic WordPress site to make it easier to do our development; and to later make web service calls to our backend.

Child Theme

When I first installed WordPress, I used one of the standard themes that ships with the basic install.  I jumped right in and made a number of modifications by creating custom javascript, styles, and modified PHP.  My little test site looked great – until I got the notice that my theme had been updated.  Well of course, I want the latest and greatest and WordPress made it super simple to upgrade – just push the little upgrade button.  Anxious to see what new goodies I had just installed, I went to my site’s first page and …..it was terrible.  All of my customizations were gone!!

If you customize a theme in WordPress and later update the theme, most (all?) of your customizations will disappear.  So how do we prevent that; and prevent the need to re-enter our customizations if we update or change a theme?

Answer:  Create a Child Theme.  Let’s get started with our recipe:

Open your VM (did you create a snapshot after you installed WordPress?  If not, how would be an ideal time because we are likely to make some booboos).

From your VM, navigate to: http://mywordpressweb.local/wp-admin/themes.php and you should see a list of the installed themes on your site.

Open another window pointed to the root of your site: http://mywordpressweb.local

Click here to Toggle Sidebar: Remove Test Page

Click here to Toggle Sidebar: WordPress customizations

Click here to Toggle Sidebar: Standard WordPress style customization

Let’s say we are using the TwentySeventeen theme.  I’m not going to repeat the great instructions on the WordPress site. They explain the “whats and whys” very well.  Instead, I’ll just provide a recipe for what we are doing and lightly touch on the why’s along the way.

  1. Create your child theme directory in your themes folder:  /var/www/wordpressweb/wp-content/themes/twentyseventeen-child
  2. As the instructions state, at a minimum, we need to add two files to the folder:  a style.css and functions.php.  Let’s also add a main.js file.
  3. In our new style.css file, we need to put something like the following header (see the docs for more info):
  4. The documentation will list the minimum information we need in our custom functions.php file, but the following is what we will use (click the image to see full sized):
  5. As you can see, we are referencing our main.js  file that we created as well as the jquery ui files.  We will dig into jQuery and the jQuery UI stuff in a future post; but for now, go to the jQuery Themeroller site and download a full UI theme and extract it into a new subfolder in your child theme folder:  …/wp-content/themes/twentyseventeen-child/jquery-ui-1.22.1.custom
  6. Open wp-admin in your browser and navigate to themes.  You should now see your new child theme.  Activate it

Now that we have a child theme, we can make our customizations there.  Back in the browser window for our sample page, we should see the light blue background for our text.  Press the Ctrl-F5 button to refresh the content and cache.  No change, right?  We are still pulling from the main theme’s customized style.css file.  But again, if we update the theme or otherwise step on our updates, they will be lost.

So let’s say our color preferences lean more for pink than light blue.  Open the new child theme style file:  /var/www/wordpressweb/wp-content/themes/twentyseventeen-child/style.css and after the final “*/” close comment line, enter the following: .entry-content{background-color:pink;}

Save the file and now go back to your main page in the browser and press the Ctrl-F5 to refresh the page and cache — pulling our updated style.css file.  You should see the pink background

Conclusion

In this lesson, we created a child theme for WordPress so that we can easily customize our site’s look and feel and functionality.

Leave a Reply

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