How to Add Divi Back to Top Button and customize it?

How to Add Divi Back to Top Button and customize it?

The elegant theme provides Divi builder with multiple functions that developers can use for a better user experience. So today, we will show you how to add Divi back to the top button on the Elegant theme, but we also customize it. Adding a button is a simple and easy procedure, but the customer or users can easily identify that you’re using the Divi theme or WordPress platform.

Several elements on your website can recognize the Divi framework. However, if you want to make your site stand out and hide the fact that it was designed with Divi, it should customize all of these aspects to appear nothing like the default look.

In this article, we will show the simple process of adding back to the top button and customize it with different features. I’ll start with adding a Divi back to the top button and then change its shape and color to round. Then I’ll add some hover effects. So let’s start!

How to Add Divi Back to Top Button

You might be wondering why you need this button whether everything is working fine. This button will enhance the user experience, and it’s more effective with the mobile user. However, this feature will undoubtedly help your site’s users, whether you have a one-page website (with or without parallax scrolling) or merely a long page with a lot of content that takes a lot of scrolling to the bottom. So to activate this feature follow this procedure:

First, log in to the WordPress admin panel and navigate to the Divi on the left sidebar. 

General Settings divi

Select the Theme Options and then click on the General Settings button, and there are many settings options. Next, scroll down to the bottom, where you can find the Back to Top Button to enable it. That’s it!

Customize Back to Top Button

Customizing the button is the most significant part of this article because you need to look different from the crowd. Therefore, I will show you how to make this button round or circle shape and add effect. 

Circle Back to Top Button

I’ll show you how to make the default button in a circle shape and color in this example, and I recommend you change the color and make it in accordance with your website. It’s an easy process, even if you don’t have any knowledge of coding or custom CSS. All you need is to add this code to the right place in Divi>Theme Options>Custom CSS; that’s it. 

Customize Back to Top Button

Note: The text in the backlash is comments

/* Default button appearance */
.et_pb_scroll_top.et-pb-icon {
    right: 30px; /* space from right */
    bottom: 30px; /* space from bottom */
    padding: 8px; /*padding size*/
    border-radius: 30px; /* make the circle */
    background: rgb(0,206,209) /* button color */;	
    font-size: 32px; /* icon size */
    transition: all .1s ease-in-out; /* add transition */
}

After you successfully including the code, the button will look like below Screenshot:

Back to Top Button

Add Effects in Back to Top Button

Now I’ll add some effect to this button for its better appearance and fancy look. You may not need this, but some of the users like these kinds of animations. To add the hover-over effect in the button, you need to add this code in the next line of the previous code. It will give you a stunning result while you click on the button.

/* Button Appearance on Mouseover */
.et_pb_scroll_top.et-pb-icon:hover {
    bottom: 32px /* space from bottom */;
    background: rgb(0,255,255) /*button hover color*/;
    transition: all .1s ease-in-out; /*add transition*/
    box-shadow: 0 10px 15px #162c4e4a; /*hover box shadow */
}

Add Effects in Back to Top Button

Using GIF Image in Divi Back to Top Button

Using an image or a GIF offers us a range of opportunities. For example, we can build our own back-to-top button and use it instead of the default style. I’ll teach you how to replace the back-to-top button with a GIF or image and making some cooler effects in this example. We’ll utilize a premade GIF image that I created earlier. First, upload the Gif image to your Media Library, which you want to add in the back to the top button. After uploading the Gif image, you need to add this code into the custom CSS. 

Login to the WordPress admin panel and navigate to Divi>Theme Options> Custom CSS; add the code here. Then in the URL code line, you insert your URL to accomplishing the task.


.et_pb_scroll_top:before {
    content: url(Your GIF URL);/*Your image URL*/
}
.et_pb_scroll_top.et-pb-icon {
    background: none;
    right:1%;
    bottom: -7px;
	}

Using GIF Image in Back to Top Button

How to Add Divi Back to Top Button with Text

I’ll show how to modify the default back to the top button with a circle and add some text in this example. First, we need to change the code for the icon then add the text to this icon. This code also includes the hover effect that makes some cool effects. 

