Web Design II

Class 13: Child-Theme

Topics

Child-Theme
Plugins
Class 13 Divi Child Site (child-theme creation) Lab

Hurray for class 13!

Child-Theme

WordPress CSS:

You can directly change the CSS and PHP code in the Appearance>Editor area of the Dashboard. This is not suggested because you could potentially break your theme or when updated your theme will overwrite your work. Instead it is best practice to produce a child theme.

For now if you want to make an overall change to the look of the site you can just use the CSS Editor in WordPress.

Child Theme:

A child theme is a theme that is run AFTER you main theme. Using a custom functions.php you tell WordPress to load your theme CSS and then the custom child theme CSS. You use the child theme style.css to enter in your own custom styles to apply on top of the parent theme style.

Steps to create a child theme:

1. Child theme folder and files: Create a folder named [yourThemeName]-child in yourWordpressFolder>app>wp-content>themes.

Create two files in the child theme folder, style.css & functions.php.

. Enter appropriate CSS header into the style.css: Generally; /*
Theme Name: [themeParentName] Child
Theme URI: [themeParentSiteOrigin]
Description: [themeParentName] Child Theme
Author: [yourName]
Author URI: http://[yourSite].com
Template: [themeParentName]
Version: 1.0.0
*/; Specific example; /*

Theme Name: Divi Child

Theme URI: elegantthemes.com

Description: Divi Child Theme

Author: Jon Cone

Author URI: https://teachmecone.com

Template: Divi

Version: 1.0.0

*/

3. Enter appropriate PHP code into the functions.php: Generally; <?php

add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );

function my_theme_enqueue_styles() {

wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );}; Specific example; <?php

add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );

function my_theme_enqueue_styles() {

wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );}

3. Activate child theme: In the Dashboard navigate Appearance>Theme.; Select your child theme and activate.

Plugins

WordPress Plugin:

Plugins are collections of code that add features and functionality to your website. They can be as simple as just removing some text, or robust as allowing you to make paypal transactions. These are written in PHP but usually include HTML, CSS, and JavaScript. They are a great way to add something that is not included in your theme.

WordPress development complexity:

WordPress development gets more and more difficult the deeper you dive into it. Just creating a site with downloaded themes and plugins are obviously the simplest. Child-themes require a bit of PHP and CSS. Creating your own custom theme utilizes a lot of PHP, HTML, and CSS. It is mostly about formatting your HTML and CSS using PHP. Plugins may be simpler than theme development if you are creating something simple or may be very complex if you are creating something like a web page builder.

standard theme and plugin application
child-theme application
theme development
plugin development

Plugin File/Folder Structure:

Plugins consist of the main/root plugin folder with subfolders and files. Usually something like this:

plugin main/root folder (inside /wp-content/plugins)
- plugin header file (information about the plugin)
- includes folder (holds any supporting files)
  - plugin functions file (actually does the “work”)
  - supporting files
- CSS folder (any CSS will go in here)
  - CSS files
- JS folder (holds any JavaScript)
  - JavaScript files

Plugin file and folder structure example

<?php
/*
Plugin Name: My Social Media Plugin
Description: This will add my social media to the footer of my site
Author: me
*/

Plugin file header example

Plugin Code Structure:

Plugins work much like event listeners in that they a collection of code that is run when certain conditions are met (usually when something happens).

Plugins consist of a hook and functions:

hook (how the plugin interacts with WordPress and tells the functions when to run)
- hooks come in two flavors:
  - add_actions (allows you to add data or change how WordPress functions and are run when at a specific point in WordPress execution)
  - add_filters (changes data during WordPress execution usually taking data in, modifying it, and returning it)
  - You can see documentation on the differences here.
functions (the meat of what the plugin does)
- These are called from the hook and usually involve loops to run through data.

<?php
add_action(‘wp_footer’, ‘smp_Add_Text’);
function smp_Add_Text()
{
echo “<div id=’socMed’>
<p>After the footer is loaded, my text is added!</p>
<p>
<a href=’#’><i class=’fa fa-facebook-official’ style=’font-size:36px’></i></a>
<a href=’#’><i class=’fa fa-instagram’ style=’font-size:36px’></i></a>
<a href=’#’><i class=’fa fa-twitter-square’ style=’font-size:36px’></i></a>
<a href=’#’><i class=’fa fa-youtube-square’ style=’font-size:36px’></i></a>
</p> 
</div> 
“;
}

You can see the hook, add_action(‘wp_footer’, ‘smp_Add_Text’); and function, function smp_Add_Text() { }

Class 13 Divi Child Site (child-theme creation) Lab

