Hello, fellow contractor!
If you’ve been following the How to Design a Business Website series on our blog, you’ve already made a TON of headway on your site!!
Well done!!
It’s time to continue with the website design process.
This session, we will customize the permalink structure on your WordPress website, update your user information, add a Gravatar to your profile, and dive into your site’s front end!
If you’re new to this website design series, check out the first post here! It will help get you started on your website journey.
Note: We will go over adding a logo to your site later in this post. If you still need to create a logo for your business, click here to learn how.
All right! Go ahead and log into the back end of your site, and let’s get this show on the road!
Customizing Permalink Structure in WordPress
After you’ve signed into the back end of your WordPress website, click (or hover) on Settings in the dashboard menu, and then click Permalinks.
The page that opens describes the different permalink structures available for your website.
Like the apartment or suite number of a home address, a “permalink” is the portion of a URL that points to a specific page of a website (rather than just the Home page). For example, the permalink for this page is “/customize-permalinks-create-gravatar-update-user-profiles-contracting-website,” which is added to our domain name (https://freedomconsultingcorp.com) to lead directly to this blog post.
Our blog page – which displays all of our blog posts – is https://freedomconsultingcorp.com/blog. The “/blog” portion of that URL is the permalink.
To make our permalinks look this way – instead of a nonsense jumble of letters and numbers automatically generated by WordPress – we changed our permalink structure to the “Post name” setting in the back end of our site.
We recommend you also choose Post name as your permalink setting so that you can optimize your URLs and generate more organic traffic to your site. You can customize each permalink for individual Pages or Posts in their settings, but not without changing your site’s permalink structure first.
The more synchronicity between your Post or Page titles, their URLs, and their content, the better!
After clicking Post name in the permalink setting list, Save Changes, and you’re good to go!
Now, you’ll be able to customize the permalink for each of your website’s Pages or Posts, which helps with search engine optimization and makes them easier to remember.
Great work!
Let’s move on and update your WordPress user information!
Updating User Profile Information in WordPress
After you’ve saved the changes you made to the permalink structure above, click on Users in the dashboard menu, and a list of users will be displayed.
Likely, your username will be the only one listed at first, but if you ever decide you need help with your site, this is where you would add users and their roles – such as author, editor, or administrators.
For now, though, let’s just update your information.
Click on the username WordPress assigned to you to customize your user profile.
Through this page, you can change the colors of the dashboard you see when you log into the back end of your WordPress site (fun, right?!), add your name to your profile (and choose how it is displayed on your site), and compose an author bio.
If you need to change your WordPress password (which was automatically generated for you when you set up your site using Bluehost), this is where you do that, too.
Changing your WordPress password to something you can remember will allow you to sign in to WordPress directly (bypassing Bluehost), potentially saving time…but we will discuss that process in a later post.
After you make any changes you wish to make to your profile, don’t forget to push Update User to save the changes.
One more thing! Did you notice the placeholder area meant for a profile picture on your user page? At first, there won’t be a picture there, and there won’t be a way to update that via the user profile page, either.
To update your profile picture – which will feature when you respond to comments on your blog posts, for instance – you will need a Gravatar.
Take note of the email address listed in your user profile, and let’s get you one!
Creating a Gravatar for your WordPress Profile and Email Address
If you plan to allow and respond to comments on your blog posts (or other pages), creating a Gravatar is an opportunity to look professional and further your online presence.
After you have a Gravatar – which is simply a picture (or “avatar”) associated with your email address online – you will be able to comment on any website, post, or video on the internet, and your photo will show up with your comment, as long as you are using an email address connected with your Gravatar account to make that comment.
Creating a Gravatar is very simple – and it’s free!
To get started, head over to gravatar.com, and click “Create your Gravatar” to sign up for a free account.
(Note: This will also create a WordPress.com account, which is just part of the process, so don’t let it worry you.)
Once you have registered for an account, you can add any email addresses you wish to be associated with your Gravatar image. Then, you can add an image to use as your Gravatar!
Note: Make sure to add the email address that you saw displayed within your website’s user profile page, or your Gravatar won’t show up on your site!
The image you upload to use as a Gravatar will need to be 10MB or less in size, and it will be cropped down to a square, so keep those parameters in mind when choosing your image.
Once you have added an image to your Gravatar account – and AFTER you’ve saved all the changes you made to your website’s user profile – you can refresh the page displaying your profile on your site, and your Gravatar should show up as your profile picture!
Bam!
Now, anytime you respond to a comment on your website, your Gravatar will be displayed, too.
Look at you, being all professional! Awesome job.
Time to move on to customizing your WordPress theme!
WordPress Theme Customization
At this point, you’re probably starting to feel comfortable in the back end of your WordPress website. That’s awesome! Take a moment to appreciate how far you’ve come in your website design journey.
You’re a rock star!
And now?
Let’s jump into customizing your WordPress theme! To do that, you will need to work from the theme customizer on the front end of your site.
The simplest way to get to the front end is from the back end of your site (since you haven’t launched your site yet).
So. From the back end of your site, hover over your website name, which is displayed in the top left corner of the dashboard, and then click “Visit Site.”
(Alternatively, as long as you’re already signed into WordPress, you can open a new tab in your browser, type in your domain to visit your site, and the customization bar should appear for you at the top of your site.)
Once you see the front end of your website, click on “Customize” in the toolbar at the top of the page to enter the customizer for your WordPress theme.
Perfect!
Now, you can add a logo and a favicon to your site, set up your Home and Blog pages, customize your site’s global fonts and colors, and much, much more!
Every theme’s functionality is different, but most theme customizers follow a similar system, so learning how to use one can help you understand any others you may choose to use later.
The best way to learn how to use the customizer for your theme is to play around with it! So go ahead – explore at your own pace, and have fun! (Is there any other way to live??)
Note: You may be able to change your theme’s code through the theme customizer – but we DO NOT recommend changing anything in your theme’s code unless you understand what you are doing…and know how to undo it.
That said, most items in your theme customizer will be relatively intuitive, but if you are unsure about what certain settings do, leave the defaults how they are, for now. You can always change them later, once you have learned more about your theme.
For the remainder of this blog post, we will walk you through the following front end customizations: adding a logo and favicon to your site and creating static Home and Blog pages.
Let’s go!
Adding Your Business Logo to Your Contracting Website
As we stated above, each theme’s front-end customizer is a little bit different, and some are updated frequently by their designers.
So.
The directions we walk through below, which describe the customizers for the Kadence and Astra themes (discussed in our last post), will be accurate as of May, 2022. With a little bit of digging, you should be able to easily find the items we describe, even if the specifics have since changed.
Ready? Super!
Adding a Logo & a Favicon to Your Website Using the Astra Theme
To add a logo to your site in the Astra theme customizer, click on “Site Identity” in the customizer menu, and then “Site Title and Logo Settings.”
From there, you will be able to add or change your logo, play around with the size of the logo, and update your site title and tagline (or toggle off the title and tagline displays entirely).
Insert the logo you created for your website when reading our blog post on the topic a few weeks ago (just upload it from your computer or drag it into the media area that pops up and select the image), and then you’re all set!
Click “Publish” to save the changes you’ve made. Perfecto!
Now – the favicon.
(Confused about what the heck a favicon is? Learn about them – and how to make yours – here!)
Scroll to the bottom of your current customizer page (Site Identity > Site Title and Logo Settings) and click “Site Icon.”
Here, you can add the favicon you prepared for your site.
Before doing anything else, click “Publish” to save the changes you’ve made in the front-end customizer. No need to do this all over again!
Well done.
Now, let’s customize your Home and Blog pages!
Adding a Logo & a Favicon to Your Website Using the Kadence Theme
To add a logo to your site in the Kadence theme customizer, click on “Site Identity” in the customizer menu, and then “Site Title and Logo Control.”
From there, you can add or change your logo, play around with the logo display size, and choose whether or not to show a site title and tagline.
Insert the logo you created for your business when reading our blog post on the topic a few weeks ago (just upload it from your computer or drag it into the media area that pops up and select the image), and then you’re all set!
Click “Publish” to save the changes you’ve made. Super duper!
Now – the favicon.
(Confused about what the heck a favicon is? Learn about them – and how to make yours – here!)
Scroll to the bottom of your current customizer page (Site Identity > Site Title and Logo Settings) and click “Site Icon.”
Here, you can add the favicon you prepared for your site.
Before doing anything else, click “Publish” to save the changes you’ve made in the front end customizer. No need to do this all over again!
Great work.
Time to set up static Home and Blog pages. Let’s go!
Creating Static Home and Blog (or Posts) Pages on Your WordPress Website
To display a consistent Home page on your contracting website (rather than a page that displays your latest posts), you’ll need to set it up as a static page. Then, you can set up a separate Blog page to house your posts.
Here’s how!
Note: to complete these tasks, you will need to have created the pages you want to use as your Home and Blog pages. If you still need to do that, check out the “Add Website Pages” section of our blog post on Creating Menus in WordPress.
Setting Up Your Home and Blog Pages Using the Astra Theme
To set up static Home and Blog pages using the Astra theme customizer, click “Homepage Settings” in the customizer menu, and then select “A static page” from the homepage display options.
Then, select the page you created to serve as your Home page from the drop-down menu that appears after selecting “A static page” for your home page setting options.
To set up your Blog page, select the page you created for that purpose from the drop-down menu under the Posts Page heading (just beneath where you selected the Home page you want to use).
Click Publish to save your changes…and that’s it! Easy peasy.
Now you have a static Home page and a Blog page that will host any posts you make.
Brilliant!
Setting Up Your Home and Blog Pages Using the Kadence Theme
To set up static Home and Blog pages using the Kadence theme customizer, click “Homepage Settings” in the customizer menu, and then select “A static page” from the homepage display options.
Then, select the page you created to serve as your Home page from the drop-down menu that appears after selecting “A static page” for your home page setting.
To set up your Blog page, select the page you created for that purpose from the drop-down menu under the Posts Page heading (just beneath where you selected the Home page you want to use).
Click Publish to save your changes…and that’s it! Easy peasy.
Now you have a static Home page and a Blog page that will host any posts you make.
Brilliant!
Conclusion
All right!
You’ve customized your contracting website’s permalinks, updated your user profile, connected a Gravatar to your email address, and set up your site’s Home and Blog pages. Fantastic work!
Your website is coming right along, isn’t it!?
And Freedom Consulting is still right here to help you along the way. If you have any questions regarding this process, don’t hesitate to reach out!
We are here for you, man. No need to go it alone.
Next time, we will discuss plugins and website security.
Until then, take a well-deserved rest, and maybe dream up something awesome to post on your future blog!
Happy dreaming!
