How To Create A Simple One Page WordPress Theme

How To Create A Simple One Page WordPress Theme

Following the previous posts How To Create A Simple WordPress Plugin From Scratch and Twentig: Free & Easy WordPress Plugin To Build Beautiful Websites, let us explore together how to create a simple one-page WordPress theme step by step.

This guide is aimed at WordPress development beginners who wish to learn or evaluate if this particular niche or business fits their goals and interests. Bear in mind that WordPress theme development is a huge topic itself, but let us build our own one-page WordPress theme without or minimal coding. This one-page theme will not be displaying other pages, only the homepage.

There are at least 2 ways to create a WordPress theme. One, we can use a builder by clicking and customizing values. Secondly, we can download a minimum template or create one from scratch and start coding it. For simplicity’s sake, we will cover the easier method of using clicking and changing values.

What is a One-page WordPress theme?

As the name implies, the whole site rests on just one page – The homepage. Simplicity can be powerful. People may not need or want to be overwhelmed with information, sophistication, and useless fluffs they do not need. Sometimes, we need clarity and focus on just the right one.

For example, One Page Love features lots of themes with just a front page.

One Page Love
One Page Love

How to create a simple one page WordPress theme

  • Install and activate the Twenty Twenty-Two theme. Other Gutenberg block themes may do as well.
  • Install and activate Twentig or any similar theme builder or customizer plugin
  • Navigate to Twentig’s Site editor
  • Start customizing by adding blocks and changing values e.g. Replace the header image, remove all elements of posts and pages, add posts or page blocks, change featured image sizes, etc
  • Save and exit

Please note this is not the only way to create a WordPress theme. Twenty Twenty-Two is the default base theme to customize with this method.

Twentig site editor
Twentig site editor
Default Twentig editing page
Default Twentig editing page
Add page elements with a few clicks in Twentig
Add page elements with a few clicks in Twentig

Below is an example of a theme template with just a few clicks including designing and uploading a header image, and choosing the post layout from the post block.

Example homepage
Example homepage

This page does not display other pages or posts. All displayed content is on this page alone.

We can also easily display posts if we want. Click the ‘+” sign, type posts to add, and customize it by exploring the options available .e.g rounded corner for featured images, fixed pixel sizes for the featured images, alignment, etc.

Add Posts block
Add Posts block
Posts 3 Columns
Posts 3 Columns
Customized Post Block
Customized Post Block

You may want to check out this Twentig post for more details.

One quick way to create a WordPress theme – bare templates

We can also code WordPress theme templates to customize them.

Enter your theme name at Underscores and click generate to download your theme zip file. Then install and activate the theme in WordPress to preview. Start customizing the theme (please refer to the WordPress official theme handbook)before Zipping and downloading it.

Underscore is a barebone theme template generator by Automattic, WordPress’s parent company.

Underscores
Underscores
Add new theme
Add new theme
Upload theme
Upload theme
Install the theme
Install the theme
Click Activate
Click Activate
Homepage view of unmodified Underscore template
Homepage view of unmodified Underscore template

From here we just have to customize the theme by coding the template files.

For example, let us change the background color to pink color. We can do that by going to Appearance -> Customize -> Colors in the WordPress Dashboard. Let us change it by modifying the CSS property of Additional CSS instead.

Edit CSS
Edit CSS
Additional CSS
Additional CSS
Set background color with CSS in WordPress Theme
Set the background color with CSS in WordPress Theme

This is recommended or create completely from scratch if you want to customize and sell WordPress themes or upload them to the WordPress theme directory.

How to export my custom WordPress theme for installation?

We may export our WordPress theme for others to install e.g. WordPress theme directory or sell it on a marketplace.

For example, if you have created a theme on a WordPress hosting server, log on to your hosting account, and go to the FIle manager.

Hosting file manager
Hosting file manager

Navigate to public_html folder -> wp_content -> themes directory. Select the theme folder, right-click and select compress.

Compress the theme to export
Compress the theme to export
Name it and select zip
Name it and select zip
Select the zip file and click Download
Select the zip file and click Download

How to add my theme to the WordPress theme directory or repository?

We can upload our theme to WordPress.org so others can search and install our themes as well. Start by submitting your theme here.

Where to sell my WordPress theme?

It is recommended to create a WordPress theme from bare or minimum templates for selling.

Some marketplaces include:

How to become a professional WordPress theme developer?

Taking courses and putting them into use can be one of the fastest ways to accelerate your progress.

We may also learn more from the official Theme Developer Handbook by WordPress.org. This can be the most complete resource for WordPress theme development.

Here is a free YouTube playlist by Allessandra Castellani with 67 videos: Create A Premium WordPress Theme.

I recommend quality Domestika courses for serious developers.

WordPress Theme Development Domestika Course
WordPress Theme Development Domestika Course

Conclusion

A basic WordPress theme development is not as straightforward as a plugin in terms of researching and how to approach this topic for a beginner without going into hours of detail.

Like plugins, WordPress themes can be a whole specialized niche or business itself. It can be both beneficial for others to download and use for free and profitable for sale as a customized theme and support as a service.

Useful resources such as Underscore.me and Moreno’s WordPress Theme Development Domestika course can be valuable for professional WordPress Theme developers.

Be wholesome.

More Information

How to test my custom WordPress theme?

It is a good idea to test a theme before exporting it as a theme for others to use. WordPress’s Theme Unit Test is a good place to start.

close
Good Passive Logo

Sign up to receive Good Passive content in your inbox.

We don’t spam! Read our privacy policy for more info.

Leave a Reply