Starting a Website: WordPress Site Design

WordPress Site Design

The third part in my series on starting a WordPress site covers WordPress Site Design. Be sure to check out part 1 (Free or Self-Hosted WordPress?) and part 2 (Choosing Your Hosting Service) if you haven’t already. This topic includes tips that will be beneficial for site builders that are using either free WordPress or a self-hosted WordPress installation. Please keep in mind that this is a beginner’s guide. I will not cover advanced topics such as custom PHP. We will discuss topics such as choosing a theme and finding plugins appropriate for your needs. I will also touch on the topics of CSS customization and how important child themes are if you do any custom coding.

I want to help as many of you as possible, so I am walking through this process step by step on a fresh WordPress.com site. I’ve created it for this tutorial so that I can show you how to get from a clean slate to a polished product. Along the way, I will point out features and options that are available to self-hosted sites that you cannot get free on WordPress.com.

What is a WordPress Theme?

A theme in WordPress is the package of files that manages the look and feel of your site. You can think of a theme as a template. It defines the layout of objects on each page of your site, giving your site a consistent look and feel.

Starting Out

Once you’ve finished setting up your WordPress site, your site will look something like this:

You now have a generic WordPress site with some generic content. The picture above is from an install that came with the Twenty-Sixteen theme set as the default. Your installation may vary.

The first thing that you want to do is login to your WordPress dashboard. To do this, simply go to yoursitename.com/wp-login.php. This will bring up the login screen where you will enter the credentials that you setup when installing your site. Once you’ve logged in, you should see a screen like this:

This is the WordPress dashboard. From here, you will control every aspect of your WordPress site. Your menu options may vary, depending upon your host’s installation options.

Since we are focusing on the site theme first, open the Appearance menu. This will open up the Theme browser. From here, you can change your theme to one of thousands available for self-hosted sites or from the 365 themes available to WordPress.com users if you are on a free site. Since for this demo I am using free WordPress, I’m going to take a look at the free themes available to WordPress.com users.

Since I am going to use this site to direct traffic that happens to land on it back to my main blog, I’m going to opt for a simple, yet elegant theme called Pique. When choosing your theme, be sure to choose one that highlights the purpose of your site. For instance, if you are creating a photo intensive site, then you want to choose a design that can really showcase those photos. If you are setting up a blog, you want to choose a design that helps readers focus on your writing.

After selecting and activating a theme, the next step is to select the Customize option on the Appearance menu. This loads the Customize tool, which gives you a live view as you customize your site.

I won’t bore you with the step by step details of each option, as some themes contain customization options specific to that theme. But please be sure to go through every option listed here. All of them are important to the look and feel of your site. With each change you make, you can see the effect immediately in the customize tool. However, the changes are not implemented until you save them.

The most common items that you will definitely want to edit are the Site Identity, Colors and Backgrounds, Fonts, and Headers. These are the items that set up the branding for your site.

I spent about 20-30 minutes going through each menu customizing this site and another 10-15 minutes removing all of the default filler pages and writing a quick post to tell anyone that happens upon this page to go check out my main site. Here are the results.

If you go to ravenheartsnest.wordpress.com, you can see this live page. It has a static header image, which can easily be set with rotating header images. I’ve also added my personal social links at the footer. Since there this site only contains a single post, the main menu has a link Home that just reloads that page, and a link to the home page on this site.

As you can see, someone with experience building a WordPress site can get a fresh one up and running in less than an hour. For a beginner that has a good idea of how they want their site to look, I would estimate an hour or two depending upon what theme you choose and how much customization it provides. Just be sure to take your time in setting it up.

Even More Custom Options

This is basically the end of the road for those of you using WordPress.com. There is a section called plugins that you can explore, however you are not able to install additional plugins. If you have a self-hosted WordPress site, most of the plugins that are available to WordPress.com sites are available through the Jetpack plugin. If your hosting-provider does not include it in your WordPress install, I will show you how to get it.

Adding Plugins

On the WordPress dashboard, you probably noticed the Plugins option. Opening this will open a menu of installed plugins. You may find some items already installed by your hosting provider. There is also an option to add plugins.

This screen will present you with all of the plugins available in the WordPress.org repository. There are a couple of plugins that I highly recommend.

• Jetpack by WordPress.com – Jetpack provides you with many tools that can help improve your site. These range from performance enhancing to site protection to added features. It connects your self-hosted site to WordPress.com, and it allows you to use tools available there.
• Yoast SEO – Yoast SEO is one of the best tools to use for search engine optimization. It helps you craft your content in a way that can help it rank higher in search engine results.
• WordFence Security – This plugin provides anti-virus, firewall, and malware scanning for your site.
• W3 Total Cache – This powerful plugin creates server cache files, minifies code, and sets parameters for browser caching. These all work to speed up your site. Be very careful with this tool, as it can break your other plugins’ and theme’s functionality.

There are many other plugins that I use as well for specific purposes. The four listed above are the ones that I always keep loaded for any site that I create. You can also find other plugins that perform the same functions as these.

Custom CSS and Child Themes

I want to briefly touch on custom CSS and child themes. These complex customizations are only available on self-hosted WordPress.

Custom CSS can define attributes for any element on your site. I recommend checking out a site like w3schools for information on how to edit CSS files. It is sometimes difficult to figure out what elements on a page that you want to define in your CSS. The easiest way to evaluate the data elements is to use the Developer Tool built into most commonly used web browsers. You can access this by pressing F12 key on your keyboard on the page that you want to edit.

Child themes are the best way to edit the core functionality of a theme. You need to have knowledge of PHP before attempting to change files in a theme, as coding something incorrectly can completely break your site. When you create a child theme, you are creating a theme that calls another theme for its core functionality. The child theme only contains files that contain different code from the same files in the parent theme.

There are two big advantages of child themes. It is relatively easy to roll back child themes if a code change breaks the site. They also are not overwritten when updating the parent theme. Theme developers often release updates to themes to add features, repair broken functionality, or increase security. When loading these updates, they replace all of the files in the theme, including any custom work done on the parent theme. Child themes are independent from the parent theme, so the child theme is not affected directly by updates.

Coming Up…

The next step will be setting up pages and posts and delivering content to your site visitors. This is what having a WordPress site is all about, so be sure to join me for the last part in this series.