Divi Child Site (child-theme creation) Lab

In a process similar to creating your own theme you will develop a child-theme. This theme will apply on top of the Divi theme to allow for further customization.

You will be graded on the following:

Lab Requirements
- Techniques and processes covered in the instructional material is followed and implemented.
Creativity & Craftsmanship
- Excellent design choices, novel & appealing, and solid clean caliber work.

Resources:

Assignment Video Tutorials: You may watch these tutorial videos below to help you complete your assignment.
Assignment Lab Materials: You may use what you produced int he previous lab.

Lab Tutorial Slideshow

This tutorial will cover Divi child theme creation.

Lab Introduction

Divi Child Site (child theme creation) Lab

Introduction

You have a complete finished page using the Divi theme. This theme pretty much as all the options one could want but what if you wanted something that it doesn't have and is not available via a plugin? The answer is you create a child theme and/or plugin. These will run after the primary theme but allow you to add what you would like without interfering with the theme.

Click on the > to start

You may just use what you created in the last lab as the starting point for this lab.

Child Theme Creation

Divi Child Site (child theme creation) Lab

Child Theme File/Folder Structure

Instructions

Creating a child theme is actually very similar to creating a theme but a bit simpler. First we need to create a folder and some files.
Navigate to your site's theme folders. In Local right-click on the site name and select Show Folder. From there navigate to siteName>app>public>wp-content>themes.
Create a folder inside called "Divi-child".
Open Microsoft Visual Studio Code. Click and drag the Divi-child folder you just created into the program to load the folder location. It will appear in a left panel.
Press the New File button to create a new file. Save this document as style.css.
Press the New File button to create a new file. Save this document as functions.php.
The bare bones of the child theme is now there.

Functions.php and Style.css

Divi Child Site (child theme creation) Lab

Instructions

Like creating a theme a functions.php file must be coded to load in our files (in this case just the stylesheet).
Open the functions.php and enter the following code:
   <?php
      add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
      function my_theme_enqueue_styles() {
         wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );}
Open the style.css and enter the following code:
   /*
   Theme Name: Divi Child
   Theme URI: elegantthemes.com
   Description: Divi Child Theme
   Author: Your Name
   Author URI: http://yoursite.com
   Template: Divi
   Version: 1.0.0
   */
This is most basic start of the child theme.

functions.php


<?php
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

function my_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');}

style.css


/*
Theme Name: Divi Child
Theme URI: elegantthemes.com
Description: Divi Child Theme
Author: Jon Cone
Author URI: teachmecone.flywheelsites.com
Template: Divi
Version: 1.0.0
*/

Activate Child Theme

Divi Child Site (child theme creation) Lab

Activated Child Theme

Instructions

Now that the child theme has the necessary elements it can be activated, customized, and previewed.
Open Local, start the site, and log in as admin.
In the Dashboard navigate to Appearance>Themes. Activate Divi-child that you just created.
Preview your site by pressing on the site name at the top-left of the window. You should see no difference in the site.

Child Theme CSS

Divi Child Site (child theme creation) Lab

Site Created in Local


/*
Theme Name: Divi Child
Theme URI: elegantthemes.com
Description: Divi Child Theme
Author: Jon Cone
Author URI: teachmecone.flywheelsites.com
Template: Divi
Version: 1.0.0
*/

<!--Your CSS rules may differ. Just experiment with it-->
body {
    background-color:black;}
p {
    color:red;}
div.et_pb_section {
    background-color:gray;
}
.et_pb_text_4 > div:nth-child(1) > h2:nth-child(1) > span:nth-child(1)
{
    font-size:4em;
}

Instructions

