How to Create a Custom WordPress Theme from Scratch (2023)

Do you want to create a custom WordPress theme to give your site a unique look?

Building a WordPress theme used to be impossible without expensive developers or having coding knowledge yourself. But today, some WordPress plugins give you the ability to make your own custom theme using simple drag and drop functionality.

In this article, we’ll show you how to create your own custom WordPress theme without writing code.

To jump to a particular section of the tutorial, you can use the quick links below:

How Can You Create a WordPress Theme From Scratch?

WordPress themes are built using a combination of PHP, CSS, JavaScript, and HTML. These are coding languages that require a lot of training to learn. So if weren’t a developer yourself, your only option used to be hiring development agencies to build themes for you, which can be very costly.

But thanks to SeedProd, you can now create your own custom WordPress theme without coding. It comes with a simple drag and drop interface that anyone can use, and it lets you easily customize every aspect of your theme design.

Why SeedProd?

SeedProd is the most user-friendly landing page builder plugin for WordPress.

It provides a high level of customization and  comes with a wide variety of extra features including:

• Theme builder
• More than 150 landing page templates
• Drag and drop builder
• Email marketing integrations
• 2 million stock photos
• and more.

With these features, you can quickly build landing pages on your website within an existing WordPress theme. But now, SeedProd has added a new feature that lets you create your own custom WordPress theme using its same drag and drop design for maximum ease of use.

Let’s see how you can build a WordPress theme using SeedProd.

How to Create Custom WordPress Theme Using SeedProd

We’re going to assume that you already have a WordPress website hosted on a domain for this tutorial. If not, you can check out this guide on creating a WordPress website.

If you want to replace your existing WordPress theme with the one you’re going to create, we recommend using a test development site for it. This way, you don’t run the risk of accidentally causing any errors on your main site. Top WordPress hosting services like Bluehost offer development environments for WordPress.

Finally, make sure to backup your site before making your theme. This makes sure you can always restore your site to a stable state if something goes wrong. You can find various options in this list of WordPress backup plugins.

After you’ve made these preparations, it’s time to start creating a custom WordPress theme without code!

Step 1. Install the SeedProd Plugin

First of all, install the SeedProd plugin on your WordPress site. You can see the instructions for installing WordPress plugins if you’ve never installed a plugin before.

You’re going to need at least the SeedProd Pro license in order to unlock the theme builder feature. To activate the Pro license, open your SeedProd account area and click on the Downloads tab. Scroll down to find your license key and copy it.

Then, open your WordPress admin area and go to SeedProd » Settings.  Then enter the key you copied into the License Key field and press Verify.

Now, head over to SeedProd » Theme Builder. This is the dashboard where all your different theme elements will live.

Now there are two ways you can go about creating your theme with SeedProd: create each individual part of your theme yourself or use a pre-made template and edit the parts you don’t like.

Every WordPress theme consists of different parts including:

• Header
• Footer
• Homepage
• Single Post
• Single Page
• Archive or Blog Page
• Sidebar

It can be a little intimidating creating each of these parts from scratch if this is your first time creating a theme. In that case, there’s an easier way to go about this.

SeedProd comes with various pre-built theme templates that set up the overall structure for your complete theme. This way, all the different parts are automatically added to the structure, but you can still customize each part per your preference.

For the rest of the tutorial, we’ll make use of one of SeedProd’s themes to show you steps, since this is the most beginner-friendly method of creating a custom WordPress theme.

Step 2. Select a Theme Template

The theme builder feature has multiple pre-built themes modeled after business websites of different types. To view the available themes, click on the Themes button.

SeedProd comes with templates for different businesses and industries including marketing agencies, restaurants, pet care companies, and more.

We’re going to use the Starter theme for this example. As soon you select a theme, SeedProd will automatically create all the individual parts of the theme.

You can also turn off different parts of the theme if you don’t need them for your website. To disable any section, you can use the toggle buttons under the Published heading.

You can change the settings for each part of your theme by clicking on the Edit Conditions button.

This will open a modal where you can change the name, type, priority, and configure conditions for when and where this part should appear on your website.

In most cases, you can leave these settings to default and move on to customizing each theme part.

Step 3. Customize Your WordPress Theme Parts

