How to easily create a custom WordPress theme (without code)

by admin-kervin
How to easily create a custom WordPress theme (without code) 1

Do you want to create a custom WordPress theme from scratch?

Previously, you had to follow WordPress Codex and have enough coding skills to create a custom WordPress theme. Thanks to the new WordPress theme generators, anyone can create a fully customized WordPress theme in one hour (no programming skills required).

In this article, we will show you how to easily create a custom WordPress layout without writing code.

Create a custom WordPress theme for beginners

Unlike static HTML sites, WordPress themes are a set of template files written in PHP, HTML, CSS, and JavaScript. Typically, you must either understand all of these web design languages ​​or hire a web developer to create a custom WordPress theme.

If you've hired a developer or agency, the price of a custom WordPress theme can be in the thousands of dollars.

Since many small business owners couldn't afford the high cost of a custom WordPress theme, many of them simply chose the default themes that come with WordPress.

Those who didn't want to commit and wanted customizations used a WordPress drag-and-drop page builder or theme frame to create a custom theme.

While WordPress theme frameworks made it easy to create a WordPress theme, they are a developer solution and not an average site owner.

On the other hand, WordPress plugins made it very easy for the page creator to create custom page layouts using a drag and drop interface, but they were limited only to the layout. You cannot create custom themes with it.

Even Beaver Builder, one of the best plugins for WordPress site builder, has decided to fix this problem with its plugin called Beaver Themer.

Beaver Themer is a site building plugin that allows you to create custom layouts using a drag and drop interface without having to learn coding.

Let's see how to easily create a WordPress theme with Beaver Themer.

Video-tutorial

Subscribe to WPBeginner

If you don't like the video or need more instructions, read on.

Configure Beaver Themer to create a custom theme

Beaver Themer is an additional plugin for Beaver Builder, so you need both plugins for this article.

First, install and enable the Beaver Builder and Beaver Themer plugins. For more information, see our step-by-step guide to installing a WordPress plugin.

With Beaver Themer you can create a custom theme, but you still need a theme to get started. We recommend using a lightweight theme that includes a full-width page template to serve as a starting theme.

You can find many of these themes in the WordPress.org theme directory. Most modern WordPress themes include a full width template. Our best options are:

  • Astra – A free and easy WordPress theme for any purpose with built-in support for Beaver Builder.

  • OeanWP – Another popular free WordPress multipurpose theme that provides full support for page creation.

  • StudioPress Layout – All of your layouts are Beaver Builder compatible and work well with Beaver Themer.

For this tutorial, we used Astra, a lightweight and easily customizable WordPress theme.

Nous recommandons:  LG introduced the K40, K50 and Q60 models: how are the new cell phones that arrived in the country - 08/17/2019

Set up your theme for Beaver Themer

When creating a custom WordPress theme with Beaver Themer, it is important to ensure that Beaver Themer has access to the entire body of the page (from edge to edge).

This is Astra's standard design. As you can see, this design includes a sidebar that can be difficult to work with when using Beaver Themer.

Standard layout design with a side bar

You can change this by visiting the admin panel of your site and then browsing Appearance »Customize Side. From here you have to change Design »side ​​bars Heavy.

Disable sidebars for your theme

Simply select "No page pane" in the default layout option and click the "Publish" button to save the changes.

Your theme now uses a design with no side bars. This is the best design for Beaver Themer.

Themed design without side bars.

This full page layout allows Beaver Themer to use every inch of the screen so you can create a beautiful end-to-end visual experience.

Most WordPress themes include a full width page template. If you use a different theme, you will find an option to remove the sidebars in your theme settings.

If you can't find it, contact your theme developer for help.

Once you have set up your theme in a full width layout, you can use Beaver Themer to create your custom WordPress theme.

The basics of Quick Beaver Themer

Beaver Themer collaborates with Beaver Builder. With Beaver Builder, as an add-on to the page builder, you can drag and drop elements onto a page to create custom layouts.

It contains the following elements that you can use in your designs:

  • Template – A collection of columns, rows, and modules that make up a full page layout.
  • Columns – vertical layout modules that allow content to fit horizontally.
  • Lines: horizontal assembly of several modules.
  • Module: An element that generates certain information such as title, text block, table, gallery, etc.

Just edit a page in Beaver Builder and then click the Add button in the upper right corner. Then you can drag and drop columns, rows and modules on your page and start editing right away.

Use Beaver Builder

If you don't want to start from scratch, first select a list of prepared templates.

Beaver builder templates

Beaver Builder also allows you to save your designs and use them later as templates.

For more information, see our article on how to create a custom page layout with Beaver Builder.

However, we don't just want to create page layouts. We want to create a totally personalized theme.

This is when Beaver Themer arrives.

Add another element to Beaver Builder called "Themer Layout".

Themer design

Themer layouts allow you to create custom layouts for header, footer, content, 404 page, and other template sections.