.et_pb_scroll_top:after {
    content: "Back To Top";/*button text*/
    font-family: "Open Sans",Arial,sans-serif;/*text font*/
    font-size:10px;/*text size*/
} 
.et_pb_scroll_top:before {
    content: "\21";/*select icon*/
    font-family: ETmodules !important;
    font-size:12px;/*icon size*/
    margin-right: 5px;
} 
.et_pb_scroll_top.et-pb-icon {
    padding: 0px 20px 17px;
    right: 20px;
    bottom: 30px;
    border-radius: 100px;
    background: #1dbbe1;/*button color*/
    box-shadow: 0 10px 20px #37798940;
    transition: all .1s ease-in-out;
}
.et_pb_scroll_top.et-pb-icon:hover {
    background: #00ffff;;/*button color on hover*/
    transition: all .1s ease-in-out; /*add transition*/
}

With text Back to Top Button

All of the styles shown in this post are easy and simple to use on your website. You can use them as is or combine multiple designs to make your own Back To Top button. Of course, it would be best to practice all these things in the child theme or any staging website. Then, after a successful experiment, you can use it on your live website. If you have any queries about this post, comment to us below. 

 

Warning: Creating default object from empty value

Warning: Creating default object from empty value

Responsive site design and the active site are a must in today’s world because approximately billions of devices are in use. Everybody has no time to wait for anything, so these kinds of errors “Creating default object from empty value” will lead your business and position down.

An immeasurable first impression on any new user is critical and requires our attention. Unfortunately, early versions of Elegant Themes’ update checking code contained a tiny flaw. Occasionally, an error displays in the WordPress Dashboard. It may be the cause of some plugin or shortcode that you last entered.

Many of Elegant Theme’s products fix the error such as the Divi Theme and Extra Theme. However, some of their shortcode and portable plugins continue to have issues.

Warning: Creating default object from empty value in Divi theme 

Creating default object from empty value

 Warning: Creating default object from empty value in C:\aggregate\wp-content\plugins\et-codes\et-shortcodes5.php on line 180

 It’s a slight inconvenience that does not affect the functionality of the themes or plugins. 

$last update->last checked = time()

This line of code (which can be in the file and at the line number specified in the warning notice) causes the problem.

It’s trying to set a property of the last_update object. The issue is that the previous update object hasn’t been declared yet, so PHP issues the warning to remind developers to declare the object first.

So, How to fix this issue? Here are a few possibilities:

  • First, this error can be fixed by updating the WordPress admin dashboard’s elegant theme and clicking on the update button. So, install the latest version of your Divi theme.
  • Second Disable the php.ini file: This method can tell the PHP not to show these notifications or warnings. 
  • Find the “error_reporting = E_ALL” in the .php.ini file and replace with “error_reporting = E_ALL & ~E_NOTICE & ~E_WARNING”
  • Follow the appropriate change to the plugin/theme line: @$last update->last checked = time(); 

 Empty Value In PHP

It seems that after upgrading my PHP environment to PHP 5.4 and beyond encounter this problem. The error is leading to the following line of code: 

Error:

Creating default object from empty value

Code:

$res->success = false; 

Solution:

E_STRICT warnings may be enabled in error reporting for PHP versions >= 5.3.x, or error reporting set to at least E_WARNING for PHP versions >= 5.4 in your new environment. For example, when $res is NULL or not yet initialized, an error occurs:

$res = NULL;

$res->success = false; // Warning: Creating default object from empty value

 

If $res is already initialized to a value but is not an object, PHP will display a different error message:

$res = 33;

$res->success = false; // Warning: Attempt to assign property of non-object

Suppose you’re attempting to build a generic object and assign the property success. In that case, you’ll need to define $res as an object of stdClass in the global namespace to comply with E STRICT standards previous to PHP 5.4, or the regular E WARNING error level in PHP >= 5.4:

$res = new \stdClass();

$res->success = false; 

 

 

 

Divi Contact Form Not Working?

Divi Contact Form Not Working?