You may use the style.css document of the child theme to apply any custom css to your site.
In Visual Studio Code open style.css from the child theme folder you created.
You may use any selectors you wish but you may find that you are competing with classes that override tag names like p, h1, li, a, etc. To make more specific selectors you may use the browser web developer tools.
On the front-end (what the user sees) right-click over an element and select Inspect or Inspect Element from the popup. This will open the inspector panel with the html highlighted.
Right-click on the element in the inspector panel and select Copy>Copy selector or Copy>CSS Selector.
Back in Visual Studio Code paste what you copied (ctrl + v or cmd + v). A very specific selector will be entered. You may need to adjust it (remove or add classes, id's, or others).
You may add as many declarations onto this selector to create your CSS rule.
Create at least three CSS rules.

Plugin Creation

Divi Child Site (child theme creation) Lab

File/Folder Structure Workspace in Visual Studio Code

Instructions

The child theme is appropriate for apply CSS to tweak the design of the site. If you want to add, remove, or alter content you should use a plugin. Like the child theme we need to create a shell of folders and files to make our plugin.
In Local right-click on the site name and select Show Folder. Navigate to yourSiteName/app/public/wp-content/plugins. We will create an alert plugin inside here.
Create a folder called "my-alert-plugin".
Open Microsoft Visual Studio Code (if it is not already open). Click and drag the my-alert-plugin folder you just created into Visual Studio Code.
In Visual studio code create a folder by pressing the Create Folder button. Name it "css".
Create another folder by pressing the Create Folder button again. Name it "includes".
You now have the folder structure. Let's add the files.
Inside the master folder my-alert-plugin folder press the Create File button. Name this file "my-alert-plugin.php".
Inside the css folder press the Create File button. Name this file "style.css".
Inside the includes folder press the Create File button. Name this file "my-alert-plugin-functions.php".
We now have the shell of the plugin that we can build in.

Plugin Heading

Divi Child Site (child theme creation) Lab

my-alert-plugin.php


<?php
/*
Plugin Name: My Alert Plugin
Description: This will add an alert at the top of the page
Author: Your Name
*/

require_once plugin_dir_path(__FILE__) . 'includes/my-alert-plugin-functions.php';

Instructions

Wordpress gets its information about the plugin much like it does a theme, with a heading. We will create a simple one.
In Visual Studio Code open my-alert-plugin.php.
Type:
   <?php
   /*
   Plugin Name: My Alert Plugin
   Description: This will add an alert at the top of the page
   Author: Your Name
   */
This information will be readable inside Wordpress.
This PHP document will just be used for information about the plugin. We will use my-alert-plugin-functions.php document to do the actual work. In order for this to happen we need to tell it to run. That is added to this document.
Type:
require_once plugin_dir_path(__FILE__) . 'includes/my-alert-plugin-functions.php';
Save your file.
Inside the Dashboard navigate to Plugins.
You should see your plugin installed but not activated. Click on Activate underneath its name.

Plugin Function

Divi Child Site (child theme creation) Lab

my-alert-plugin.php



<?php

add_action('wp_head', 'map_add_text');

function map_add_text()
{
    ?>
    <h1 class="currentStatus">Closed for corona</h1>
    <?php
}

wp_enqueue_style('pluginCSS', plugins_url('../css/style.css', __FILE__));

Instructions

The plugin is activated and running but it isn't doing anything. Let's write the code in our function that will actually do the behavior we are looking for.
In Visual Studio Code open my-alert-plugin-functions.php.
Type
   <?php
   add_action('wp_head', 'map_add_text');
   function map_add_text()
   {
      ?>
      <h1 class="currentStatus">closed for corona</h1>
      <?php
   }
This will add the message in the header section of the site. We need to format it though.
Type
wp_enqueue_style( 'pluginCSS', plugins_url('../css/style.css', __FILE__) );
This will connect the stylesheet of the plugin so we can apply CSS to our message.

Plugin Style

Divi Child Site (child theme creation) Lab

my-alert-plugin.php


<!--your css code may differ. Format it it however you like-->
.currentStatus {
    padding: 5px;
    text-align: center;
    background-color: red;
    color: white;
    font-size: 1.5em;}

Instructions

The message that the plugin is applying to the site needs to be formatted.
In Visual Studio Code open style.css.
Enter
   .currentStatus {
      padding: 5px;
      text-align: center;
      color: white;
      background-color: red;
      font-size: 1.5em;
   }
The message should be properly formatted now.
Preview the site to make sure it is working.
You can create a much more robust plugin using this same process.

Final Review and Submission

Divi Child Site (child theme creation) Lab

Instructions

You may add whatever you like to the child-theme and plugin.
When you are happy with your site you can export it for submission.
In Local right-click on the site name in the list on the left. In the popup choose Export. Don't enter anything in the window. Press Export. In the popup choose where you want to export and export.
Now, log into Blackboard (Here) and click on this course. Inside the course, select Class 13, then the Class 13: Divi Child Site (child theme creation) Lab folder, then the assignment with the same name. Finally, Attach the zipped file.

Lab Synopsis

Reflection

You have finished the Divi Child Theme Site lab series! You now know the basics of Divi, child themes, and plugins. You have a better grasp of CMS in general. The last thing in this course is to create your own site. It may be whatever you like.

If you run into any issues please do not hesitate to contact me:

jcone@cecil.edu
(240) 466-1996

Wait! Before you go!

Did you remember to?

Read through this webpage
Watch the videos
Submit Class 13 Divi Child Site (child-theme creation) Lab on Blackboard