These are the building blocks of all WordPress themes. You can use these building blocks to create a custom theme that meets your needs.

Use Beaver Themer templates to create a custom WordPress theme

In the instructions below, we will walk you through the steps necessary to create the most popular custom theme elements. With that done, you have completely transformed your basic theme into a fully customized WordPress child theme.

Nous recommandons:  ONA will apply 15 thousand toxicological tests on terminals and roads

Create a custom header for your theme

Let's start with the title of your site. A custom header is an integral part of a theme and it can be difficult to create a header using traditional methods.

Fortunately, Beaver Themer has built-in header functions. You can use the previously trained template or use the menu and image modules with a two column layout.

To get to this header area, you must first set up a header layout in Beaver Themer. visit Beaver Builder »Add new Page and enter a title for your header.

Create a custom header layout

Then select "Design Themer" as the type and "Header" as the design option. When done, click the "Add theme theme" button to continue.

This will take you to the layout configuration page. From here, select "Full Site" as the location of the title template.

Layout settings

Then click the "Start Beaver Builder" button to open the generator interface.

Beaver Builder starts with a simple base column and a two-line header layout as a starting point.

Header design

You can use the same drag and drop tools of Beaver Builder to change the background, colors, text, etc. You can also add other modules, load premade templates, and add rows / columns by clicking the Add button in the upper right corner.

When you are satisfied with the design, click the Done button to save or publish your design.

Now you can visit their site to see the title of your custom theme in action. As you can see we apply the header layout to our custom theme.

Custom header for your custom theme

There's no content other than the title yet, and you'll likely see the footer area of ​​the base topic.

Let's change that.

Create a custom footer for your theme

You can use Beaver Themer to create a custom footer for your theme, just as you have created a custom header.

Go to Beaver Builder »Add new Page and enter a title for the footer layout. Then select "Layout Themer" as the type and "Footer" as the layout option.

Footer layout

Click the "Add Themer Design" button to continue.

This will take you to the layout configuration page. From here, select "Full Page" as the template location.

Footer layout settings

Then click the "Start Beaver Builder" button to open the generator interface.

Beaver Builder starts with a three column footer layout. You can use this design as a starting point and start editing.

Edit your footer layout

You can add modules, text blocks, or anything else you want. You can change colors, fonts, add a background image, and more at any time.

When you are satisfied with the design, click the Done button to save or publish your design.

Create a content area for posts and pages

Once we've created headers and footers for each page and content on the site, it's time to create a post or body on the page (content area).

Nous recommandons:  Circul8 a Minimalist Theme for iPhone and iPad

We start in the same way that we create the header and footer and add the Singular layout to Add new page.

Create posts and page layouts

Then choose where this design should appear. You can select singular for all posts and individual pages, or select posts or just pages.

Unique design configuration

Then click the "Start Beaver Builder" button to open the generator interface.

Unique design edition

Beaver Builder loads a unique sample layout with the title of the previous article / page, followed by content, author biobox and comment area.

You can point and click to edit one of these items or add new modules, columns, and rows as needed.

When you are satisfied with the design, click the Done button to save and publish your changes.

You can now visit their site to see them in action.

Themed design with content.

Create file layouts for your custom theme

Once your custom theme is formed, you can still create layouts for other parts of your site. WordPress lists its categories, tags, authors, and monthly files on archive pages.

Let's create an archive page layout for your custom theme.

You start with a visit Beaver Builder »Add new Page and enter a title for your file design.

Create a file layout for your custom theme

Then select "Layout Themer" as the type and "File" as the layout option. Click the "Add Themer Design" button to continue.

This will take you to the layout configuration page. From here, select "All files" as the location of the template. You can also create separate layouts for each file type, eg. Date, search results, category, tags, etc.

File layout settings

Then click the "Start Beaver Builder" button to open the generator interface.

Beaver Builder starts with a simple column layout. The file title appears at the top followed by submissions.

Edit the file layout for your theme

You can point and click any item to edit its properties. You can also add new modules, rows and columns if necessary.

Then click the "Done" button to save and publish your changes.

Create other designs for your custom WordPress theme

With Beaver Themer, you can also create layouts for other pages in the template hierarchy, eg. B. 404 page, template parts, search results page and more.

With Beaver Builder's built-in drag and drop feature, you can easily create your own WordPress layout from scratch without writing code. This is truly the most beginner-friendly way to develop WordPress themes.

We hope this article has helped you learn how to create a custom WordPress theme without learning how to code. You can also read our guide on how to speed up your WordPress site for a better user experience and SEO.

If you liked this article, subscribe to our channel YouTube to watch WordPress tutorial videos. You can also find us at Twitter Y Facebook.

This site uses cookies to improve your experience. Accept Read more

Privacy Policy
escort malatya escort bursa escort antalya escort konya mersin escort
konya escort antalya escort malatya escort malatya escort bursa escort hatay escort kayseri escort kahramanmaraş escort niğde escort mersin escort