In times past, if you want to create or build your own WordPress custom theme, you definitely need to know code or understand technical skills. However, life is changed now, it does not require coding experience to create a powerful custom theme and it takes only an hour to complete the whole process. This article today is a detailed WordPress Custom Theme Tutorial that you can try if you are a newbie.
Creating a Custom Theme – WordPress Custom Theme Tutorial
In general, WordPress themes are written in CSS, HTML, JS, and PHP. Hence, to create a powerful custom theme, you need to understand all these languages or you should hire a developer. However, hiring a web agency or a web developer costs a lot of money. In particular, if you are having a small or medium business, it’s hard to afford this cost. So some people choose the default WordPress themes.
Now you have other options to build a custom theme like using a drag-n-drop page builder or using a theme framework. However, you can not use a theme framework if you are not a developer or a techy person. So using a page builder plugin is probably a perfect choice for everyone and every level. But this option has a limited layout to build custom themes.
To solve this matter, you now can try the most famous builder platform, Beaver Builder. Plus, the plugin has Beaver Themer add-on which helps to build a custom theme layout easily using a drag-n-drop interface.
Keep reading to check more the WordPress Custom Theme Tutorial below!
Setting up Beaver Themer to Build a WordPress Theme – WordPress Theme Tutorial
To set up, your website should have Beaver Builder as well as Beaver Themer. You can easily install WordPress plugins and activate them within a few clicks, no coding needed. As I have said, Beaver Themer add-on helps to make a WordPress custom theme, however, your site still needs a theme to begin.
To choose a perfect theme, you can try to find some free & lightweight themes on WordPress.org. All themes come with multipurpose and full builder plugins ready such as Astra or OceanWP.
In this WordPress Theme Tutorial, we will choose Astra to install since it is a fast, responsive, clean code, and customizable WordPress theme.
Setting up Your Theme for Beaver Themer
After having Astra theme and Beaver Themer, you should make sure that Beaver Themer can access all parts of the page.
Normally, the Astra default has a sidebar.
Hence, you should go to the WordPress admin panel to switch to no sidebar for using Beaver Themer easier. On the admin panel, choose Appearance -> Customizing layout -> Default layout -> No sidebar -> Publish. This full-width layout will help to use Beaver Themer better.
Every theme usually offers full-width pages. You can change to no sidebar, or remove sidebar in theme settings, or contact your theme support team if you can not find the first option. It’s one of the most important steps in WordPress Custom Theme Tutorial.
Quick Beaver Themer Fundamentals
This Beaver Themer add-on works on top of the Beaver Builder. Hence, you should use this Beaver Builder by dragging-n-dropping elements to create your stunning custom layouts. You might see templates, columns, rows, and modules if you click on the “add” button at the top right corner.
Moreover, a theme often has a set of pre-made templates so you can select one of the themes to start designing according to your own taste. Then you can save your layouts to use later as other templates.
That is the way to create a page layout only. To build a powerful custom theme, you should go to the WordPress admin panel -> click “Add New” -> Type: Themer Layout and Layout: Header.
You can fully create whatever custom layouts for many template parts like header, footer, 404, etc. With Beaver Themer & Builder, you will get a custom theme that’s suitable for your purpose.
Using Beaver Themer Templates to Create a Custom Theme – WordPress Custom Theme Tutorial
Building a Custom Header for Your Theme
First, you need to create a custom header layout. Simply go to your sidebar admin panel, hover to Beaver Builder -> Then click “Add New” -> Enter the “Title” for your header, click “Themer Layout” for “Type” and “Header” for “Layout“. Then you click the “Add Themer Layout” button to see the next page, the layout settings.
On the “Edit Themer Layout” page, you can select “Entire Site” in the “Location” part then click the “Launch Beaver Builder” button.
At this step, you can see basic header layouts as a beginning point. And it’s time for you to customize what header you want by hovering to the “Add” button at the top right corner and click it. You can edit or add any module, template, color, text, and so much more then click the “Done” button to save/ publish the layout.
That’s all for creating a custom theme header and now let’s build a custom theme footer.
Building a Custom Footer – Custom WordPress Theme Tutorial
As you have done creating a custom header, you now can easily make a custom footer with Beaver Builder. Let’s go to Beaver Builder WordPress admin panel -> Click “Add New” -> Enter the “Title” for your footer, click “Themer Layout” for “Type” and “Footer” for “Layout” -> Click “Add Themer Layout” to go to the layout settings page.
On the “Edit Themer Layout“, go to “Location” -> select “Entire Site” -> click “Launch Beaver Builder“.
You can see a basic footer layout with 3 columns and start changing any aspect you want, like colors, fonts, image, etc then click “Done” to save/ publish your footer layout.
Building Content Area for Post and Pages
To create content area for posts and pages, simple click on “Add New” in the “Beaver Builder” admin panel, enter “Single Posts and Pages” on “Title” part, choose “Themer Layout” for “Type“, and select “Singular” for “Layout“. Finally, click on the “Add Themer Layout” button to go to the “Edit Themer Layout” Page.
On the “Edit Themer Layout“, you select where to display this layout. It can be all single posts & pastes or separate posts/ pages then click “Launch Beaver Builder“.
You can see a singular post/ page layout now. Then it allows editing the title, content, author bio, and comments. It’s possible to add new rows, columns, modules then click “done” to save/ publish the layout. You can refer WordPress World via our blogs too.
Have you done this step in our WordPress Custom Theme Tutorial? Let’s move to the archive layouts.
Creating Archive Layouts – WordPress Theming Tutorial
Same as the above steps, you can go to Beaver Builder on the sidebar admin panel, click “Add New” and provide a title for the archive layout, choose “Themer Layout” for “Type and “Archive” for “Layout” part then click “Add Themer Layout“.
It will navigate to the “Edit Theme Layout“. On this page, go to “Location” and choose the “All Archivers” option. In addition, you can create date archive type, search results archive type, category archive type, and so on. After that, you should click the “Launch Beaver Builder” button to see what your archive layout looks like.
You can see the archive title right on top of your layout and edit or add any aspect you want. T click the “Done” button to save/ publish what you have changed.
Creating Other Layouts – Custom WordPress Theme
For creating other layouts, you can easily do it in template hierarchy like what you have done on creating headers, footers, posts & pages, archive layouts. You can create the search results layout or even the 404 page or any other pages.
To Warm up
Thanks to the Beaver Builder, you can now create your own custom theme easily even if you are not a developer or a techy person. Hopefully, you like this WordPress Custom Theme Tutorial and it helps you to understand more about designing a website.
Read More: 30 Best Elementor Templates and Themes (Free & Paid)
