[TUTORIAL] How to Make Your Own WordPress Theme for Free

thegoldeneye

Power Member
Joined
Oct 26, 2015
Messages
544
Reaction score
518
I want to contribute more to this community, so I've been thinking about what I can share with you that is not already shared here by @Festinger related to WordPress. So I came up with this tutorial, and it might be interesting for you. At least I am going to try to make it enjoyable.

Why the hell would you waste your time making your WordPress theme while there are tons of WordPress themes out there?

Honestly, I don't know.

giphy.gif


When I'm thinking about selling my services to others (making a website), I think about offering them their unique theme, specially made for them. Doesn't that sound nice? If I'm a client, it would be nice to hear something like that. And this is the only reason why I would do that again.

But developing WordPress themes can take too much, and I need to have fantastic programming knowledge?

That's true and false.

I will share the easiest way you can develop your theme in a week. Maybe a little more, but you get the point.

So let's get started.

For this recipe, we will need the next ingredients:

  1. Underscores
  2. Elementor
  3. OptionTree Plugin

Let me first explain what Underscore and OptionTree are:

Underscore is a starter theme with minimal CSS, and all core functions your theme will need to work. But shouldn't we develop our own theme? Yes, we should, but we are using this core theme for making our own.

Check this out:

qdK12aU


Just click generate and save it.

This is just beginning, and don't think it's easy as that. We want to make it perfect without any bugs there, so let's continue.

But before we continue, let me tell you what OptionTree is and why we need that. Let's say you don't have good PHP knowledge, and this plugin will help you to make your custom theme options easily.

Something like this:


tuE3m4T


Here we have two tabs General and Notification Bar. In the general tab, we can change with color picker primary color and secondary color. You can make any option you want here. Do you want to change the logo here? No problem. The notification bar has these options:


pEHdBOG


You can change the message, link, background color, and even turn it on/off. We will come to that later, and I will show you how.

Let's continue.

Do you have a design of your WP theme? If not, make a one. It's easier, trust me. If you have, you want to change the screenshot.png image in your theme. It's a blank image by default, but you want to show something nicer there.

Now you have to upload your theme, activate and install the plugins you need. I needed these for my theme:

  1. Elementor - Free version, but I recommend paid, and you can buy one from @Festinger again for a couple of $.
  2. Elementor - Header, Footer & Blocks - Because I didn't have a premium version, I had to find a solution on how to make the header and footer easily. I even used this plugin to make my custom sidebar.
  3. Anywhere Elementor - We are going to use this one after making a sidebar
  4. OptionTree - Custom Options

When we have everything installed and ready, our next step is to start building the theme.

You may build it hard coding, but I do recommend using a builder for that. Before I decided to build my theme, I checked couple builders and the best one (read it free one) was Elementor builder. Some of you probably already know that my favorite is Avada Theme and their Fusion Builder, but I need to be open to other options.

I will not show you here how to use Elementor; you have YouTube for that. What the hell I'm going to show you then? How to use those things combined and how to make your own functions. This is going to be the remainder for me too.

Let's say just finished with building your theme, and you have everything ready. What's next? The next thing is to make some options. How we do that?

You will see in your WP Dashboard "OptionTree" under "Appearance", hover and click on Settings.

Function 1: Change the text color

In this function, we want to be able to change the text color of H1-H6 tags.


w7sG6ir


What I did here in the Label is that I named the option, and that name will be displayed in Appearance > Theme Options. ID "tag_colors" is the thing we will be using in the functions.php to make this thing work, and the type of the option is Colorpicker, and you have many other choices there.

Before we do anything in WordPress, open your functions.php file:

Code:
/* Custom Options CSS */

add_action( 'wp_head', function(){

    ?>

    <style>

    // Add here your code

    // Code will be this

    h1, h2, h3, h4, h5, h6 {

    color: <?php echo ot_get_option('tag_colors'); ?>!important;

    } // I don't need to explain, but you can see what we need that ID

    // Other tags and CSS options you add here

    </style>

    <?php

});


CmlxPSN


Congratulations, you have your first custom option!