Divi builder has many built-in features, just like any other WordPress page builder. It also includes a module that allows you to add contact forms anywhere on your site. If you’re here, you’ve probably completed developing your WordPress site or a client’s website using Divi builder, but for some reason, the Divi contact form is not working.  

You may have experienced specific issues, such as user data not being sent to your email or its dedicated place or the anchor text issue. Contact forms are essential for your business’ growth and the process of community building. As one of the primary channels through which your customers communicate with you, these are valuable functions to fine-tune. 

If your Divi contact form is not working, it’s time to get it fixed! But, before you can figure out how to solve the problem, you must first understand what’s causing it. However, it shows some annoying issues such as can’t set the slider text position, can’t able to create a Divi child theme, etc.

Why is my Divi Contact Form Not Working?

Why is Divi Contact Form not working?

PC Error Web System Database System Error Codes

Using the PHP mail () function – your web server sends emails by default, using the PHP mail() function. However, there are several limitations in .PHP, such as:

  1. The PHP mail() function is limited to sending bulk emails, and it lacks server authentication, which causes some email systems to flag it as spam. 
  2. To overcome the influx of spam, some email providers check if emails are sent from the address they claim to be from. The emails sent from WordPress are often problematic in this regard. Your emails may be automatically blocked if your email server is Gmail and your email claims to come from your site’s domain.
  3. Some hosting servers aren’t set up to effectively use the PHP mail() function, which may be the root cause of the issue. In addition, most WordPress hosting companies limit how much of this functionality can be used per account. As a result, if you use the entirety of your daily or monthly capacity, your emails simply won’t be delivered.

These are the most common reasons behind Divi’s contact form not working. The good news is that you might be able to use SMTP (Simple Mail Transfer Protocol) solutions to fix these delivery issues. SMTP modifies the way emails are sent and authenticates them appropriately, ensuring that your communications are not flagged as spam by email services.

However you send your emails, we recommend using an SMTP service even if you don’t have many email problems. Now that we have a better understanding of the issue let’s fix it using the Divi Contact Form Module.

How Do I Fix Divi Contact Form Not Working

This guide will fill you in on every relevant piece of information that might help you in fixing this error. Firstly, we’ll start off with the default basic settings in order to remedy the Divi contact form that isn’t working right.

Check Divi Contact Form Settings

Although the Divi contact form module is pretty basic, there are still a few settings to look into to find out if something essential is causing the erroNavigateate to the contact form page and click on Edit With D to initiate your query.  

Edit With Divi

Once the contact page appears, click anywhere within the contact form and click on the gear icon to access the Contact Form SettingsNext, simply scroll down to the Email option on the content tab and expand it. Finally, fill in the email address to which you want your contact form notifications to be sent.

DiVI Contact Form Settings

After that, if you’ve added the Spam Protection settings, check that everything is accurate. If you did not add these settings, add them by enabling the Use a Spam Protection Service option.  Here you might be able to adjust the sensitivity or use a spam protection service like Google reCAPTCHA. Reduce the sensitivity to the absolute minimum since your Divi form isn’t functional. If this doesn’t work, we’ll need to download and install the WP Mail SMTP plugin if this doesn’t work. It will make use of a professional email service, replacing the default email sending method. So now we’ll be setting up an email delivery service that we’ll use later.

Set up the Email Delivery Service

Several options are available for email delivery services, but we’ll be using SendGrid for this tutorial. First, go to SendGrid and sign up for an account. There are both free and paid plans availablYouyou won’t need any premium features for these articles, so the free option will definitely work.

SendGrid wordpress

Next, create an account and use the web API or SMTP relay to integrate SendGrid with your server. We’ll utilize the SMTP relay approach instead of SendGrid’s supported Web API integration. 

API or SMTP relay to integrate SendGrid

You’ll need to give your API key a name and generate it, and you should be able to receive it in a matter of seconds. Once the API is generated, copy the API key. We’ll use that later.

API key name

Install and Configure the WP Mail SMTP Plugin  

How to Fix Divi Contact Form Not Working?

In WordPress, several plugins are used to send emails, but the WP Mail SMTP is the, in our opinion, the best SMTP plugin. Both a free version and a paid edition with extra features that start at 49 USD per year on the WordPress website. In addition, it connects your website to an external email service, which enhances email deliverability. Aside from that, WP Mail SMTP (simple mail transfer protocol) allows you to:

  • Keep track of the emails that your WordPress site sends.
  • Keep track of who opens and clicks on your emails.
  • Save email attachments and export your logs.

To install the plugin, go to the admin dashboard area, hover over Plugins and click on Add New. Then search for the WP Mail SMTP plugin to install and activate it. After the activation, you are now ready to start the configuration. You can find the plugin settings section in your WordPress dashboard. In the Plugin Settings section, you’re From Email address ison the first thing you should play chess.

WP Mail SMTP Plugin WordPress

WordPress will use your admin email address as your From Email address by default, but you can modify it. There’s also the option to make the From Email address mandatory. In addition, it regulates all your emails so that they are sent from that address, even if third-party plugins send them. 

Then you must fill in the From Name section. Again, WP Mail SMTP will use the admin’s filled-in name by default, but you may change that as you please. You can force it to use the same name for all emails in the same manner that you moved it to use the email address. 

How to Fix Divi Contact Form Not Working?

Finally, you must select your desired Mailer from SMTP.com, Outlook, Gmail, SendGrid, Sendinblue, Pepipost, Mailgun, and Amazon SES, all famous mail services. Choose SendGrid as your server, and the customization choices will appear.

Install and Configure the WP Mail SMTP Plugin 

Once you select the mailer you want, several options will appear under the Mailer section. Now you can move on to inserting the API key that we generated earlier, and then click on Save Settings.

Api key integration

Test the Email

It’s always good to test the email functionality after setting up the email delivery provider and the SMTP plugin. For this purpose, WP Mail SMTP has a function to test your emails.

Enter an email address for the recipient and send a test email.

Test the email

A message indicating success will appear if the setup is accurately functioning.

test email divi contact form

Return to the SendGrid API page and check the Activity tab to see all your email activities. Once you click on it, you will be redirected to a new window to be able to see the actions.

SendGrid API page

 

Divi Contact Form Problem Resolved

After configuring the plugin and email delivery service, you’ll ensure that every email sent through your Divi contact form reaches its intended recipient. These SMTP tools will help you enhance your email delivery and resolve the problem. One of the top email delivery services is SendGrid. If you’d prefer to use anything else, we recommend Amazon SES or Google. It’s an excellent alternative for businesses and freelancers.

Bonus Tip

If you’re using an older version of Divi, the contact form module might not work. Instead, enable the option to get automatic updates to fix the problem. You’ll need to save the modifications after entering your Elegant Themes Username and API key.

older version of Divi

As a result, you’ll be able to upgrade Divi from the WordPress dashboard whenever a new version is released.

How Do You Fix the Divi Contact Form: Not Sending Email?

You may not receive the email in the inbox but check your email’s spam section. Sometimes, the Divi content may not be sent email due to several reasons, such as:

  1. Incorrect Divi configurations.
  2. If you are not using a plugin or some other source to get the emails then it might be possible that the Divi contact form does not send to all fields. For example, you may get the user’s name, and email but are unable to receive the message, contact number, and so on. For that, use the appropriate plugin for the contact form email and then set up the plugin.

You can check your settings using the aforementioned method and then configure the best plugin for your email with an easy step-by-step process.

Conclusion

Often, the contact form module in Divi stops operating. In most cases, this is due to an email deliverability issue. If that’s the case, you can resolve it by installing an SMTP plugin on your site. We suggest switching from PHP’s mail() function to a more reliable SMTP system.

This tutorial demonstrated how to use SendGrid and WP Mail SMTP to resolve various Divi Contact Form issues. Bookmark this site if you have any other issues like changing the Divi footer credits or other WordPress-related topics. We’ll update your knowledge with all that is current, and assist you in solving your problem in a matter of minutes.

How to Hide the Header and Footer in Divi Theme?

How to Hide the Header and Footer in Divi Theme?

