Greetings, fellow bloggers!
If you’re reading this post chances are you have a website or are in the process of creating one. Perhaps you’re still on the fence. If so, I hope this tutorial encourages you to make the leap. Welcome aboard the grand adventure!
This is part three of my series ~ Blogging to Success with WordPress!
Owning a website is a liberating experience. Our thoughts, our work, our designs have a home and we’re eager to share it with the world. Cheers to that! ♥
Realistically speaking, though, it can feel a little intimidating and sometimes daunting trying to figure out the ins and outs of it all. I hear ya. I’ve been there, too.
Fast forward a few years and now I have the absolute pleasure of helping others create and manage their own websites. Creating a website that we’re proud to own is one thing, managing it to maximize reach and outcomes is just as critical, perhaps more so.
Managing WordPress like the Pros
Before we jump in …
Whether your website is hosted by WordPress.com or you’re using WordPress.org (self-hosted) with (ie. Bluehost), the process of setting up the design and function of your website is much the same. However, there is a difference as to what you have access to. For more detailed information regarding WordPress.com vs WordPress.org, please visit ~ Essential tips, tools, and resources for bloggers and website owners!
This website is hosted by Bluehost. I also use Jetpack for daily backups, managing spam, and seamless access to additional features. You’ll notice this reference throughout this Blogging to Success series.
WordPress.com Users ~ The versatility of Jetpack is included with your hosting.
WordPress.org Users ~ If you’re self-hosted (ie. Bluehost), you can add the Jetpack Plugin for free. Additional features are available via their paid plans.
♥
If you’re just setting up your website, feel free to view previous posts in this Blogging to Success series:
- Part One ~ A Blogger’s Guide: Blogging to Success with Dashboard Settings in WordPress
- Part Two ~ A Blogger’s Guide: How to create a user profile, manage comments, view stats, and add widgets in WordPress
*Disclosure: These are resources I personally use and value highly. So much so, I became an Affiliate member. As an Affiliate, I endorse the products and services I use and love. If you see the value in these products and choose to purchase via my referral links, I may receive a small commission at no additional cost to you. ♥
In this tutorial, we’ll look at Choosing and Customizing a Theme. We’ll cover:
- Accessing Themes
- Customizing Themes
- Site Identity
- Colours
- Header Image/Logo
- Background Image
- Widgets
- Menus
- Homepage Settings
- Theme Settings
- Additional CSS
- Accessing and Installing Plugins
Ready? Let’s jump in.
WordPress Themes
Choosing a WordPress Theme and designing our website is the fun part. It’s not a complicated process, but it does require time and patience. This is where we get to showcase our style, content, and personality. ♥
WordPress offers 4000+ Themes. There really is something for everyone. Many Themes are free and Premium Themes can be purchased. We can also upload a Third-Party Theme. Access and ability to use these features will depend on your hosting and hosting plan, as referenced above.
For more details, please feel free to visit ~ WordPress.com vs WordPress.org
We can view and browse Themes via our Dashboard Appearance > Themes.
We can view Premium Themes and WordPress Themes. We can also Upload a Third-Party Theme.
We can narrow our search using the Categories, as displayed in the image below.
To view a Theme we can click on it for Details & Preview. We can also view a Live Preview and Activate it.
When we begin with a new Theme, it can feel a little daunting. It will look much different than the preview until we add content. The initial preview is a fantastic motivator, though, because we can see the potential.
Ready? Let’s do this!
Customizing Themes
We can customize our Theme via our Dashboard under Appearance.
Or we can click on Customize.
We’ll use both methods in this tutorial.
When we click on Customize, this is the panel we’ll see. It will vary depending on the Theme and features available, but it’ll look similar.
I have my website built, so you’ll see my website’s Homepage content displayed on the right of the panel. It will look different for every website Theme and vary depending on the stage of development.
Site Identity
This is where we add our Site Title, Tagline, and Site Icon. Our Site Title and Tagline are an extremely important component of website development.
We can also add our Site Title and Tagline from our Dashboard via Settings > General. For more details regarding Site Title and Tagline, please feel free to visit the first post in this Blogging to Success series ~ A Blogger’s Guide: Blogging to Success with Dashboard Settings in WordPress.
In addition to the Site Title and Tagline, we can upload our Site Icon. This can be a personal image, logo, icon, etc. The Site Icon appears in the browser tab.
NOTE: Whenever we make changes that we’d like to keep, we need to click on Publish located at the top of the panel.
Colours
Let’s look at Theme Colours. Depending on the Theme, colour options will vary. Some Themes offer a few options, and you may feel limited unless you are comfortable with coding. Premium Themes and Third-Party Themes can offer complete customization. Again, this is all about personal preference.
Full-colour customization is one of the many reasons I love the Refined Theme by Restored 316 Designs.
When we open the Colours tab, we’ll see a variety of options. We can change the background colour, text colour, link colour, etc.
If a Theme offers full customization, we can choose from the colour spectrum or enter a specific hex#. This is fantastic for branding and maintaining a consistent style.
Adding a Header Image/Logo
We can add a Header Image/Logo.
The Theme will advise on the ideal size and pixels of the Header Image. This is useful information. If our image size is off it may appear too small or really big. We can create custom sizes in Canva and/or Photoshop and/or resize via image editors. We can also crop after we upload our image.
In the image below, you can see I’m using a Header Image/ Logo with a transparent background. It displays nicely against the white background.
Adding a Header Image is personal preference. Some Themes, by default, will use your Site Title and Tagline.
Adding a Background Image
Depending on Theme features, we can add a Background Image. I decided to stay with a solid soft colour. We can easily Remove and Change Image.
Adding Widgets
Widgets are blocks that add features (ie. calenders, social media icons, etc.) and functions (ie. menu, subscriptions, etc) to our WordPress site. Depending on our WordPress Theme, we’ll see different widgets already installed and ready to set up. We can add widgets to designated areas on our site. For example, the sidebar is an ideal place to display widgets.
We can view and edit widgets under Appearance > Widgets.
If you’re blogging, ideally you’ll have a Blog Subscription option located on your site. This enables readers to follow our blog via email. ♥
If you’re self-hosted, the Jetpack Plugin is free to use and it includes a Blog Subscription Widget.
To add a Widget, we locate the widget from Appearance > Widgets. In the image below, I’m adding the Blog Subscription widget by clicking on it and then selecting where I want to place it. We can also drag and drop. Where we can place widgets will vary on the theme being used, as well.
My theme offers numerous locations to add widgets. For the Blog Subscription widget, I’m choosing the Primary Sidebar.
When we add the Blog Subscription Widget, it will display as below. We can easily edit and customize the text to personalize it.
We can reorder widgets by dragging and dropping in place.
This is how the widget is displayed in the sidebar on my site.
When readers subscribe to our blog, they will receive an email notification when we publish a blog post.
TIP: To optimize email notifications that translate into website views, configure your WordPress Dashboard via Settings > Reading > and select Summary Text.
For more tips and practical suggestions to optimize your Dashboard Settings, feel free to stop by the first post in this Blogging to Success series ~ A Blogger’s Guide: Blogging to Success with Dashboard Settings in WordPress.
Creating Menus
Next, let’s look at creating Menus.
The number and location of Menus will vary depending on the Theme you choose. You may find a free Theme that looks and works perfectly for you. Or you may decide to purchase a Premium Theme or a Third Party Theme and upload it. This is all personal preference, of course.
Creating and setting up a menu isn’t complicated once we know the basics.
Under Appearance > Menu, you’ll see that we can Edit and Manage Locations.
Under the Edit Menus option, we can Select a Menu to Edit or Create a New Menu. From the drop-down menu, we choose the menu, then click on Select.
In the sample below, I selected the Menu located Below Logo/Header.
We can add Menu Items, such as Pages, Posts, Custom Links, Categories, and WooCommerce Endpoints if you’re using WooCommerce on your site.
TIP: WooCommerce is an open-source, completely customizable eCommerce platform for entrepreneurs. WooCommerce is built on WordPress, the software that runs 26% of the web. It offers much flexibility via hundreds of free and paid WooCommerce extensions. I use WooCommerce on this site!
Let’s add a Page to our Menu. Essentially, the process of adding any of the Menu Items is the same.
When we click on the Pages drop-down arrow, we’ll see a list of our published pages.
NOTE: Pages, Posts, etc. must be published before they will display in this list. We’ll cover the process of publishing Pages and Posts in the next tutorial.
I selected my page Marketing Tips & Ideas and then clicked Add to Menu. It now displays in my Menu Structure, as you can see in the image below.
We can edit the item once it’s added to our Menu. We can edit the Navigation Label text and check Open in a New Tab. This is all personal preference. We can easily remove the item, as well.
We can also rearrange items by dragging and dropping in place. We can easily create a sub-menu by dragging and placing it below and a little to the right. It will attach to the item above it.
Using the same process, we can create a sub-menu within a sub-menu, as shown in the image below.
In the image below, you can see the five menus I have active on my website.
I designed the top left for easy access to my Shop. The top right displays my social media accounts, along with a search option. I created menus that display on the left, the right, and below my logo/header image.
TIP: When you’re creating your menu(s) layout, always think about ease-of-use for your readers. Simple, clutter-free is an ideal way to go. Sub-menus are great for creating an easy-to-navigate menu structure. ♥
In the image below, you can see how my Shop sub-menu displays when readers hover over Shop. It’s easy to navigate and clutter-free. I really appreciate this when I visit other websites, as well.
We can manage our menu locations via the Manage Locations tab.
Homepage Settings
We can choose how our Homepage displays. We can choose Your Latest Posts or Static Page. If we choose Your Latest Posts, our homepage will display our blog posts.
If we choose to display a Static Page, we can then select which page to display as our home page. For Post Page, we can select our Blog and it will display our Blog Posts.
This can also be set via Dashboard under Settings > Reading,
Depending on your WordPress Theme, this function may vary. For example, my homepage is a Customized Static Page, that enables me to display my Latest Blog Posts, as well. It’s one of the many reasons I love the Refined Theme by Restored 316 Designs.
Theme Settings
We can access our Theme Settings for additional features. This will also vary depending on the Theme in use.
Under Theme Settings, we’ll see additional options and features.
The main feature I’d like to cover is Site Layout.
Under Site Layout, we can choose how our website pages will display. This will set the format for all Pages and Posts.
TIP: We can change this layout format per Page and Post when we build content. We’ll look at this in the next tutorial of this Blogging to Success series.
In the image below, you can see I selected Content, Primary Sidebar.
This is how that format displays.
My content is on the left and the primary sidebar is displayed on the right. My Primary Sidebar displays my widgets.
Additional CSS
Themes come with the option for Additional CSS. If you’re comfortable with coding, we can do it here. In the image below, you can see I made a few minor edits to my Theme.
Accessing and Installing Plugins
Plugins extend and expand the functionality of our WordPress site. We can automatically install plugins from our Dashboard via Plugins > Add New or upload a plugin in .zip format.
We can search for Plugins using the Categories: Featured, Popular, Recommended, Favourites, and Premium.
To add a Plugin we just have to click on Install Now then click on Activate.
And that’s a wrap!
Designing our website can be an enjoyable experience. Like any new experience, it takes time and a little patience to learn the ins and outs of it all.
My best piece of advice is to find a Theme you like and explore the features and options. Showcase your style, personality, and brand. ♥
Have a tip you’d like to share? Please feel free to share in the comments below.
Next in this Blogging to Success with WordPress series, we’ll begin adding Pages and Posts! I hope you’ll join me.
Until next time … happy creating, my friends!
Mae Clair says
That was a ton of information. You clearly invest a lot of time in each of these posts.
Thanks for sharing, Natalie!
Natalie Ducey says
Thanks, Mae! I really enjoy putting these tutorials together. I’m working to build a comprehensive Blogging Guide for new bloggers. My sister just started her blog as a freelance writer. Yay! I love helping her with it. I wanted to do this guide for sometime now, so this gave me the added encouragement. 🙂
Thanks a bunch for stopping by, as always. Wishing you a fabulous week!
Mae Clair says
You too, Natalie. And congrats to your sister!
Jan Sikes says
Your tutorials are always SO all-inclusive, Natalie. Thank you!!
Natalie Ducey says
Delighted to share, Jan! Thanks for your kind words, as always. Happy Monday! 🙂
Jim Borden says
another thorough and useful tutorial; thank you!
Natalie Ducey says
Thank you, Jim! Always a joy to share. Cheers! 🙂
Colleen M. Chesebro says
Amazing information, Natalie. Great job!
Natalie Ducey says
Thank you, Colleen! Always a pleasure to share. 🙂