giphy.gif

Making this option was easy; let's make something else.

Function 2: Change text in the shortcode

Now we will make a shortcode that will display text we want, but we want to be able to change that text inside of our Theme Options. Why? Let's say you have the promo code on your website, and it can be found on 20 pages. You don't want to change it manually, but neither wants to edit your functions.php every time you want to change the promo code.


1WDdn4c


We chose Textarea as a type, save.

You will not include this code in the example above, this is different, and it will stand alone in your functions.php so that you may add it under or above, not inside the function.

Code:
// Promo Code

function promo_code () {

    $promo_code_var = do_shortcode ("". ot_get_option('promo_code') . "");

    return $promo_code_var;

}


/* We are adding this shortcode, which means we need to say to WP and functions that we are making a new shortcode, and it will be working with a function. 
Meaning promoCode is [promoCode] you will place in your post/page, and promo_code is a function we are calling. */

add_shortcode('promoCode', 'promo_code');

What we did here is that we made a function, we made a $promo_code_var variable and said that var would be equal to do_shortcode, and inside of that, we called OptionTree with our option ID. In the end, we returned that because without that, your shortcode will not work.

Function 3: On/Off Option for Promo Code

In this function, we want to show/hide promo code, but without in one place. You saw in the picture above I have a notification bar activation option.


D65QrJw


You will need to add one more choice:

Label:
Off (or whatever you want)
Value: false

And save it.

Code:
// On/Off Function for Promo Code

function promo_code_activation() {

    $promo_active_var = ot_get_option ('promo_code_activation');

    if ('on' != $promo_active_var) {

        echo '<style>#promo_code{display: none!important}</style>';

    }

}

add_action( 'wp_head', 'promo_code_activation', 0 );

I think this is enough of functions and you get the point. This way, I saved your time reading their documentation and figuring out how this works. It's a pain in the ass, honestly.

We are done! :) Now it's all up to you and what you want to achieve with a WP theme.

Let me try to answer some possible questions:

Q:
Can I sell that theme on ThemeForest?
A: Probably, no.

Q: Can I sell that theme to a client?
A: Yes, you can, and if you decide to go with a free version of Elementor, you don't need to take care of licensing. But if you have an Elementor Pro, you can buy a license for a client, and I think you are going to be good.

Q: What about other page builders? Can I use them instead of Elementor?
A: I never tried any other, but if you have time and goodwill, you can give a shot.

I hope you will like this tutorial, and also I hope it will be helpful. If you have any questions, feel free.
 
I wasn't expecting this type of content around here. Thanks for sharing. Keep it up! :D
 
I want to contribute more to this community, so I've been thinking about what I can share with you that is not already shared here by @Festinger related to WordPress. So I came up with this tutorial, and it might be interesting for you. At least I am going to try to make it enjoyable.

Why the hell would you waste your time making your WordPress theme while there are tons of WordPress themes out there?

Honestly, I don't know.

giphy.gif


When I'm thinking about selling my services to others (making a website), I think about offering them their unique theme, specially made for them. Doesn't that sound nice? If I'm a client, it would be nice to hear something like that. And this is the only reason why I would do that again.

But developing WordPress themes can take too much, and I need to have fantastic programming knowledge?

That's true and false.

I will share the easiest way you can develop your theme in a week. Maybe a little more, but you get the point.

So let's get started.

For this recipe, we will need the next ingredients:

  1. Underscores
  2. Elementor
  3. OptionTree Plugin

Let me first explain what Underscore and OptionTree are:

Underscore is a starter theme with minimal CSS, and all core functions your theme will need to work. But shouldn't we develop our own theme? Yes, we should, but we are using this core theme for making our own.

Check this out:

qdK12aU


Just click generate and save it.

This is just beginning, and don't think it's easy as that. We want to make it perfect without any bugs there, so let's continue.

But before we continue, let me tell you what OptionTree is and why we need that. Let's say you don't have good PHP knowledge, and this plugin will help you to make your custom theme options easily.

Something like this:


tuE3m4T


