Now, with our site set up, it’s time to decide how we want it to look, so the first thing we’re going to do is install a theme.
In WordPress, a theme is basically just the way your layout looks on the front end of the site. Three themes are already loaded by default on WordPress, but I’ve downloaded something called Generate Press to the site.This theme works well with front-end page builders, which is what we’re going to be using. For my front end builder, I’m going to use Beaver Builder.
Now, there’s nothing wrong with any of these default themes. You can try changing the theme before you start entering your own data, and see the effect changing the theme has on the way the front end of your site looks.
Plugins
Of course, there are other front-end page builders that are very popular, with one called Elementor leading the pack. But Beaver Builder is my favorite for a variety of reasons, so that’s what we are going to be using. I will talk about some of the other plugins I’ve downloaded to the site some other time.
Before we start, though, let’s talk a minute about plugins. I’ve installed a few plugins for this site, including the Beaver Builder lite version. It’s free, which is why I’ve chosen it for the tutorial. I like to use Beaver Builder because it makes it easy to design pages through the front end instead of the back end, and it’s very convenient and intuitive visually.
Using the Media Library
One last thing before we start designing, and that is the Media Library. You’ll see the category “Media” in the left hand menu on the back end. When you select it, you can open the “Library” dropdown.This is basically the storage area for all of the files and images that you’ll use to create your website. You can easily store all your images (.pg or .png files) as well as .pdf files here.
Of course, first you have to upload them to the library. To do that, you click on “Media”, and then “Add New.” That opens the “Upload New Media Window.” In this case, I’m going to add the logo I designed in Photoshop for this sample site. (This is a fake logo for a fake vet site, by the way.) Once your image is loaded, X out of the upload panel, and you’re ready to go.
WordPress lets you edit your image title and your alt text (aka alt tag) while in the library, so I like to fill that out now. Title and alt text are really important for SEO quality scores. The image will already have some sort of title, but go ahead and rename it to something that you can also use as your alt text.
Now that the image is uploaded and the title and alt text are in place, I’m going to head back to the home page of the site.
Time to Start Building Out the Site with Customizer
The theme is installed and Beaver Builder is installed, so it’s time to start building out the site and fill it with content. For that, we go to the front end.
I always start by building my header, and I always put my site logo up there first. That’s done by clicking on the Customize button at the top of the page. Customizer lets you make changes to some of the aspects under the control of the theme.
The left hand Customizer panel gives you a number of options. When you click Site Identity, that, you can see you have options for the site title, the tagline and logo. By default, the name of the site is up on the header, and we need to replace it with the logo.
Click “Select Logo” and in the Media Library you will then select the logo. That opens a panel where you can edit the image by cropping it, but since I don’t want to crop it, I extend the crop lines to the image’s borders and select “skip cropping” at the bottom of the panel.
Now the logo shows in the Site Identity panel, and also in the header which will show on every page of our site. But since the website title is still visible in the header, we need to click both “Hide Site Title” and “Hide Tagline” (these choices are above the logo) in the side panel. Looks good, so we now hit Publish.
What To Do With the Rest of the Header?
Now we have a logo…and a huge open area in the rest of the header. Of course, you can put in contact information like location or phone number. Or you can put in navigation menu, which is what we’re going to do for this site.
We’re still in “Site Identity” in Customize, so we click the back button and go to Layout. There we choose “Header” and it says that the header width is full, and header alignment is left, both of which we want. Check out the “Header Presets”, and here we want to select “navigation right” because we want a nav bar to the right. Once that’s clicked, only the home button shows in the header nav, because that’s our only page right now.The nav will need to be styled, but we’ll do that later.
The next item in Layout is the “container.” Now, the width of the container depends upon what you want. If you want the logo area to be wider and you select a greater width than the default, you’ll see that the logo enlarges and spreads out. Since we don’t have a lot of pages in our sample site, this is fine. But if we had a very involved and a complicated menu showing lot of pages, we might want more real estate to show it. But for now, we’ll just leave width on 1100 px.
Now we give “Primary Navigation” a quick look, but it’s not really of interest to us right now, so we move on to “Sidebars.” Here we’ve got stuff related to how to search for pages and posts. Typically, I don’t include a sidebar by default since we can actually include sidebars on specific pages. If you’re building a blog, and not a website, you probably want to keep this. But for the purposes of web site design, full page layouts are much more effective visually. So we will select “ all content, no sidebars” and go through the dropdowns and keep that consistent for all of them in the Sidebars category.
Building a Footer
Now we’ll address the footer widget, which we can design in any way we want.
We’ve all seen sites with very complex footers – maybe more navigation down there, maybe images or announcements of coming events – but we are going to simplify this for our sample site.
I’ll just make the footer width full – the inner footer width will be called “contained” – and we can always change this if we don’t like how it looks. And we will choose “one footer widget” for now. Now we have a full-width, one content widget to fill with whatever we want. I’ll come back to that later. Time to hit publish so the work is saved.
I do need to point out, though, that footer styling is important to a lot of people, and you want to be able to have control over that. As it turns out, WordPress developers typically offer a free version of their themes or plugins, but in order to support themselves they also have premium versions with added features. What I am showing you is the Beaver Builder free version, so it’s a bit truncated, so we don’t have a lot at our disposal in the particular style options we’re seeing. We may have to do a little fancy dancing to get the footer to look exactly like we want it.
The Footer Design Work-Around (AKA Coding)
There are a couple of different ways we can go, but for now we’re going to do something really, really simple. We can go back to “Layout” and then to “Footer” within the Layout menu, instead of using a footer widgets. Here, instead of 1, we enter 0. When I publish that, it’s now a solid black background for the footer. The default text says “copyright , the name of your website, and Powered by Generate Press,” as author of the theme. We don’t really want that on our website.
Now because we have the free version, we don’t have a removal option and I’m going to have to add a function. I did some research and found some PHP code (the function) that seemed likely to work.
We can use this function to add desired text that fits the layout and design that is currently there. We copy the PHP code. and under “Appearance” in the back end of the site we go to the “editor” dropdown, click on editor, and find on the right-hand side something called “theme functions.” (functions, PHP). We click on that one because that’s where we want to put this code. Scroll down to the bottom, paste the copied PHP code and things have changed.
When we click to update file, the default message is now below the last line of your code. That message will show on the front end footer at the moment, and it says you can enter PHP or HTML code. But since this is something we need to fix in the back end, in the theme functions we replace the default message with the name of the site, Loveland Sample Test Website. We update the file, and when we go back to the home page in the front end and refresh the page, there it is.
But perhaps we want a bit more flexibility in creating the footer. I went back to the website where I found the first PHP, and there is information on how to eliminate the entire footer bar. After I copied that piece of code, I went back to “functions P” and overwrote the code that removed it entirely.
A quick click to update, a refresh of the home page on the front end, and boom! The footer is gone.
What? I Still Want a Footer!
Yes, we still want a footer. So we go back into the Customizer menu, then the “Layout” footer choice, and enter 1 footer widget instead of none. And now we have a footer that we can control a little better. Let’s refresh the page, then return to the back end where we go to “Appearance”, “widgets”. Once we click that, a number of pre-installed widgets show on the right.
We only have one widget, so we’ll choose footer widget 1.Now, on the left hand side of the page there are a number of specific widgets, and we are going to click on “text” and move it to footer widget 1. All we want to put there is the name of our site. So we enter it and then save. Back to the front-end and refresh. And it doesn’t look good at all, so we’re going back to the widget for new changes.
Unfortunately, it turns out that with the text widget in WordPress you have very limited editing capability. We have two tabs – visual and text. If we are in the visual tab all we have is italics bold, a chance to add lists, and a link. But that’s not what we want here.
All we really want to do is center the text, so let’s do that and bold it by highlight the text and hitting B. It’s now bold, and a visit to a WordPress forum post to revealed the proper code for centering, which is <div align = “center”> Be sure to paste the HTML under “text”, not “visual”.
Now we have the footer we wanted.
Well, that’s enough for today. Next time we have to start adding content to our site, and we have to take care of the menu because it needs to be more attractive. We need to add pages, of course, so we’ll work on that next time too.