How to Add Custom Templates and Design to Divi’s Blog Post Formats (Part 1 of 3)

Welcome to Day 1 of 3 in our series on How to Add Custom Styles to Divi’s Blog Post Formats. By default Divi comes with six blog post formats: Standard, Video, Audio, Quote, Gallery, and Link. In this series we teach you how to customize them with php and css.

Over the next 3 days, I will walk you through customizing all of Divi’s blog post formats: Standard, Quote, Link, Video, Audio and Gallery. Editing all of those (for the designs I have in mind) requires editing the single.php template file. To do this properly, we must create a Divi child theme that will contain our altered Single.php template file. And before we do that, we should also create a local install of WordPress using Desktopserver. This will provide a safe development space for us to play around without risking anything on a live website.

As the title of this post suggests, we’ll need three days to cover everything from beginning to end. Today, I’m going to show you how to create a local install of WordPress using Desktopserver and create the child theme we’ll use to house our altered Blog Post Formats.

I would consider this series to be more “advanced” than the majority of the tutorials published here. But, if you’re a beginner, this series is actually a great opportunity for you to improve your development skills and branch out into something new in a safe, free, guided post series.

Let’s get started!

A Sneak Peek At What’s To Come

Here is a quick peek at the designs we’ll be achieving in this series. After we lay the groundwork for them in today’s post, I’ll show you how to edit the single.php file (the template for all of our blog post formats), and then how to further style that template for each format with CSS. It’ll be quite the journey!

Preparing Your Development Assets

Here is what you will need to follow along with today’s tutorial and the tutorials I’ve created for the next 2 days:

• A code editor such as Atom, Sublime, Brackets or Notepad + + (whatever you prefer)
• A Local WordPress Installation using DesktopServer (unless you already have one)
• A Divi Child Theme–which we’ll create!

I strongly recommend that if you are going to follow along with this series you do so on a WordPress install that is setup just for testing and development. The last thing I want is for people to experiment with their live website and mess something up.

If you’re not sure how to set up a local development installation of WordPress, I recommend using the free version of desktopserver. It should have you up and running with a local WordPress install in just a few minutes (no exaggeration).

Setting Up DesktopServer on Your Computer

Here are a few steps to get started with DesktopServer.

Visit their website and download the Free Version by clicking the “Free – Add to Cart” button on the right column.

On the checkout page, fill out your personal info, agree to their terms, and click purchase.

On the Purchase Confirmation page, select the right download for your operating system. I suggest installing the latest version of either Mac or Windows.

Unzip your download and run the Install of the application on your computer.

Now you can find the DesktopServer application in a folder called “xampplite”, in the root of your Local Disk (C:) Drive.

Once you have Desktopserver installed, read their instructions to help you get started with setting up your local wordpress installation.

Creating Your Divi Child Theme for This Series

To Create a Divi child theme, you need to access your WordPress theme files. If you followed the defaults when installing DesktopServer, your theme files should be located in your documents folder inside a folder labeled “Websites”.

Locate the themes folder, and add a new folder called “child”.

Now you are going to add your style.css file to your child theme folder. This is the first of 3 files that will make up your child theme.

Open your text editor and create a new file with the following CSS header at the very top of the document.

/*
 Theme Name:     Divi Child
 Theme URI: 
 Description:	   Divi Child Theme
 Author:
 Author URI:   
 Template:       Divi
 Version:        1.0.0
 License:  
 License URI:  
 Tags:  
 Text Domain: 
*/

You can add the rest of the information for the child theme CSS header to fit your site as needed.

Save your new file with the name and extension “style.css”. And add it to the child theme folder:

The next file you need to add to your child theme folder is the functions.php file.

Go back to your text editor and create another new file and add the following php code to the very top of the document:

<?php 
function my_theme_enqueue_styles() {
    $parent_style = 'parent_style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( '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' );
?>

Save the file with the exact name and extension “functions.php” and add it to your child folder:

The final file you need for you child theme is Divi’s single.php file. Along with adding new CSS to your child theme style.css file, we will be using a copy of Divi’s single.php file to edit the layout for the different post types.

To find the single.php file, go to the Divi (parent) theme folder.

Copy the single.php file and paste it into your child theme folder:

Now we are ready to make customizations to your child theme’s single.php file.

Activate Your New Child Theme

Before we start customizing the single.php template file, go ahead and activate your new child theme.

From the wordpress dashboard, go to Appearance → Themes and select the Activate button on your new child theme called Divi Child.

That’s it for now!

I know that this isn’t too exciting yet but I do hope you stay with me. It is important to lay the right foundation for your projects and this post is a great place to start.

What’s Coming Tomorrow?

Now with your local install of WordPress and child theme activated, you are ready for the next part in this series. Tomorrow I will show you how to edit Divi’s single.php file to create a completely unique layout for your blog post formats.

I’m looking forward to reading your feedback below. Setting up a child theme on a local server can lead to some problems for first timers, so I will try and answer any questions I can. However, if you have more technical issues, our support team is ready and willing to help you out as well. Not to mention the folks over at Desktop Server!

Cheers!