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!!
2
Answers
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.
a) style.css which contains the following code
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
c) functions.php. This you need here is
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
Finally, you can add a file called screenshot.jpg which in this case is 880×660 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
You need to add this in the style.css file of the Divi Child Theme.
/*
Theme Name: Divi Child Theme
Theme URI: https://YourURL.com/
Description: Divi Child Theme
Author: Areeb saeed raja
Author URI: https://YourURL.com/
Template: Divi
Version: Updated for Divi 3+
*/
And add this code in functions.php file