Creating basic WordPress child theme (using Divi)

0
votes

I'm trying to create a very basic WordPress child theme under the Divi theme. I'm just doing the simple steps to be sure the basic structure is correct, but I'm not seeing any styling take place.

I created a new dir under themes called divi-child and put three files in it: category.php, style.css and functions.php.

For the category.php what I did was made a copy of index.php and named it category.php. I made a slight change at the top just to put in one h1 tag for testing. Here's an excerpt of the category.php:

<?php get_header(); ?>
<h1 id="styletest">Marker Text Test</h1>
<div id="main-content">
.... rest of original index.php

And here is style.css:

/*
Theme Name: divi-child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Description: Child theme for the Divi theme
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Template: Divi
Version: 1.0.1
*/

#styletest {
    background: green;
}

and here is functions.php:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'divi-style'; // This is 'divi-style' for the Divi theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'divi-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' );
?>

I can see the test h1 text on my category page, but it is not styled with a green background so my child style file isn't being read. I did activate the new child theme. Please advise. My URL where you can see for yourself is gloudle.com (just go to a post and select a category in the sidebar). Thanks!!

1
wordpress
I see the green background s1.postimg.org/7f55md29yn/gloudle1.png – mmm
That is strange... hmmm... that is 'good'... but I don't see the green background myself.. have purged cache too.. any ideas? – Bert McLees
Turns out this seems to be an issue with Chrome specifically. I had to open dev tools, and then right click on browser refresh, and select "empty cache and hard reload". So.. I was on the right track with iit being a cache issue. That said, can anybody with child theme and Chrome experience speak to whether I will have to do this for each style.css change? Thanks – Bert McLees

1 Answers

0
votes

Just so you don't hassle with this you Can use Divi Child theme builder I used it myself on many occasions. Hope it helps

So as per review saying that I didn't answer the question sufficiently, I will elaborate just to make the answer complete.

  1. Create a directory called divi-child-theme under wp-content/themes/
  2. In this folder you need a few files I am using the files the tools generates to save time but it is the full code none the less

a) style.css which contains the following code 