The elegant theme provides Divi builder with better features, and that’s why it’s so popular. For example, the Divi theme adds the header by default, but sometimes you don’t need this header. There are several ways to hide the header and footer in the Divi theme. 

You might want to hide the Divi header and footer on a specific page or across your entire website in some situations. For instance, you might want to hide the header on a landing page because it might reduce the user’s attention. On the other hand, sometimes, you may need to Change footer credits and text for a professional appearance of your site.

Using different methods, we’ll show you how to hide the header and footer in the Divi in this article. First, we’ll hide the header using default or classic editor and then use the code to hide the header and footer. So let’s start!

Hide the Divi header and footer by default options

First, you need to open that page that wants to hide its header and footer by logging into the WordPress admin panel and selecting that page from the left sidebar. 

Once you open the desired page, you can change the settings by navigating to the Template on the right sidebar menu. Now, in the template dropdown menu, choose a Blank Page.

Hide the Divi header and footer by default options

After that, click on the Update button, and it will remove the header and footer on this page.

Hide the header and footer with the Theme Builder

The Divi Theme Builder is a framework mechanism within Divi that allows users to create layouts and apply them to your website’s pages or articles.

Using the Template Configuration checkbox, you may design a template that will be selectively allocated to your website using the Divi Theme Builder. You can hide or exclude the layout from any web pages or articles you like.

Divi Theme Builder

You may then use the Hide On Front End (Eye Icon) option within your newer version to hide the Divi header, Divi footer, or both the header and footer. In addition, It will hide the Divi primary and secondary menus and the Divi footer area and bottom bar.

Hide the header and footer with the Theme Builder

 

Finally, you can use the Hide On Frontend Eye Icons within the Default Website Template to deploy your hidden header and footer to your entire website.

Hide the header and footer specific page or post 

You’ll probably want to apply it to a single page and post. You can accomplish this by creating a new Theme Builder template. In your WordPress dashboard, go to Divi and click the Divi Theme Builder menu.

To build a new Theme Builder template, go to your Theme Builder dashboard and click on the Add New Template button.

header and footer specific page or post  divi

The Template Settings window will appear, you can utilize the checkboxes on the Exclude From tab to indicate that post or page should not apply to the template.  All these settings are for the specific post, page, or selected desire page. 

Template Settings Divi

After creating the template, you can add the custom header or footer. Also, hide both of them by clicking on the Eye Icon.

Template Settings Divi WordPress

Now select the page, post, or author, and then click on the Save button.

Manually Hide the header for the whole website.

If you have knowledge about the coding and technical stuff, then use this method to hide the header. You can use this snippet to hide the header across the entire webpage. 

First, go to the WordPress admin dashboard, navigate to the Divi and click on Theme Options. Then scroll down to the bottom and paste the code in the Custom CSS section.

Hide divi header For a particular page

#main-header { 
	display: none; 
}

#page-container {
	padding-top: 0px !important;
	margin-top: -1px !important;
}

For a particular page

If you don’t want to hide the header from the website, use this code to hide it for a specific page. Copy this line of code and paste it into the Custom CSS section. 

Note: Use your Page ID, and it appears in the URL on the specific page as shown below:

page Id in wordpress

.page-id-2 #main-header { 
	display: none; 
}

.page-id-2 #page-container {
	padding-top: 0px !important;
	margin-top: -1px !important;
}

Hide footer For the entire website

Sometimes you need the header but don’t need the footer for any reason. So to hide the footer, use these lines of code and paste them into the Custom CSS section. 

Note: If you want to hide both header and footer, then use the above code.

 #main-footer {
	display: none;
} 

 

For a particular page

if you need to hide the footer from a specific page, then use this snippet. Copy and paste it into the Custom CSS section.


.page-id-2 #main-footer {
	display: none;
}

 

How to make a Divi child theme

How to make a Divi child theme

If you have the Divi theme installed on your WordPress site, you can use the pre-designed layout packs and Divi Builder to build and customize your site quickly and easily. However, if you don’t know what a Divi Child Theme is and how to make a Divi child theme. Or whether you want to add custom CSS and PHP features to your site to give it a genuinely distinctive look and feel, you’ll need to make a Divi child theme. Don’t worry; we will cover everything in this guide. 

