WordPress Themes Tutorials: Your How-to Guide

Get HubSpot's WordPress Plugin
Doug Bonderud
Doug Bonderud

Published:

WordPress is a great platform for any business or personal site — more than 64 million sites use this CMS and generate more than 400 million visits each month.

designer using one of the best wordpress themes tutorials

The challenge? To capture user attention, you need a WordPress theme that stands out from the crowd. But how do you create and implement a theme that keeps users coming back and continues to drive traffic to your site?

Don’t worry. We’ve got you covered with a WordPress theme tutorial that will have you up and running in no time.

Grow Your Business With HubSpot's Tools for WordPress Websites

How to Build a WordPress Theme

WordPress themes control the overall appearance of your website — everything from text colors and fonts to the layout, size, and configuration of your content. 

And while there are a host of free and for-pay WordPress themes available online, it’s not always possible to find an exact match for the style, form, and function that you want. 

The result? You might consider building your own WordPress theme. 

But, where do you begin? For starters, you can follow these five steps and begin building your own WordPress theme.

1. Create a local environment.

First up? You need to create a local environment to work on your new theme. Here’s why: If you start modifying themes on your active WordPress website, you could accidentally make your site unusable or delete critical data.

By creating a work and test environment stored on your own desktop or laptop, you can be as bold and creative as you want without any risk to your live site. Solutions such as DesktopSever from ServerPress help streamline this process with support for both Mac and Windows operating systems.

Serverpress test environment

Image Source

2. Download a basic WordPress theme.

Next, you need a basic theme to work with. Popular options include Understrap and Bones, but there are a host of free theme starters available for free or at cost if you prefer ongoing support. 

Once you’ve downloaded your basic theme, install it on your local WordPress deployment by heading to your Admin page, selecting Themes, then Add New. After that, choose the theme you want and click Install. Now you’re ready to get to work.

3. Add template files.

Every WordPress theme uses template files — these template files tell WordPress what types of content and features will be loaded when specific pages are accessed. To modify template actions you need to first open your theme’s template file and then add PHP code depending on the function you want to call.

For example, you can add headers with the get_header(.) tag, sidebars with get_sidebar(.) and search forms with get_search_form(.)

4. Customize your theme.

Now it’s time to customize your theme using the style.css file. While the basic theme you installed will contain fundamental cascading style sheets (CSS) frameworks in its style.css file, you can modify this file to customize text sizes, fonts, and colors along with image sizes, formatting, and alignment.

CSS stylesheet editor

5. Export and upload your theme.

Once you’ve added template tags and CSS customization — and tested your theme on your local machine to make sure it’s working as intended — you need to export and upload your theme to your live WordPress site.

First, find your theme on your local device. In most cases, it will be stored in Documents >> Websites >> Themes. Once you find the folder with your theme in it, use a .zip compression utility to reduce its size, then save it. Head to your live WordPress site and install your theme just as in step one — but this time, select your new theme from your local machine.

If that process seemed a little intense, don't worry. Fortunately, you don't have to build a WordPress theme from the ground up. If you're looking for a bit more support, check out these popular prebuilt theme options that can help you customize a WordPress theme to your exact liking.

Best WordPress Theme Builders With Tutorials

1. Divi

Price: $89/year or $249 for One-Time Purchase

Divi - Theme WordPress tutorial

This elegant and powerful design is a great choice for educators.

There’s no need to open up a settings panel to add content — simply click on the page and start typing. Organizing is also easy. Users can quickly add new elements in real-time; the theme features 46 content elements with 20+ predefined templates.

The Divi Theme is powered by the Divi Builder plugin which is considered one of the top drag-and-drop website builders for the WordPress platform, and comes with a huge list of modules including video sliders, social media, sidebars, shops, and more.

2. Astra

Price: $47/year for Pro Plan, $169/year for Essential Bundle, $249/year for Growth Bundle

Astra WordPress theme for Tutorials

Astra bills itself as the “most popular WordPress theme of all time,” and with more than one million active installations, this isn’t far from the truth.

Designed as a fast and fully customizable WordPress theme, Astra can be used to create any type of WordPress site. It also has substantive advantages for education — for example, the theme is currently used by Stanford University.

With pre-built website options, super-fast performance, and the ability to customize content with coding knowledge, Astra is a great choice for any website build.

3. Ultra

Price: $59

Ultra WordPress theme

Ultra is one of the most powerful and flexible WordPress theme builders available. This full-responsive framework lets you take control of your theme from header to footer — and everything in-between.

While it's possible to build your own theme from the ground up with Ultra’s streamlined interface, you can also use and customize pre-made demo sites that let you get up and running within minutes.

4. SeedProd

Price: $40/month for Basic Plan, $100/month for Plus Plan, $200/month for Pro Plan, $240 for Elite Bundle

SeedProd WordPress theme

SeedProd focuses on building great landing pages for WordPress. With more than one million installations and 100 available templates, you’ve got no shortage of options for growing your site with SeedProd.

Using a drag and drop page builder that’s responsive and mobile-ready, you can easily create sales, opt-in, maintenance, webinar, and thank you pages that align with your brand image and impact goals.

5. OceanWP

Price: $39

Ocean WP wordpress theme

OceanWP boasts more than four million downloads and is used by web designers, developers, and ecommerce store owners alike. 

This theme builder features more than 130 demos to make deployment quick and easy, while WooCommerce integration and world-class support have earned it a 95% satisfaction rate among users.

Taking Your Theme to the Next Level

The right theme makes all the difference for WordPress websites. Take customer engagement to the next level by building your own theme from scratch — or using a full-featured solution to help streamline the theme-building process.

Editor's note: This post was originally published in January 2020 and has been updated for comprehensiveness.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 

Related Articles

Capture, organize, and engage web visitors with free forms, live chat, CRM, analytics, and more.

DOWNLOAD THE FREE PLUGIN

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO