How To Change Default WordPress Custom Type Or Register Your Own Custom Post Type

There are two ways of creating custom post types into WordPress: First is using a “plugin” but if you want to keep your WordPress website liteweight then adding a snippet of code to your child theme’s function.php would be the best practices.

Note: If you don’t want to keep your hands thirty then simple use custom post type maker plugin to generate your preferred custom post type. Also, using a ‘child theme’ is a must if you do the manual way of adding custom post type in your function.php otherwise your code would not be “safe”, it will be vanish once you update your Parent WordPress theme.

Now, Let’s begin to create a custom post type!

But first let me ask you a question, would you like to create a new one or just overwrite the existing default custom post type available on your WordPress theme? If the answer is both then no worries, I will reveal the solutions.


Register Your Own Custom Post Type :

Let say you want additional custom post type named “Calculators”? Your magic savior is to use the function called register_post_type( string $post_type, array|string $args = array() ) . That will allow you to register a new section on WordPress dashboard. Take note string $post_type  can be anything, you can use whatever name you want!

Here’s the example syntax:

function my_custom_section() {
register_post_type( 'calculators',
'labels' => array(
'name' => __( 'Calculators', 'divi' ), 
'add_new' => __( 'Add New', 'divi' ),
'singular_name' => __( 'Calculator', 'divi' ), 
    'has_archive'  => true,
    'hierarchical' => true,
    'menu_icon'    => 'dashicons-editor-table', 
    'public'       => true,
    'rewrite'      => array( 'slug' => 'calculators', 'with_front' => false ),
   'supports'     => array(),
add_action( 'init', 'my_custom_section' );


Overwriting default custom post type available in your WordPress theme

Now, what if there’s a default custom post type in your WordPress theme that is not useful and you just want to update the name? Example “the default Projects custom post type available in Divi“?  Well, all you need to do is get the exact registered post type of that section. When you view to all section and view each projects, you will see that the reserve name is “project

how to change the default custom post type in wordpress

Make sure you note the reserve name and assign it to $post_type.

overwriting default wordpress custom post type

Rule of thumb: Once you activate your child theme and add the code to your child theme’s function.php, it will overpower the parent theme.

If you want to add more labels and arrays then here’s the complete list: Visit the WordPress register custom post type documentation for more guide about the syntax. 
full list of custom post types labels and array

How To Create A Responsive Divi Timeline Module – Divi Tutorial

Divi timeline module is one of the perfect front-end design you should be using if you want to highlight a certain process. In this blog, I will breakdown how you can manipulate your Divi timeline template using a custom CSS grid.


1. Declare a CSS Class On Your Divi Column Module

The column holds your text modules so we need to attach the custom CSS class to tweak the standard design in Divi. For this example, I prefer to name it grid-process.

Why I am using 1 column instead of 2?
If we use 2 columns, we can’t manipulate the text modules position. Basically, if you want to have full access to the positions of your text modules, they should be only sitting on 1 container. 

steps to create divi timeline template

2. Determine the position of Divi timeline text modules

These text modules are categorized into 3 sections namely v-line, right-align and left-align. Label as Line should have a class of v-line while Left should be left-align and obviously Right should be right-align. 

placement of the text module to create divi timeline module

Let’s use the Left: 1. Initial Consult Label as an example. If you check the screenshot below, I have labeled the class to left-align because the Label is left.

Also, don’t forget to add the pagination class. Since this is number one, I added a class name called p-one. Kindly follow the process on the rest text modules.

Don’t have time to follow the steps above? Hire me for only $25 one-time setup, just leave me a message on Facebook

divi timeline template tutorial


Now, go back to content tab and type the following html code below under text tab. You can rename the class to stepwhite if you want to change the color into white instead of navy blue.

how to create right to left icon for divi timeline module

We’re almost finished! For the Line label, you can keep the CSS Class empty but make sure you put the empty div class just like below.

Feel free to change the color of your vertical line by changing the hex color under background e.g <div class=”v-line” style=”background:red;”></div>

html code to create vertical line at the middule of the divi timeline module


It’s time to style your Divi timeline template! Go to WordPress dashboard > Divi > Theme Options > Custom CSS

/*process */
span.stepnavy, span.stepwhite{
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 2px 10px 3px rgba(0,0,0,0.15);
font-weight: bold;
line-height: 2.6em;
margin-right: 5px;
text-align: center;
width: 2.6em;
}span.stepwhite {
background: #fff;
color: #2C3A5A;
}span.stepnavy {
background: #2C3A5A;
color: #fff;
}@media (min-width:768px) {
.grid-process .et_pb_column {
grid-template-columns: 49% 2% 49%;
‘two v-line one’
‘three v-line four’
‘five v-line six’;}.v-line {
grid-area: v-line;
margin: 0 auto;
}.p-one {grid-area: one;}
.p-two {grid-area: two;}
.p-three {grid-area: three;}
.p-four {grid-area: four;}
.p-five {grid-area: five;}
.p-six {grid-area: six;}.right-align span.stepnavy,
.right-align span.stepwhite {
}.right-align h3, .right-align p {
}.right-align p {
}.left-align span.stepnavy,
.left-align span.stepwhite{
}.left-align p {

Here’s the preview. This can be tweak according to your liking. Just edit the position of your grid areas for more flexible look.

Don’t have time to follow the steps above? Hire me for only $25 one-time setup, just leave me a message on Facebook

divi timeline module

How To Install Scss In Visual Studio – Beginner’s Tutorial To SASS

Lately, I’ve been busy revamping landing pages from Hubspot and decided to record the basic process of developing a landing page from scratch using SCSS and VS. If you haven’t use Sass yet, I highly recommended trying this awesome meta-language. Literally, it will change your life dramatically.

What is Sass?

Sass is an extension of CSS3. The framework allows you create rules that css doesn’t offer like nested rules, mixins, selector and much more. However, this secondary language doesn’t support on traditional browsers, you need a compiler to convert it into CSS but with the help of Visual Studio extensions, you can set it up in just few clicks.

Basic Cheat Sheet For Sass Rules

// Scss Mixins and Extends// Extends
%center-container {
margin:0 auto;
width: 90%;

.section-header {
extend %center-container;

@mixin custom-list {
list-style: none;

.my-ul ul {
@include custom-list;

// SASS Nested Rules
. parent-header {
p {color: black;}
// Scss Selector
$primary-color: 1E73BE;a {
color: $primary-color


First, open the visual studio code. If you haven’t yet, please download here.

Files You Need To Create:

  • index.html
  • style.scss
  • style.css

1. Create A Boilerplate In Your Index.Html

Use the boilerplate below and link the style. css. You can install a “” extension in visual studio to automatically paste the boiletplate

<!DOCTYPE html>
<html lang=”en”>
<rel=”stylesheet” href=”style.css”>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document Here</title>


2. Add a live SASS compiler extension

Basically, live sass compiler extension allow you to compile scss to css. You can also a map a minified version of your css though I haven’t covered this in my tutorial.

    1. Click the broken square icon for extension
    2. Use the the search box and type live sass compiler
    3. Click the Install Green
    4. Reload the Visual Studio if needed.

3. Start adding sass codes on your style.scss

Start adding you scss code, you can check the SASS documentation on their Official site for more information on how to use their cool features like mixins, extends, variables and among others.

4. Click the watch button.

Click the Watch Sass located at the bottom of your Visual Studio to compile your SCSS to CSS or press ctrl+s (Windows) and cmd+s(Mac)

how to install sass

5 Proven Ways To Fix Saving Issue in Divi And Other Elegant Themes

For the past years, saving issue in Divi and other Elegant Themes like Extra is a common issue of a website owner. In this blog, I’m going to guide you the possible causes of saving issue in Divi.

A. If Saving Issue In Divi Happens In All Pages


A1. Check If Divi Theme Is Outdated

Make sure you always update your Divi to avoid conflicts. Try also deactivating the child-theme, if that triggering the problem then there are bad codes live in your file.

make sure to keep your Divi theme updated to avoid saving issue

A2. Mixed Content Warnings or AJAX Error

Inspect the elements if there’s any warnings or errors. The common problem I am seeing is Mixed content warning and AJAX error.

  • Mixed Content Warnings

install simple ssl plugin to fix the mixed content warnings

Normally, this occurs once you convert your site to secure https. In this case, you need to force all the non-https links to convert to https. The easy way to do that is to install a simple SSL plugin. Just go to WordPress plugin repository or go to WordPress dashboard > Plugins > search the plugin Really Simple SSL > Install > Activate.

  •  AJAX Issue Error

how to fix ajax error in divi

Ajax is one of the major components to make Divi Builder work and this is a server-side issue.  This problem is kinda tricky, sometimes it gives you problems on general pages or on a specific page. You can also experience unstable functionality like “saving issue” works just fine yesterday but it suddenly stops working now.  In this case, you need to make sure that the mod_security is not blocked on your server so contact your hosting provider for more assistance.

A3. Unknown Errors Due To Outdated WordPress Version

If you see any weird errors in the console after updating the parent Divi theme then probably the cause is not the Divi itself but the conflicts between your WordPress core. The fastest solution is to go to General > Updates.

update the wordpress core to fix the saving issue

Sometimes that process doesn’t work which ends you re-updating your WordPress manually.

How To Do This?  Go too WordPress.Org then download the recent version of WP.

  1. Unzip your WordPress files
  2. IMPORTANT! Delete the wp-content
  3. Upload all the files in FTP to overwrite your WordPress files.

Note: It’s very important not to SKIP step 2 because those files hold your themes. You should delete the wp-content folder before overwriting the files via FTP.

A4: Clear You Cache Then Refresh Your Permalinks

In most cases, this works! Go to WordPress dashboard > Theme Options > Builder > Advanced > Clear Your Cache. If you’re using a plugin then you will need to clear it as well.

Lastly, refresh your permalinks by going to Settings >Pemalinks > Plain > Save Changes button. After 30 seconds, move it back to the Post Name

A5: Check Your Hosting If the PHP Version is Outdated

Divi teams area really good in updating their products and using an old version of PHP might interfere with the performance of your Divi Builder so make sure it is currently running at least 7.0 upper. You can talk to your hosting provider to make an update for you

A6: Doesn’t Have Enough PHP Directive Values

To maximize the value, open your wp-config.php via FTP (Please be careful since this holds your database). Add the following codes below where most @init_set syntax sit. If you’re scared with coding stuff then use Increase Maximum Upload File Size plugin

@ini_set( ‘upload_max_size’ , ‘300M’ );
@ini_set( ‘post_max_size’, ‘300M’);
@ini_set( ‘memory_limit’, ‘600M’ );

B. If the Saving Issue in Divi Happens on Specific Page or Post

This problem might be due to custom CSS or Jquery you added in your post. There are two ways to check it:

check if theres bad css custom in page css module to fix the saving issue in divi

  • Check the Global CSS and jQuery under Divi Theme Options
  • Check the custom CSS in your parent module
  • Look on your individual modules if there’s any bad CSS code or jQuery code.


How To Create A Divi Blog Grid Layout That Has Overflow Featured Image

Recently, I saw a question on the Facebook group on how to style their Divi blog grid layout into a unique way. In this vtutorial, I’m going to give you the step by step tutorial on how to revamp your Divi blog module.

1. Add A Class On Your Divi Blog Module

The first step is to add a class name to your blog module so we can style your Divi blog grid layout.

On my case, I used overflow-blog as class name, you can use any name you want.  This can be done by using a Divi blog module, click the Advanced tab then CSS Class.

divi blog grid layout

2. Style Your Divi blog grid layout Using Custom CSS

In order to overwrite the default styles, we need to declare group of css syntax. Simply go to WordPress dashboard > Divi > Theme Options > Custom CSS. If you’re using a Divi child theme, you can also insert the code below in style.css

.overflow-blog .et_pb_post {

.overflow-blog .et_pb_post h2.entry-title {

.overflow-blog .et_pb_post h2.entry-title {
padding: 10% 4% 2% 4%;

.overflow-blog .et_pb_post .post-meta,
.overflow-blog .et_pb_post .post-content {
padding: 5% 4% 10% 4%;

.overflow-blog .et_pb_post h2.entry-title,
.overflow-blog .et_pb_post .post-meta,
.overflow-blog .et_pb_post .post-content {
position: absolute;
background: #fff;
width: 88%;


.et_pb_column.et_pb_column_empty .overflow-blog{

.overflow-blog .et_pb_post h2.entry-title,
.overflow-blog .et_pb_post .post-meta,
.overflow-blog .et_pb_post .post-content {
border-right: 1px solid #026AC1;
border-left: 1px solid #026AC1;

.overflow-blog .et_pb_post h2.entry-title {
border-top: 1px solid #026AC1

.overflow-blog .et_pb_post .post-content{
border-bottom: 1px solid #026AC1;

.overflow-blog .et_pb_post .post-meta,
.overflow-blog .et_pb_post .post-content {
margin: 0;

.overflow-blog .et_pb_post a.more-link {
color: #fff;
background: #026AC1;
padding: 5px;
margin: 10% 0;
text-transform: uppercase;


Basically, the css code push the post container to overflow the featured image. You can download the .json file here and check the demo  This will work on all themes as long as you are using Divi Builder.

By the way, I have also other Divi blog layout that is perfect for heavy content blogs. Feel free to check, you might like it. 🙂

best divi blog layout swapping buttons interactive blog 1

How To Make Your Google Adsense Responsive In WordPress

Recently, I had an issue with google Adsense on how to make it responsive in all devices. Since I am starting to earn money on Adsense, I don’t want to remove it so dig in and luckily found the documentation from Google Adsense resource.

This tutorial basically cover how I interprent the tutorial provided by Google Adsense. I believed it will work on all ad units including display ads, in feed ads, in-article ads and even in link ads. 

Step 1: Insert a Custom class on your adsense script

Insert a custom class after the adsbygoogle class so we can overwrite the style of our ads. Kindly check the before and after below to see the difference.


< ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-4299086769596754" data-ad-slot="6478502035">


< script async src="">
< ins class="adsbygoogle responsive-adbanner" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-4299086769596754" data-full-width-responsive="true" data-ad-slot="6478502035">

< script>
(adsbygoogle = window.adsbygoogle || []).push({});

Now, copy/paste the code on theme options or style.css. Basically, this code will tell the browser to adjust the width of the adsense once it reach the declared viewport. The other css code generally normalize the styling and removing any scrolling styles on your adsense.

.adsbygoogle.responsive-adbanner {
.adsbygoogle.responsive-adbanner {
.adsbygoogle.responsive-adbanner {
overflow: hidden;
margin: 2rem 0;

If you don’t want to use custom css, adding a inline-style on the script will work but for best practices, it’s highly recommended to keep your code DRY (Don’t Repeat Yourself).