Discover how to create a WordPress theme from scratch and without programming with the help of a free and open source tool.

In the market there is an extensive amount of free and other paid templates that you can choose for your WordPress website. But, it is true that sometimes you may want something more custom that the template does not solve by default.

The most important limitation for this is that it requires mastering various languages ​​such as PHP, CSS and HTML. But, there is an option with which you can create your own templates or themes without knowing anything about programming, you will discover it below.

What is Theme Generator

Theme Generator is a visual WordPress responsive theme builder that you can use not only to create your own, but also to sell them to third parties. It is open source and although it is paid, it also offers a free account with extensive capabilities.

It allows you to start working on a custom theme under a specific template or completely from scratch, adding pre-built blocks with a simple drag and drop.

It has a YouTube channel, as well as documentation and forums that will help you reduce the learning gap. You can create a particular configuration for each device.

How to Sign up for Themes Generator for WordPress?

To register for free, you only need to click on the Join free button located in the upper right region of the screen.

This will take you to a lower section of the page where the Sign Up button is located. Hit a click there.

Next, it will be necessary to provide some data, create a password and accept the terms and conditions to access the platform.

Once you enter the data and accept the terms, click on Create an account. The platform will tell you that your account has been successfully created.

Click on the login link. Now add your email and password, certify that you are not a robot and click on the button Sign in to your account.

This will enter the main environment of Themes Generator.

How to Create a WordPress Theme with Themes Generator?

Now, the first thing that needs to be done is to put your canvas completely blank to start working from scratch. To do this, close the window that is displayed in the central region and press a click on the trash can button that is located in the upper region.

The platform will ask you if you agree to delete the canvas. Click on OK.

Now the canvas will look like this.

A web page is made up of a header, a body, and a footer.

Create Topic Header

As you can see, in the right region there are a series of resources that you can use to create your theme from scratch. To create the header, the brand logo and a navigation menu are often added.

So the first thing you need to do is include a table with two separate areas that include these items. Click the button and drag to the canvas.

Now, include a header separator to indicate the space where this area ends. To do this, click the Header Separator button and drag onto the canvas.

In order for the logo to be included in the upper left region, you will need to add an image asset. Locate the Image icon and drag it to the top left section.

Choose the image of your choice, click on Add image and close.

Now in the right region you can add a menu. Choose the Navigation Bar resource button from the menu and drag it to the top right region of the header table.

This will separate the area for the header, but will not display anything else as this space must be customized via the Customize - Menus - Locations and Customize - Menu Styles option after you install the theme on your website.

Create the Body of the Theme

To create the body of the topic, there are many ways to do it. In this example we'll add a banner first, so select the Slides button and drag it to the center region of the canvas.

Now, it includes a section separator to indicate that a new space is coming. Drag the button onto the canvas and then once selected, change the shape from Triangle to Curve 1 and the color to a light blue.

Add a table with 3 cells, through the Box width percentage icon (3). Insert a text in each cell through the respective option. Change the font to Arial black and centered.

Topic Footer

To make the foot, we have to add the respective separator.

Now we are going to add a table with 5 columns and in the central part we will add social network icons. Change, in the Layout section, the width percentage of each column with the central ones at 5% and the two border ones at 42.5%.

Export Theme for Wordpress

A theme is much more than this draft example, but by way of introduction you will see the potential of this wonderful editor. Once you're done with your template, you'll need to export the template so it can be uploaded from Wordpress.

So now choose the Export to Wordpress option with the icon that is located in the upper region.

Next, a window with HTML code will appear. Click on Export Wordpress Theme and this will download a compressed ZIP format.

Now, it is necessary to go to your Wordpress website and in the main menu choose the Appearance option and Add a new theme.

Then click on Upload Theme and Select File to choose the file downloaded by Themes Generator.

Click on Install Now and then on Activate. Then, if you visit the site you will see how the template is displayed.

Now go to Appearance, Menu, View location and choose the menu you have configured. It will look like this.

Of course there are still many elements to configure. You will need to download some plugins for the banner to work.

But, in general terms, this is how a custom theme is created and assembled from scratch and without programming.

Conclusion

Theme Generator is an open source tool with which you can create custom themes, from scratch, for personal or commercial use. You do not need to know programming and it is very easy to learn.

You can register for free and forever, although the paid versions include other additional features. The free plan has a good margin of action and will allow you to create and mount your custom themes in Wordpress without problems.

Thanks for your time ;-)