Now that all the essential components of your theme are laid down, we can customize the design of each to look exactly how we want.

To start editing, move your cursor over a theme part and click on Edit Design.

For this tutorial, we’ll customize the header, footer, homepage, and blog page. The same customization principles apply to all other pages.

Header and Footer

To start editing the header, click on the Edit Design button which appears when you hover over Header. This will take you to SeedProd’s drag-and-drop theme builder interface. Point and click the header area to open customization options, which will appear on the left-hand pane.

By default, the header has SeedProd’s logo. You can replace it with your business’s logo very easily. Click on the image to delete or replace it by uploading your own logo.

SeedProd allows you to change your logo size and alignment. You can also add a custom link to the logo. For example, you might want to redirect users to the homepage when they click the logo.

You can also change your header background color. Simply move your mouse over the header area until you see a blue outline. Click it to find a new options menu on the left-hand panel. Now, you can change the header color and choose a solid color or even a gradient.

Now, click on the Advanced tab to access more settings such as shadow, spacing, border, position, and more.

When you’re done making all the changes, click on the Save button on the top-right of the builder and click on the cross button to exit to the main theme builder dashboard.

If you want to include a header in your site, you can repeat these same steps to edit the design of your footer.

Next, we’re going to edit the Homepage.

Homepage

The homepage is the front of your website. Normally, it contains important elements that define who you are, what you do, and provide social proof through reviews and testimonials.

The Starter Theme template that we’re using has all the key sections you’ll normally find in a business website’s homepage including a:

• Hero area
• Features section
• Testimonials
• FAQ section

You can change every block of this page including the images, text, buttons, colors, and layout.

In the gif below, we’ll show you how easy it is to edit different parts of the page using simple drag and drop actions.

Use the settings and blocks on the left-hand menu to edit the design until you’re fully satisfied. When you’ve made all the changes, make sure to check the mobile preview.

If any elements of the site appear to be breaking up in mobile view, you can go back to editing and make adjustments until it looks perfect.

When you’re satisfied with your homepage, press the Save button and return to your SeedProd theme builder dashboard.

Blog Page

Let’s now create a custom blog page for your site. On your theme builder dashboard, click the Edit Design link under the Blog Index, Archives, Search section to start editing it.

Here, you can add or remove different elements like post content, excerpt, author bio, and much more using the drag and drop interface. Click on one of the posts displayed on this page to access more settings.

These settings allow you to change Posts Query type, layout, pagination. You can also change control additional details that should appear with each post such as post date, author, featured image, excerpt, and more.

After you’ve customized the blog page, click on Save and return to your dashboard once again.

Global CSS

The Global CSS section configures the global settings for your theme’s colors, typography, layout, and styling.

From your Theme Builder dashboard click on Edit Design under Global CSS section of your theme.

For example, you can choose a Button color and font that you’d like to appear across your whole site.

Similarly, you can change text fonts, backgrounds, layout, and even add custom CSS to your theme. These changes will apply across your whole site and ensure stylistic consistency.

When you’re done adjusting the settings to your liking, click on the Save button.

Step 4. Connect With a Mailing Service

SeedProd allows you to connect with your email marketing service, which is an important step if you want to include a subscription or sign-up form in your theme.

In fact, if you have WPForms installed on your site, it automatically integrates with SeedProd. So you can embed any forms you’ve created with WPForms within any part of your theme using SeedProd.

Once you’ve created a form, you need to make sure that your email marketing service is connected with SeedProd so you can send and receive emails related to the form.

To connect your email marketing service with your SeedProd theme, click on the Connect tab on the top bar of the theme builder screen while you’re editing any part of the theme.

Click on any mailer from the list and follow the on-screen instructions to complete the integration with your SeedProd theme. When you’re done, your optin form entries will automatically be added to your mailing list.

Step 5. Publish Your Custom WordPress Theme

Your theme is now ready to be deployed! To take your theme live, go to your theme builder dashboard and click on the Enable SeedProd Theme toggle button on the top-right of the screen.

Now, let’s take a look at our newly created custom WordPress theme!

This is the theme’s homepage with the header:

And here’s the blog page.

And that’s it! You’ve just created your first custom WordPress theme without code!