A child theme is a sub-theme that inherits the parent theme’s appearance, feel, and functionality. The child theme’s files are maintained separately from the parent theme’s files, so you modify the child theme whenever you want. However, it does not affect your parent theme. So if you came here for anything specific, feel free to hop around and jump to a certain section. Otherwise, please read this full post and feel free to bookmark it or, better yet, share it.

Before we get started, the difference between a Blank Divi Child Theme and a Premium Divi Child Theme is confusing the Divi community. So we’ll go over both in this section, but keep in mind that they’re used for quite different reasons, even though they’re both called “Divi Child Theme.” This ultimate guide to Divi Child Themes will help you understand all about the Divi child theme benefits and features. We’ll also discuss when and why we create a child theme. So you can be assured that you will be well-versed in the subject by the end of this article. 

So, let’s get started.

What is a child theme in Divi?

A Divi child theme is an extension of the parent Divi theme, which can have its functionality, styles, and design separate from the Divi theme. Because WordPress executes the child theme files before the parent theme, if you’ve modified your header, footer, sidebar, or other areas, WordPress will use those files instead of the parent theme. However, the Divi child theme needs the parent Divi theme to operate accurately.

Why Create a Divi Child Theme

There are significant benefits to developing a child theme. The first major point is that keeping your customizations in a separate folder from your Theme. After that, you’ll be able to update the parent theme without losing your custom modifications. It is especially critical when using a theme like Divi, which is updated frequently.

Second, you could quickly copy or move this child theme folder from one site to the next to speed up the development process. As a result, developing a child theme is especially beneficial for freelancers or companies who build WordPress sites for a large number of clients.

Why Create a Divi Child Theme

Third, building a child theme can make collaboration with other users much easier. Instead of being spread throughout the settings pages and the WordPress Customizer in your dashboard, you’ll have all your modifications in one organized folder with a child theme. As a result, it can significantly reduce the development time. Additionally, keeping changes in a separate folder prevents certain users, such as customers, from interfering with the code and configurations set in the Theme’sTheme’s setting pages and the WordPress Customizer.

Fourth, developing a child theme is similar to setting up a WordPress staging site in that it allows you to test with theme development in a low-risk setting. For example, let’s say you start customizing your child theme and something goes wrong, or you’re disappointed with the results. In that situation, you can turn off the child theme. There’s no need to worry about destroying your site or having to undo all of your modifications because it will return the parent theme, and your website is in the previous condition.

Files for Divi Child Theme 

For any child theme, you need three files that help the Theme while operating. So it would be best if you created your own.

  •  style.css
  • functions.php
  • screenshot.png

In the following section, we’ll build each of these files and evaluate their functions. I strongly recommend you follow this tutorial step by step to understand what a Divi child theme is and how to create one.

style.css

The style.css file is the initial step in establishing a Divi child theme. This File has two purposes: it stores information about your child’s themes, such as their name, creator, description, and version number. The second purpose of the CSS styles is to change the appearance and quality of your website. Later in this article, we’ll discuss customizing your child’s theme.

The next step is to develop a stylesheet that contains all of the Divi child theme’s CSS. You’ll need to use a text editor for this. I’ll use Notepad++ editor for this demonstration because it’s one of the greatest HTML and CSS editors. Create a new text file and name it style.css as mentioned above. This header comment is essential for the CSS to operate normally. It includes basic information about the child theme, such as the fact that it is a child of the Divi parent theme.

In this header comment, you must specify the theme name and the template (i.e., the parent theme’s name). If you plan to publish or sell your child’s theme, you can provide additional information such as a description, author name, and version. For a Divi child theme, here’s an example of a complete header comment When you create your “style.css” file, copy and paste this code:

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

Theme Name: WP FirstHand Child Theme

Theme URI: https://wpfirsthand.com/

Description: A child theme layout for Divi

Author: Wp FirstHand Author 

Author URI: https://wpfirsthand/author.com/

Template: Divi