Here we have two tabs General and Notification Bar. In the general tab, we can change with color picker primary color and secondary color. You can make any option you want here. Do you want to change the logo here? No problem. The notification bar has these options:


pEHdBOG


You can change the message, link, background color, and even turn it on/off. We will come to that later, and I will show you how.

Let's continue.

Do you have a design of your WP theme? If not, make a one. It's easier, trust me. If you have, you want to change the screenshot.png image in your theme. It's a blank image by default, but you want to show something nicer there.

Now you have to upload your theme, activate and install the plugins you need. I needed these for my theme:

  1. Elementor - Free version, but I recommend paid, and you can buy one from @Festinger again for a couple of $.
  2. Elementor - Header, Footer & Blocks - Because I didn't have a premium version, I had to find a solution on how to make the header and footer easily. I even used this plugin to make my custom sidebar.
  3. Anywhere Elementor - We are going to use this one after making a sidebar
  4. OptionTree - Custom Options

When we have everything installed and ready, our next step is to start building the theme.

You may build it hard coding, but I do recommend using a builder for that. Before I decided to build my theme, I checked couple builders and the best one (read it free one) was Elementor builder. Some of you probably already know that my favorite is Avada Theme and their Fusion Builder, but I need to be open to other options.

I will not show you here how to use Elementor; you have YouTube for that. What the hell I'm going to show you then? How to use those things combined and how to make your own functions. This is going to be the remainder for me too.

Let's say just finished with building your theme, and you have everything ready. What's next? The next thing is to make some options. How we do that?

You will see in your WP Dashboard "OptionTree" under "Appearance", hover and click on Settings.

Function 1: Change the text color

In this function, we want to be able to change the text color of H1-H6 tags.


w7sG6ir


What I did here in the Label is that I named the option, and that name will be displayed in Appearance > Theme Options. ID "tag_colors" is the thing we will be using in the functions.php to make this thing work, and the type of the option is Colorpicker, and you have many other choices there.

Before we do anything in WordPress, open your functions.php file:

Code:
/* Custom Options CSS */

add_action( 'wp_head', function(){

    ?>

    <style>

    // Add here your code

    // Code will be this

    h1, h2, h3, h4, h5, h6 {

    color: <?php echo ot_get_option('tag_colors'); ?>!important;

    } // I don't need to explain, but you can see what we need that ID

    // Other tags and CSS options you add here

    </style>

    <?php

});


CmlxPSN


Congratulations, you have your first custom option!

giphy.gif

Making this option was easy; let's make something else.

Function 2: Change text in the shortcode

Now we will make a shortcode that will display text we want, but we want to be able to change that text inside of our Theme Options. Why? Let's say you have the promo code on your website, and it can be found on 20 pages. You don't want to change it manually, but neither wants to edit your functions.php every time you want to change the promo code.


1WDdn4c


We chose Textarea as a type, save.

You will not include this code in the example above, this is different, and it will stand alone in your functions.php so that you may add it under or above, not inside the function.

Code:
// Promo Code

function promo_code () {

    $promo_code_var = do_shortcode ("". ot_get_option('promo_code') . "");

    return $promo_code_var;

}


/* We are adding this shortcode, which means we need to say to WP and functions that we are making a new shortcode, and it will be working with a function.
Meaning promoCode is [promoCode] you will place in your post/page, and promo_code is a function we are calling. */

add_shortcode('promoCode', 'promo_code');

What we did here is that we made a function, we made a $promo_code_var variable and said that var would be equal to do_shortcode, and inside of that, we called OptionTree with our option ID. In the end, we returned that because without that, your shortcode will not work.

Function 3: On/Off Option for Promo Code

In this function, we want to show/hide promo code, but without in one place. You saw in the picture above I have a notification bar activation option.


D65QrJw


You will need to add one more choice:

Label:
Off (or whatever you want)
Value: false

And save it.

Code:
// On/Off Function for Promo Code

function promo_code_activation() {

    $promo_active_var = ot_get_option ('promo_code_activation');

    if ('on' != $promo_active_var) {

        echo '<style>#promo_code{display: none!important}</style>';

    }

}

add_action( 'wp_head', 'promo_code_activation', 0 );

I think this is enough of functions and you get the point. This way, I saved your time reading their documentation and figuring out how this works. It's a pain in the ass, honestly.

We are done! :) Now it's all up to you and what you want to achieve with a WP theme.

Let me try to answer some possible questions:

Q:
Can I sell that theme on ThemeForest?
A: Probably, no.

Q: Can I sell that theme to a client?
A: Yes, you can, and if you decide to go with a free version of Elementor, you don't need to take care of licensing. But if you have an Elementor Pro, you can buy a license for a client, and I think you are going to be good.

Q: What about other page builders? Can I use them instead of Elementor?
A: I never tried any other, but if you have time and goodwill, you can give a shot.

I hope you will like this tutorial, and also I hope it will be helpful. If you have any questions, feel free.
Why can’t you sell the theme on themeforest?
 
Bookmarked this. Now that I'm drunk I believe I will nneed it in future. Thank you OzP
 
Very interesting read! Thank you so much! Gotta try this for my next project, where I need a simple theme.
 
Bookmarked this. Now that I'm drunk I believe I will nneed it in future. Thank you OzP

Jesus, are you still drunk? :D

Very interesting read! Thank you so much! Gotta try this for my next project, where I need a simple theme.

No problem! Let us know if you really tried this.

P.S. Guys if you have any topic you would like me to cover, let me know here. Thanks.
 
No chance! :D

Good guide though

Why ? because of page speed ? I thought elementor was the best page builder ? any other better alternative for non coders ?

OP thank you for this guide, even if I have zero coding knowledge and don't think I will need this, I read all by curiosity and it was interesting :D
 
Why ? because of page speed ? I thought elementor was the best page builder ? any other better alternative for non coders ?

OP thank you for this guide, even if I have zero coding knowledge and don't think I will need this, I read all by curiosity and it was interesting :D

Okay, so when it comes to the page speed, these are the results of this theme (CDN not included):




e6rwrtn


I cannot show the link, you will need to trust me. The only plugin for optimization is the Lazy Load by WP Rocket (not WP Rocket Premium and Full version). On the homepage, I have a Google map embedded. So yea, Elementor is the fastest builder out there.
 
Okay, so when it comes to the page speed, these are the results of this theme (CDN not included):




e6rwrtn


I cannot show the link, you will need to trust me. The only plugin for optimization is the Lazy Load by WP Rocket (not WP Rocket Premium and Full version). On the homepage, I have a Google map embedded. So yea, Elementor is the fastest builder out there.

I wanted to redesign one of my website so thank you, your reply helped me greatly, I will use Elementor, you also said you are a huge Avada fan, is it also a great alternative to Elementor for non coders ? Just by curiosity :)
 
I wanted to redesign one of my website so thank you, your reply helped me greatly, I will use Elementor, you also said you are a huge Avada fan, is it also a great alternative to Elementor for non coders ? Just by curiosity :)

I am glad I helped you.

Yes, Avada can be an alternative to Elementor for non-coders, but Avada has a lot more options, and a lot more options mean = heavy theme - heavy site. So if you are more familiar with Elementor than with Avada, I would recommend you to stick with Elementor, even if it's a free version and you can make great sites with that too.

This elementor plugin has tons of amazing addons for free, you may check it.

screenshot-6.png

I used this one and it's very good. I forgot to mention it in the post.
 
I am glad I helped you.

Yes, Avada can be an alternative to Elementor for non-coders, but Avada has a lot more options, and a lot more options mean = heavy theme - heavy site. So if you are more familiar with Elementor than with Avada, I would recommend you to stick with Elementor, even if it's a free version and you can make great sites with that too.

https://wordpress.org/plugins/ht-mega-for-elementor/has tons of amazing addons for free, you may check it.

screenshot-6.png

I used this one and it's very good. I forgot to mention it in the post.

I will check it, thank you :)
 
Nice to see some uncommon shares every now and then. Excellent work.
 
Back
Top