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 be covering 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 the importance of using child themes 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 for 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 the installation of your WordPress site, your site will look something like this:

A generic WordPress site on WordPress.com

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:

Dashboard – The control panel of your WordPress site

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.

So many designs to choose from…

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.

Customize the look and feel of the theme to suit your needs

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 each and every option that is 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 will not be 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 really 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.

Quick mock-up of a WordPress site

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. You do have a section called plugins that you can explore, however you do not have the ability 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.

Find all of the plugins you need directly in the dashboard

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.
  • Always Use Open Graph with Jetpack – This plugin is only needed if you use Jetpack along with any other plugin that generates its own open graph tags. I have it because Yoast SEO generates open graph tags which tend to break the Publicize function of Jetpack.
  • 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 the functionality of your other plugins and your theme.

There are many other plugins that I use as well for specific purposes. The five 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 may be 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 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 are coded differently from the same files in the parent theme.

There are two big advantages of child themes. Child themes can be easily rolled back if a code change breaks the site. They also won’t be overwritten when the parent theme is updated. Theme developers often release updates to themes to add features, repair broken functionality, or increase security. When these updates are loaded, they replace all of the files in the theme, including any custom work done on the parent theme. Child themes are stored separately 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.

Wayne Cochran

Database Administrator, writer, social media evangelist, and occasional traveler, Wayne writes whatever comes into his head or touches his heart. His interests vary from IT to matters of the heart to the dream of a future beach life.

You may also like...

Leave a Reply

%d bloggers like this: