How to Create a Custom WordPress Theme Without Writing Code

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

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 before:

  1. Install the SeedProd Plugin
  2. Select a Theme Template
  3. Customize Your WordPress Theme Parts
  4. Connect With a Mailing Service
  5. Publish Your Custom WordPress Theme

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.

WPForms is the best WordPress Form Builder plugin. Get it for free!

Why SeedProd?

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

SeedProd homepage

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.

Bluehost homepage

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.

SeedProd license

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.

Enter license key seedprod

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

Theme builder menu

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

Add theme template seedprod

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 theme builder template button

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

SeedProd theme select

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.

Theme parts

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.

Toggling off a theme part

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

Edit conditions seedprod theme

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.

Edit conditions modal seedprod

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.

Edit design 2

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.

Change header seedprod

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.

Change header color

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

Header advanced tab

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.

Save header

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.

Home page theme builder

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.

Customizing theme

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.

SeedProd 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.

SeedProd Mobile View Demo Site

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.

SeedProd blog page template

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.

Blog posts settings seedprod

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.

SeedProd theme global css settings

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

Global CSS settings for buttons seedprod

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.

SeedProd mailer integration

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.

Enable SeedProd theme

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

This is the theme’s homepage with the header:

SeedProg homepage demo

And here’s the blog page.

Blog page preview

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

Next, Create Contact Forms for Your WordPress Site

Now that you have a brand new WordPress site, you should consider adding contact forms to allow visitors to easily reach you. WPForms is the most user-friendly WordPress form builder with over 5 million active installations.

Not only can you grow your mailing list with WPForms, but also perform a host of other activities like collecting donations for your noprofit.

Create Your WordPress Form Now

Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.