Version: 1.0.0

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

 

 The asterisks and slashes indicate that this code will be commented out in CSS, preventing WordPress from rendering it on the front end. We’ll go through how to create custom CSS later. But, for the time being, click Save to save this stylesheet to your child theme’s directory.

 You’ll need to replace all of the information to suit your own. Then, in your theme directory, the name of the Theme will appear. Make sure you include everything listed above, and for the ‘Template:’ value, choose Divi or Extra. Your child theme will not operate if any of this information is incorrect.

functions.php

 It’s now time to enqueue the stylesheets for your parent and child themes. First, the styling of the parent theme is sent down to the child theme. Otherwise, you’d just see a bunch of unstyled text when you activate your child theme.

Second, the CSS for the child theme loads before the parent theme’s, but it does not override it. That way, when you add custom CSS and make other changes to your child theme, these changes will either complement or replace the parent theme’s styles and functionality.

Almost every WordPress theme uses the functions.php File as a template. It works similarly to a plugin and is instantly activated in the WordPress admin panel and front-end sites. In addition, this File usually contains custom PHP code that is used to add more functionality to the child theme. Copy and paste the following code into your functions.php File using your text editor.

 

<?php

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

 * WP Firsthand Child Theme Functions.php

------------------ ADD YOUR PHP HERE ------------------*/

function divichild_enqueue_scripts() {

    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

add_action( 'wp_enqueue_scripts', 'divichild_enqueue_scripts' );

 

screenshot.png

The image that will appear in your themes directory is “screenshot.png.” WordPress recommends a PNG file with a resolution of 1200 by 900 pixels. It’s entirely up to you to come up with a design. For example, the elegant Themes’ Divi theme has a solid background with the Divi logo, whereas conventional WordPress themes have a layout snapshot. We use an example of a child Theme as screenshot.png, and in that image, we use the Wp FirstHand logo.

How to make a Divi child theme 

There are two methods to build the files for your child theme:

  • Method 1: Manually Creating the Directory
  • Method 2: Uploading a Zipped File

Manually Creating the Directory

Create a Divi child theme folder.

To initiate, create a folder in which you may store all of your Divi child theme’s template files and assets. You can use File Manager to create this folder in your database. You can find this in your WordPress hosting provider’s control panel. Once you access the control panel, then click on the File manager

File manager WordPress

It will redirect to the new page, and then you have to open the public_html folder, which is on the left sidebar. 

public_html folder

 

After that, you need to Click the wp-content folder. Once the wp-content folder is opened, then click on the Theme folder and create a new folder named WPFirsthand-child. It will be the root directory of your child’s theme. 

wp content

Once you build the root folder, create the functions.php, style.css, and a screenshot.png (briefly explained in the above sections). After completing these files, Upload these files using the Upload button at the top of the cPanel. It will appear the same as shown below.

upload the file in the WordPress cPanel

Uploading a Divi Zipped File to WordPress 

Make a folder on your computer to save your files. Create a text file named functions.php and a text file called style.css in this folder. Paste the function’s code into the functions file using a text or code editor.

Paste the code into the CSS file (using an editor like Brackets or Notepad++). To operate successfully, the CSS file must be stored with the .CSS extension. You may save it as a web file, and it will convert to .CSS if you’re using Brackets or a comparable tool.

Once you’ve finished preparing your files, zip up this folder and install it just like any other theme. Then, simply login to your WordPress admin dashboard and navigate to the Appearance on the left sidebar and click on Themes.

Divi Zipped File to WordPress 

After that, a new page will appear in which your installed themes emerge, and you need to click on the Add New button. Next, click on the Upload Theme that appears on the top of that page and upload the folder you just made. Once it has been uploaded, activate it. 

How to make a Divi child theme

That’s all; your new Divi child theme is now operational. You may now customize it without worrying about losing your adjustments when the software is updated.

 Conclusion 

It’s simple to create a child theme for Divi and Extra, and it has a lot of advantages. When you update your parent theme, child themes prevent you from losing your customizations. You can switch to a new child theme without losing your current child theme’s design. You may also swap between them to change the appearance of your website while keeping Divi running.