Making sense of WordPress themes, blocks, and plugins

Themes, blocks, plugins… Just three entries in the whole new glossary of words you’ll encounter when you start a WordPress site. 

As WordPress celebrates its 19th birthday this month, it’s still the leading content management platform and runs just under half of the entire Internet. But there’s a lot to learn to get the most from it.

However, by learning these three simple pillars of WordPress design, you can hit the ground running when you start your new WordPress site.

WordPress Themes

Before we start talking themes and plugins, it’s important to remember WordPress is open-source software, so anyone can develop a theme or plugin. This means there’s a huge variation in the quality of both. 

Picking your theme should be one of the first things you do (before starting any real work on your site). This is because your theme choice will dictate the look and feel of your site, along with layout and (to an extent) functionality. If you start designing first, the chances are some elements will not function correctly when you interpolate a new theme. Also, some themes are more restrictive than others, or lack the sophistication you’ll want. So it’s worth spending some time deciding on the right one.

With thousands to choose from, it’s worth thoroughly road-testing several options before you pick. You may discover that some misbehave or have bugs when you try to customize them too much. The easiest way to avoid most of these issues is to go with bigger, more popular themes. It’s worth noting that nearly all premium themes offer a free trial so you can try them out before you fork out any money.

Whatever you choose, you’ll need to check it’s responsive, which means it will respond intelligently, based on the screen size of your visitor. This is vital for ensuring search engines like your site and serve it equally to desktop and mobile/tablet users. The easy way to test if the theme is responsive is by applying/previewing it, and then adjusting the size of your web browser. If things reposition, and the functionality is still clear on mobile, you’re onto a winner.

It’s worth checking out ‘Top 10’ style shortlists too, but be careful — a lot of these are sponsored by the themes that they’re plugging, and you can waste a lot of time. To be on the safe side, see our top picks for e-commerce sites, video sites, magazine sites, and photography sites.

Basic reusable blocks

Let’s imagine you’ve picked your theme, and are ready to create your first page or post. Are there any shortcuts to help you create content? The answer is yes, and they’re called blocks!

Put most simply, blocks are reusable parts of a page (like contact forms, galleries, and even basic text modules). They can also be drag-and-drop elements that autofill based on your website database (like blog categories or ‘best sellers’ lists). 

Even in its out-of-the-box form, WordPress Gutenburg subdivides pages and posts into blocks by default.

Hitting the plus on the basic Gutenburg editor reveals basic block options. You can easily input things like calendars or categories, but you can also save customized blocks of text. For example, if you like the same footer at the bottom of every blog, you simply click the three dots on the bar above the text, then click ‘Add to reusable blocks’. 

You can then find this text, and re-insert it elsewhere by clicking + [to add new block] > Browse all > Reusable, as shown here:

But there are more advanced ways you can use blocks that interlock with themes and other plugins…

Block-based themes

Themes like Porto theme for WordPress use blocks in a more advanced way, to achieve more sophisticated design elements — while benefitting from the same easy drag-and-drop system. Our example below was built using Porto, but there are many other similar themes that allow for the same kind of block-based web design.

Porto works fantastically for sites that require more functionality than a basic blog. It even has a specific WooCommerce integration you can add on for online stores, and heaps of interesting design blocks. Think of these as prefabricated furniture. You simply slot the elements you want (images, text, social buttons, etc) into place on the page, and then customize them. 

Porto combines with WPBakery to allow for both back-end design (shown in the screenshot below), or front-end design (where you can see how things actually look as you build them). Be careful — the front-end editor requires more processing/server power and has a higher tendency to glitch out. It’s safer editing in back-end mode.

Back-end block mode

Let’s run through what we’re looking at in the image above, and why it was so easy to put together using Porto’s block design.

By clicking the ‘+’ icons, in much the same way as Gutenburg, you can select all the elements you might need (and there are many to choose from). It’s easy to clone, duplicate, and drag things around until you’re happy with your layout. The design is both responsive and very intuitive.

The first block we’ve used is a Custom Heading for the top of the page, followed by some basic site intro text in a separate block. By using separate blocks out wherever possible, you get a more aesthetic placement of text which is better for readers. 

Next, to create visual variation, the page is subdivided into three columns that contain some unique selling points — this is a good way to draw attention to things. Porto makes it easy to add icons or borders with a simple edit. It’s also easy to subdivide your page in many other ways — for example, you could make ⅔ of the page as a picture, and ⅓ as text if you’re working on a magazine-style article, and then switch this up later in the page to keep things visually interesting. The possibilities are endless, and you can spend hours finessing until you’re happy.

Under the would-be article, I decided to use a spacer to separate out the page elements and then added another header introducing an auto-filled block of the site’s most popular WordPress products.

In the front-end visual edit, the page looks something like this:

As you can tell, I’m not a designer but with a couple more hours of customization, some social buttons, and a sprinkle of magic, this example could look pretty decent. What I’m trying to get across is how simple the blocks make it to, well, build.

Plugins

Let’s imagine you’ve picked your theme, tinkered with your blocks, but along the way you’ve found some things you really want your site to do, but you can’t figure out how. 

That’s where plugins come in. They’re essentially small additional programs your site can run that can solve almost any problem you might be having — because let’s face it, whatever it is, someone will have hit the same wall before and created a plugin to solve the problem.

From solving picture gallery issues to contact forms to the entire WooCommerce platform — they’re all solved by WordPress’ infamous plugins. Honestly, the list of functions plugins provide is so truly infinite any kind of shortlist won’t even scratch the surface. But here is a rundown of some pretty essential plugins you might want to use as a starting point.

General plugins:

The plugins listed here should help almost any site. They cover the basics, such as SEO, or contact forms that pretty much all sites need, regardless of what they do.

• Jetpack is a suite of tools that will add some pretty cool functionality to your site. It also allows you to link WordPress to mobile apps a lot more easily. 

• Yoast SEO is the industry standard for search engine optimization and will help you prime your pages for discovery.

• Fluent forms is just one of many great options for site contact pages that allow your visitors a hassle-free way to reach out to you.

• Smush is a fantastic way of keeping on top of large image files. It optimizes them for thumbnails and stops your site from having slow loading times — which search engines will penalize you for.
• Mailchimp allows you to easily integrate a mailing list subscription into your site. This is a great way to start building connections with your visitors — whatever your site is doing.

Store-centric plugins:

The following plugins will make life a lot easier when used in conjunction with a basic WooCommerce store.

• PayPal and Stripe payment integrations are a great way to monetize your site. Learn more about implementing these in our blog about adding payment methods. 

• Trustpilot allows you to place a bar on your site to start generating reviews and show off the number of reviews you have without disrupting your site. This will help you gain trust among your site visitors. It’s also the only way to display the Trustpilot logo without it going against their terms of service.

• YITH custom thank you page allows you to easily place code into your final page in the checkout process (the ‘thank you’ page). This can come in useful when you need to start tracking conversions. It also allows for greater customization of the last thing people see — which could involve up-sells, loyalty schemes, important shipping information, or whatever you want to show them. 

• ELEX Google Product Feed will save you a lot of time (compared to some plugins that purport to do the same thing but don’t) when you want Google to find your products. It’s a reliable way to easily submit your products to Google on a daily basis so you can display your items in Google Shopping. 

Reflecting on themes, blocks, and plugins

Hopefully, the definition for these three words is now overflowing in your internal web glossary. Individually, they might seem confusing or hard to differentiate, but they are three distinct tools that, together, become the foundation for building a successful WordPress site.