graphic showing building websites plus cover standard

What Is a WordPress Theme and Can it Do DIY

In technical terms, a WordPress theme is the presentation layer of a WordPress website. It is usually the second discovery new webmasters make when using WordPress for a website. That said, it’s not long after the famous WordPress one-click install where a  new webmaster comes face to face with their first WordPress theme. Nowadays that theme is usually 2020 from Automattic.

Put simply, a theme wraps pretty graphics around WordPress content. The theme is the commander of font, color, content presentation, and navigation. It is through the theme that visitors view what you have to say or show. For that reason the theme is considered really important to overall site ‘goodness’.

But before we consider which theme to use for your WordPress website, there are some things to address. Of course how pretty the theme looks on your screen is important. But even more important in the days to come, if not this very moment, is how fast a browser will load your chosen theme and how well your chosen theme adapts to different screen sizes.  In other words page-speed and mobile-responsiveness. Security is an often overlooked consideration as well.

To answer questions about page speed as it relates to theme speed, we’ll discuss page speed insights. For questions about mobile-responsiveness we’ll think about how, in today’s world, we all use the internet. Finally, we’ll briefly discuss a common hacking technique called cross-site-scripting, often referred to as XSS. Through these discussions you will better understand what a theme is and why choosing wisely is important.

How a Theme in WordPress Does Its Job

A WordPress theme relies on three components to present information in a typical browser. Those components are HTML, CSS, and JS. HTML is Hypertext Markup Language, CSS is Cascading Style Sheets, and JS is JavaScript. Together, these three components come together in what’s called the ‘front-end’ of a WordPress website.

Each component, in turn, relies on accepted standards all browsers adhere to. That is, every browser will respond the same way to the same command from any of these three components. Historically there has been some conflict between browsers with none being significant enough to fix with a simple workaround. Generally speaking though, all browsers work nicely with these three components.

There is no discussion needed about why or how these components work, but knowing that each of these components and their associated content data requires the browser to receive, understand, and then act on each item of the data set. And this is where speed comes into consideration.

Essentially every page you visit on the internet is the result of a browser constructing a display model of the data being sent to it from your WordPress installation. Just as when you would build a model of say, a car, complexity plays a role as well as placement. For this reason browsers will need some time to interpret the data, assemble it, and then display the model on the screen.

If your WordPress theme carelessly sends information which might include unused CSS commands, needless JS, or uncompressed and large image files, that browser will load the page slower than if it were optimized. The problem can get significantly worse on small screens like mobile phones.

In this way not all WordPress themes are created equally but pay attention to a few things and making the choice will be simple.

WordPress Speed, Themes, and Page Speed

Determining speed issues is as simple as going to Google’s page speed tool using any domain  url from your site and clicking analyze. Then Google will process that specific web page and show you results.

Now you can see how fast, or slow the browser loads and displays your template. Notice also there are two result tabs to check out. One is mobile which is now the default tab shown, and the other is desktop.

Typically the desktop scores higher than the mobile version. Of course in the ideal world you would want both indicators to be in the mid to high 90’s. In fact we are obsessed with mobile speed here at Building Websites Plus and will not launch a page if it scores less than mid 80 mobile, and high 90’s desktop.

Google has stated that page speed, particularly on mobile devices, will become a more important metric in its page rank algorithm moving forward. We think this factor will affect rankings substantially in mid to late 2021 and suggest all our clients work to our minimum speed standard.

Not only will you see how your page speed is affected by your content and your template, you also get insights in correcting page speed issues.

For the most part some of these changes are beyond webmaster control. However, some very important ones are completely controllable. For example, jpeg, png, and gif images left uncompressed will seriously hinder load time. 

Next you see suggestions for readily available resources, many designed specifically for WordPress, you can use to improve your performance. Some of these tools are located with your hosting service. SiteGround, in example, has SuperCache which does much of the work for you.

If you find you can not achieve our speed suggestions, you should consider another theme.

About Using a Mobile Responsive Theme

Because we are increasingly using handheld devices to access internet content, a mobile responsive WordPress theme is required for success. Not optional.

The good news is most every WordPress theme, free or otherwise, is mobile responsive by default. You don’t have to worry about it beyond the speed considerations mentioned above. But there are a few points to consider about a mobile responsive WordPress theme. Or any website for that matter.

First, gone are the days where screen real estate was bounded by a 21 inch monitor and browsers could depend on speedy internet connections and the full processing power of a desktop PC. Instead, we are now all viewing content through the tiny portal of our phone. Of which even the largest is no bigger than 5” x 3”.

What that means is two fold. First the ideas of bells and whistles take a different meaning. Nice to have features are sticky headers and mobile friendly page navigation. With mobile screen real estate such a premium, looking for ways to implement a call to action requires more careful placement. 

Simply put, mobile responsiveness addresses the requirement that your WordPress website functions well.

With regards to how well your WordPress theme implements mobile responsive designs, the WordPress admin area offers you the customize page as a selection when you choose apperancer from its left menu.

Here, on the bottom left of the display section you see three icons. One is full screen, one is tablet, and one is phone. Clicking on any of these three will display your theme in the selected format right there on your development station. In this way, you don’t have to continually find your site on your phone to see how it looks.

Having addressed these two issues, let’s look at the security issue associated with cross site scripting, or XSS.

Cross Site Scripting Attacks and WordPress

XSS attacks are vulnerabilities with any poorly coded webpage, not just WordPress. But, WordPress does incur many more successful XSS attacks than other CMS platforms. Studies have shown that the biggest reason these attacks are successful because webmasters don’t update their system, and they use unproven plugins and untested themes on their WordPress website.

The technology to avoid problems with XSS threats is reasonably simple and readily available. The problem with implementing the technology is you have to understand where it goes when you’re putting together a theme or plugin. 

Not all developers have this kind of know-how even though it is easily available. So stick to themes put together by experienced developers.

 The other important factor in avoiding problems with XSS attacks with your WordPress theme is updates. Again, studies have shown that WordPress installations with non-updated themes and plugins are where the vast majority of successful hacks occur. The point here is to maintain good hygiene in terms of keeping your WordPress site updated.

A Few Last Words

You now know that a well thought out WordPress theme will present your content attractively, and safely, across multiple devices. You also know that many themes are free, and that not all themes are created equal in terms of speed.

And you understand the threat of XSS attacks and some simple thoughts on how to avoid them. WordPress themes are built by independent developers and the best of them adhere to the WordPress.org development standards.

You can assess the speed of any theme by utilizing Google’s page speed insight tool. And to keep your website secure and safe, be sure you understand that the person or company that developed your theme or plugin knows about these issues and has addressed them.

Beyond that, the next important thing to know about is the WordPress child theme. What exactly is that, why you should use one, and how you make one. Hint, it’s easy.

Leave a Reply