/*---------------------------------------------------------------------------------

 Theme Name:   Divi Child Theme
 Theme URI:    
 Description:  
 Author:       
 Author URI:   
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

b) login-editor.php this is not needed in themes generally but it is good for divi when you want to edit the login screen. The code you need in this file is

<?php

if (!defined('ABSPATH')) die();

// Login Editor
function ds_register_login_editor($wp_customize) {

    // New Login Editor Panel
    $wp_customize->add_panel( 'ds_login_editor_panel', array(
        'priority'       => 30,
        'capability'     => 'edit_theme_options',
        'title'          => __('Login Editor', login_editor_title),
        'description'    => __('Customize the login of your website.', login_editor_title),
    ));

    // New Sections
    $wp_customize->add_section('ds_login_logo_section', array(
        'priority' => 5,
        'title' => __('Logo', login_editor_title),
        'panel'  => 'ds_login_editor_panel',
    ));

    $wp_customize->add_section('ds_login_text_section', array(
        'priority' => 10,
        'title' => __('Text Options', login_editor_title),
        'panel'  => 'ds_login_editor_panel',
    ));

    $wp_customize->add_section('ds_login_background_section', array(
        'priority' => 15,
        'title' => __('Background', login_editor_title),
        'panel'  => 'ds_login_editor_panel',
    ));

    $wp_customize->add_section('ds_login_form_bg_section', array(
        'priority' => 20,
        'title' => __('Form Background', login_editor_title),
        'panel'  => 'ds_login_editor_panel',
    ));

    $wp_customize->add_section('ds_login_form_section', array(
        'priority' => 25,
        'title' => __('Form Style', login_editor_title),
        'panel'  => 'ds_login_editor_panel',
    ));

    $wp_customize->add_section('ds_login_field_section', array(
        'priority' => 30,
        'title' => __('Fields Style', login_editor_title),
        'panel'  => 'ds_login_editor_panel',
    ));

    $wp_customize->add_section('ds_login_button_section', array(
        'priority' => 35,
        'title' => __('Edit Button', login_editor_title),
        'panel'  => 'ds_login_editor_panel',
    ));

    $wp_customize->add_section('ds_login_advanced_section', array(
        'priority' => 40,
        'title' => __('Custom CSS', login_editor_title),

        'panel'  => 'ds_login_editor_panel',

    ));

    // LOGO OPTIONS

    $wp_customize->add_setting('ds_login_logo', array(

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'ds_login_logo', array(

        'label' => __('Login Logo', login_editor_title),

        'section' => 'ds_login_logo_section',

        'priority' => 5,

        'settings' => 'ds_login_logo'

    )));



    $wp_customize->add_setting('ds_login_logo_width', array(

        'default' => '84px',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control('ds_login_logo_width', array(

        'label' => __('Logo Width', login_editor_title),

        'section' => 'ds_login_logo_section',

        'priority' => 10,

        'settings' => 'ds_login_logo_width'

    ));



    $wp_customize->add_setting('ds_login_logo_height', array(

        'default' => '84px',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control('ds_login_logo_height', array(

        'label' => __('Logo Height', login_editor_title),

        'section' => 'ds_login_logo_section',

        'priority' => 15,

        'settings' => 'ds_login_logo_height'

    ));



    $wp_customize->add_setting('ds_login_logo_padding', array(

        'default' => '5px',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control('ds_login_logo_padding', array(

        'label' => __('Padding Bottom', login_editor_title),

        'section' => 'ds_login_logo_section',

        'priority' => 20,

        'settings' => 'ds_login_logo_padding'

    ));



    $wp_customize->add_setting('ds_login_bg_image', array(

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));

    // BACKGROUND IMAGE EDITS

    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'ds_login_bg_image', array(

        'label' => __('Background Image', login_editor_title),

        'section' => 'ds_login_background_section',

        'priority' => 5,

        'settings' => 'ds_login_bg_image'

    )));



    $wp_customize->add_setting('ds_login_bg_color', array(

        'default' => '#F1F1F1',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'ds_login_bg_color', array(

        'label' => __('Background Color', login_editor_title),

        'section' => 'ds_login_background_section',

        'priority' => 10,

        'settings' => 'ds_login_bg_color'

    )));



    $wp_customize->add_setting('ds_login_bg_size', array(

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control('ds_login_bg_size', array(

        'label' => __('Background Size', login_editor_title),

        'section' => 'ds_login_background_section',

        'priority' => 15,

        'settings' => 'ds_login_bg_size'

    ));

    // FORM BACKGROUND EDITS

    $wp_customize->add_setting('ds_login_form_bg_image', array(

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'ds_login_form_bg_image', array(

        'label' => __('Background Image', login_editor_title),

        'section' => 'ds_login_form_bg_section',

        'priority' => 5,

        'settings' => 'ds_login_form_bg_image'

    )));



    $wp_customize->add_setting('ds_login_form_bg_color', array(

        'default' => '#FFF',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'ds_login_form_bg_color', array(

        'label' => __('Background Color', login_editor_title),

        'section' => 'ds_login_form_bg_section',

        'priority' => 10,

        'settings' => 'ds_login_form_bg_color'

    )));



    $wp_customize->add_setting('ds_login_form_width', array(

        'default' => '320px',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control('ds_login_form_width', array(

        'label' => __('Width', login_editor_title),

        'section' => 'ds_login_form_section',

        'priority' => 15,

        'settings' => 'ds_login_form_width'

    ));



    $wp_customize->add_setting('ds_login_form_height', array(

        'default' => '194px',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control('ds_login_form_height', array(

        'label' => __('Height', login_editor_title),

        'section' => 'ds_login_form_section',

        'priority' => 20,

        'settings' => 'ds_login_form_height'

    ));



    $wp_customize->add_setting('ds_login_form_padding', array(

        'default' => '26px 24px 46px',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control('ds_login_form_padding', array(

        'label' => __('Padding', login_editor_title),

        'section' => 'ds_login_form_section',

        'priority' => 25,

        'settings' => 'ds_login_form_padding'

    ));

    // FORM FIELDS

    $wp_customize->add_setting('ds_login_field_width', array(

        'default' => '100%',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control('ds_login_field_width', array(

        'label' => __('Input Field Width', login_editor_title),

        'section' => 'ds_login_field_section',

        'priority' => 5,

        'settings' => 'ds_login_field_width'

    ));



    $wp_customize->add_setting('ds_login_field_margin', array(

        'default' => '2px 6px 16px 0px',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control('ds_login_field_margin', array(

        'label' => __('Input Field Margin', login_editor_title),

        'section' => 'ds_login_field_section',

        'priority' => 10,

        'settings' => 'ds_login_field_margin'

    ));



    $wp_customize->add_setting('ds_login_field_bg', array(

        'default' => '#FFF',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'ds_login_field_bg', array(

        'label' => __('Input Field Background', login_editor_title),

        'section' => 'ds_login_field_section',

        'priority' => 15,

        'settings' => 'ds_login_field_bg'

    )));



    $wp_customize->add_setting('ds_login_field_color', array(

        'default' => '#333',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'ds_login_field_color', array(

        'label' => __('Input Field Color', login_editor_title),

        'section' => 'ds_login_field_section',

        'priority' => 20,

        'settings' => 'ds_login_field_color'

    )));



    $wp_customize->add_setting('ds_login_field_label', array(

        'default' => '#777',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'ds_login_field_label', array(

        'label' => __('Label Color', login_editor_title),

        'section' => 'ds_login_field_section',

        'priority' => 25,

        'settings' => 'ds_login_field_label'

    )));

    // BUTTON STYLES

    $wp_customize->add_setting('ds_login_button_bg', array(

        'default' => '#2EA2CC',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'ds_login_button_bg', array(

        'label' => __('Button Background', login_editor_title),

        'section' => 'ds_login_button_section',

        'priority' => 5,

        'settings' => 'ds_login_button_bg'

    )));



    $wp_customize->add_setting('ds_login_button_border', array(

        'default' => '#0074A2',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'ds_login_button_border', array(

        'label' => __('Button Border', login_editor_title),

        'section' => 'ds_login_button_section',

        'priority' => 10,

        'settings' => 'ds_login_button_border'

    )));



    $wp_customize->add_setting('ds_login_button_hover_bg', array(

        'default' => '#1E8CBE',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'ds_login_button_hover_bg', array(

        'label' => __('Button Background (Hover)', login_editor_title),

        'section' => 'ds_login_button_section',

        'priority' => 15,

        'settings' => 'ds_login_button_hover_bg'

    )));



    $wp_customize->add_setting('ds_login_button_hover_border', array(

        'default' => '#0074A2',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'ds_login_button_hover_border', array(

        'label' => __('Button Border (Hover)', login_editor_title),

        'section' => 'ds_login_button_section',

        'priority' => 20,

        'settings' => 'ds_login_button_hover_border'

    )));



    $wp_customize->add_setting('ds_login_button_shadow', array(

        'default' => '#78C8E6',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'ds_login_button_shadow', array(

        'label' => __('Button Box Shadow', login_editor_title),

        'section' => 'ds_login_button_section',

        'priority' => 25,

        'settings' => 'ds_login_button_shadow'

    )));



    $wp_customize->add_setting('ds_login_button_color', array(

        'default' => '#FFF',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'ds_login_button_color', array(

        'label' => __('Button Color', login_editor_title),

        'section' => 'ds_login_button_section',

        'priority' => 30,

        'settings' => 'ds_login_button_color'

    )));

    // CUSTOM CSS

    $wp_customize->add_setting('ds_login_custom_css', array(

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control('ds_login_custom_css', array(

        'label' => __('Not found the option you wanted? Add your own CSS here...', login_editor_title),

        'type' => 'textarea',

        'section' => 'ds_login_advanced_section',

        'priority' => 5,

        'settings' => 'ds_login_custom_css'

    ));



    $wp_customize->add_setting('ds_login_text_color', array(

        'default' => '#999',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'ds_login_text_color', array(

        'label' => __('Text Color', login_editor_title),

        'section' => 'ds_login_text_section',

        'priority' => 5,

        'settings' => 'ds_login_text_color'

    )));



    $wp_customize->add_setting('ds_login_text_color_hover', array(

        'default' => '#2EA2CC',

        'type' => 'option',

        'capability' => 'edit_theme_options',

    ));



    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'ds_login_text_color_hover', array(

        'label' => __('Text Color (Hover)', login_editor_title),

        'section' => 'ds_login_text_section',

        'priority' => 10,

        'settings' => 'ds_login_text_color_hover'

    )));



    }



add_action('customize_register', 'ds_register_login_editor');



function ds_login_customizer() {

$logo_url = get_option('ds_login_logo');

$logo_width = get_option('ds_login_logo_width');

$logo_height = get_option('ds_login_logo_height');

$logo_padding = get_option('ds_login_logo_padding');

$bg_img = get_option('ds_login_bg_image');

$bg_color = get_option('ds_login_bg_color');

$bg_size = get_option('ds_login_bg_size');

$form_bg_image = get_option('ds_login_form_bg_image');

$form_bg_color = get_option('ds_login_form_bg_color');

$form_width = get_option('ds_login_form_width');

$form_height = get_option('ds_login_form_height');

$form_padding = get_option('ds_login_form_padding');

$field_width = get_option('ds_login_field_width');

$field_margin = get_option('ds_login_field_margin');

$field_bg = get_option('ds_login_field_bg');

$field_color = get_option('ds_login_field_color');

$field_label = get_option('ds_login_field_label');

$button_bg = get_option('ds_login_button_bg');

$button_border = get_option('ds_login_button_border');

$button_shadow = get_option('ds_login_button_shadow');

$button_color = get_option('ds_login_button_color');

$button_hover_bg = get_option('ds_login_button_hover_bg');

$button_hover_border = get_option('ds_login_button_hover_border');

$other_color = get_option('ds_login_text_color');

$other_color_hover = get_option('ds_login_text_color_hover');

$other_css = get_option('ds_login_custom_css');

?>



<style type="text/css">



body.login {

<?php if( !empty($bg_img)) : ?>

    background-image: url(<?php echo $bg_img; ?>) !important;

<?php endif; ?>

<?php if( !empty($bg_color)) : ?>

    background-color: <?php echo $bg_color; ?> !important;

<?php endif; ?>

<?php if( !empty($bg_url)) : ?>

    background-size: <?php echo $bg_size; ?> !important;

<?php endif; ?>

    }



body.login #login h1 a {

<?php if( !empty($logo_url)) : ?>

    background-image: url(<?php echo $logo_url; ?>) !important;

<?php endif; ?>

<?php if( !empty($logo_width)) : ?>

    width: <?php echo $logo_width; ?> !important;

<?php endif; ?>

<?php if( !empty($logo_height)) : ?>

    height: <?php echo $logo_height; ?> !important;

<?php endif; ?>

<?php if( !empty($logo_width) || !empty($logo_height)) : ?>

    background-size: <?php echo $logo_width; ?> <?php echo $logo_height; ?> !important;

<?php endif; ?>

<?php if( !empty($logo_padding)) : ?>

    padding-bottom: <?php echo $logo_padding; ?> !important;

<?php endif; ?>

}



#loginform {

<?php if( !empty($form_bg_image)) : ?>

    background-image: url(<?php echo $form_bg_image; ?>) !important;

<?php endif; ?>

<?php if( !empty($form_bg_color)) : ?>

    background-color: <?php echo $form_bg_color; ?> !important;

<?php endif; ?>

<?php if( !empty($form_height)) : ?>

    height: <?php echo $form_height; ?> !important;

<?php endif; ?>

<?php if( !empty($form_padding)) : ?>

    padding: <?php echo $form_padding; ?> !important;

<?php endif; ?>

<?php if( !empty($form_border)) : ?>

    border: <?php echo $form_border; ?> !important;

<?php endif; ?>

}



#login {

<?php if( !empty($form_width)) : ?>

    width: <?php echo $form_width; ?> !important;

<?php endif; ?>

}



.login form .input, .login input[type="text"] {

<?php if( !empty($field_width)) : ?>

    width: <?php echo $field_width; ?> !important;

<?php endif; ?>

<?php if( !empty($field_margin)) : ?>

    margin: <?php echo $field_margin; ?> !important;

<?php endif; ?>

<?php if( !empty($field_bg)) : ?>

    background: <?php echo $field_bg; ?> !important;

<?php endif; ?>

<?php if( !empty($field_color)) : ?>

    color: <?php echo $field_color; ?> !important;

<?php endif; ?>

}



.login label {

<?php if( !empty($field_label)) : ?>

    color: <?php echo $field_label; ?> !important;

<?php endif; ?>

}



.wp-core-ui .button-primary {

<?php if( !empty($button_bg)) : ?>

    background: <?php echo $button_bg; ?> !important;

<?php endif; ?>

<?php if( !empty($button_border)) : ?>

    border-color: <?php echo $button_border; ?> !important;

<?php endif; ?>

<?php if( !empty($button_shadow)) : ?>

    box-shadow: 0px 1px 0px <?php echo $button_shadow; ?> inset, 0px 1px 0px rgba(0, 0, 0, 0.15);

<?php endif; ?>

<?php if( !empty($button_color)) : ?>

    color: <?php echo $button_color; ?> !important;

<?php endif; ?>

}



.wp-core-ui .button-primary.focus, .wp-core-ui .button-primary.hover, .wp-core-ui .button-primary:focus, .wp-core-ui .button-primary:hover {

<?php if( !empty($button_hover_bg)) : ?>

    background: <?php echo $button_hover_bg; ?> !important;

<?php endif; ?>

<?php if( !empty($button_hover_border)) : ?>

    border-color: <?php echo $button_hover_border; ?> !important;

<?php endif; ?>

}



.login #backtoblog a, .login #nav a {

<?php if( !empty($other_color)) : ?>

    color: <?php echo $other_color; ?> !important;

<?php endif; ?>

}



.login #backtoblog a:hover, .login #nav a:hover, .login h1 a:hover {

<?php if( !empty($other_color_hover)) : ?>

    color: <?php echo $other_color_hover; ?> !important;

<?php endif; ?>

}



<?php if( !empty($other_css)) : ?>

    <?php echo $other_css; ?>

<?php endif; ?>



</style>



<?php

}



add_action( 'login_enqueue_scripts', 'ds_login_customizer' );



function ds_login_login_logo_url() { return get_bloginfo( 'url' ); }



add_filter( 'login_headerurl', 'ds_login_login_logo_url' );



function ds_login_login_logo_url_title() { $title = get_bloginfo( 'name', 'display' ); return $title; }



add_filter( 'login_headertitle', 'ds_login_login_logo_url_title' );



?>

c) functions.php. This you need here is 

<?php
/**
 * @author Divi Space
 * @copyright 2017
 */

if (!defined('ABSPATH')) die();

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

function ds_ct_loadjs() {
    wp_enqueue_script( 'ds-theme-script', get_stylesheet_directory_uri() . '/ds-script.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'ds_ct_enqueue_parent' );

add_action( 'wp_enqueue_scripts', 'ds_ct_loadjs' );

include('login-editor.php');

?>

d) ds-script.js which contains some javascript that the divi-space team put in place. It only has one line but it helps when you need to add custom javascript into divi via the child theme

// Custom JS goes here ------------

Finally, you can add a file called screenshot.jpg which in this case is 880x660 px

That's all you need. There are simpler ways to make child themes for Divi bit this has worked best for me when I needed it. All credits go to the creators of the generator and the above code