WordPress Advanced Topics

by | Mar 18, 2017

(What Are We Not Telling You?)

In this last tutorial in this series we will address these WordPress Advanced Topics:

  • How To Create A Child Theme
  • How To Customize CSS (Including Divi)
  • Using The Divi Visual Editor

We will not go into any real detail here but we will briefly introduce these topics.  If these are of special interest to our customers we can cover them in more detail in later articles.

How To Create A Child Theme

What is a child theme?  Why would you want to create one?  How do you create one?  Rather than explain this here, please refer to this article that covers all the details:  https://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial

Please note that it is very important to keep your website theme, plug-ins and WordPress itself updated to the latest versions to benefit from the latest bug features and security enhancements.

How To Verify You Are Using A Child Theme

As shown in the accompanying screenshot, if you look in Appearance–>Themes in your dashboard it should show that you are using the child theme.

WordPress Child In Dashboard

An Example Of What Would Be Lost

If we were not using a child theme, this custom text in the footer of our website would be lost as this is stored in the footer.php file.  If we update the Divi theme this file would be replaced with the new version from Elegant Themes.

Customized Page Footer

How To Customize CSS (Including Divi)

This is a very advanced topic and this level of WordPress tweaking is probably best left to Persson Technologies. This can get very complicated very quickly but we will cover the basics here.  For more details there is a CSS tutorial here: https://www.w3schools.com/css/css_intro.asp

In the sections below we will cover two common methods used to customize objects using CSS.

Adding CSS Names In Divi

If you want to easily add CSS for an item on a Divi page you can use the CSS settings in Divi to add an ID or a class to any items.  You would use an ID if you only want your CSS entry to affect one item.  You would use a class if you wanted your CSS entry to affect all the items on your page or perhaps across your entire site.  Let’s say for instance you wanted to easily modify the color or size of all dividers on one page.  That is one example of how this could be used.  Of course you would not use the names I have provided here.  Typically CSS objects are named using all lower case letters separated with dashes as shown here.

If you need to add some CSS for an item buried deep within the Divi theme you will need to view the web page code to discover the name of the object.  In one of the images accompanying this text we are using the inspect feature in Chrome to find the object name for the footer at the bottom of the page.  This same footer appears at the bottom of each page on the website.

The other image provided here shows the CSS entry that adds the green gradient to the footer.  This green gradient affect can be viewed in a screenshot provided elsewhere in this blog entry.

Finding Footer Bottom Inspect
Footer Bottom CSS

Using The Divi Visual Editor

Earlier in this tutorial series we covered the basics of how to use the Divi Builder by adding sections to the page, rows to the sections, and modules to the rows.  To tweak each element on a page you would need to locate and open that item to access the settings.  Once you open the control panel for that item you cannot view anything else on the web page.

Starting with the Divi theme version 3.0 (and Divi Builder 2.0) there is now a Visual Builder that makes it possible to see the entire web page at once and tweak anything on the page!  There are more details here: https://www.elegantthemes.com/blog/theme-releases/divi-3)

Do we use this at Persson Technologies?  As of this date (3-18-2017) we use it after the page is built and we are tweaking the page.  It is very useful to be able to view the entire page at once and fine tune the spacing between different items or quickly locate and fix typos.

Are there things that can go wrong?  One of the most dangerous scenarios to avoid as of this writing is using the Visual Builder in preview mode.  When you are previewing the page it is possible to enter the Visual Editor (we think this is a bug).  After you have entered all your changes and saved them if you exit the preview mode all your changes will be lost!  If you have more than one session of the Visual Editor open for the same page, the last version in which you save your changes will become the “real” version that is written to the database.  Between these two items we have lost a great deal of time – it is easy to make these mistakes.  Also it is worth noting that the spacing between items is sometimes not accurately reflected in the Visual Editor.  It is therefore useful to open the web page in another browser to view the changes as you are tweaking the spacing in the Visual Editor.

Overall the Visual Editor is an awesome time-saving feature that we love!

Here is an index to all the articles in this tutorial series:

 

  1. Introduction to WordPress Part One - WordPress Basics https://perssontechnologies.com/wordpress-basics/
  2. Introduction to WordPress Part Two - WordPress Themes, Plug-ins, and Updates https://perssontechnologies.com/wordpress-themes-plug-ins-and-updates/
  3. Introduction to WordPress Part Three - Introduction To Divi https://perssontechnologies.com/introduction-to-divi/
  4. Introduction to WordPress Part Four - How To Use The Included Divi Modules https://perssontechnologies.com/how-to-use-the-included-divi-modules/
  5. Introduction to WordPress Part Five - How To Use Divi Tweaks https://perssontechnologies.com/how-to-use-divi-tweaks/
  6. Introduction to WordPress Part Six - A Brief Introduction to Search Engine Optimization https://perssontechnologies.com/a-brief-introduction-to-search-engine-optimization/
  7. Introduction to WordPress Part Seven - WordPress Advanced Topics https://perssontechnologies.com/wordpress-advanced-topics/