9: WordPress Menu and Footer

Disclosure: Some of the links on this page are ‘affiliate links.’
This means if you click on the link and purchase the item, I will receive an affiliate commission.

Ready to try out Divi?

This is Day 9 of the 10 day Build Your Website Challenge, on how to set up a wordpress menu and footer. If you missed Day 8, on Building a Mobile Responsive Website, you can find it here.

The goal is that, by the end of 10 days, you’ll have your DIY mobile responsive website up and running!

Hey, sorry, back here with another annoying task day. But we sure did have fun the past few days, no? Today, we tackle all those little clean up things that I’m sure you’ve noticed on your website. Scroll down for more detailed information on how to set up a WordPress header and footer!

  1. Set up your menu. You can do this in your WordPress dashboard > appearance > customize.
  2. Set up your footer. You can do this in your WordPress dashboard > appearance > widgets.

How to set up your WordPress Menu:

First, create a new menu. I recommend naming it ‘Primary Menu’ if you plan to use it as your main header menu. WordPress refers to those menus as the ‘primary menu.’ So, it’s just easier to give it the same name from the start and avoid confusion.

Now, we need to add the pages and items to the menu. On the left, you’ll see all of your content. There’s probably only one or two pages there if you’re just getting started, and that’s fine! Just check the box next to the item you want to add to the menu, and then click ‘add to menu.’ After you add things to the menu, on the right, you can rearrange them by dragging and dropping. You can also nest items underneath another item. Just drag it so that it’s under the parent item and slightly indented (WordPress will indent automatically).

Now that you have the structure of your menu physically built, you might want to edit the names on some of the pages. Those page names are important for SEO. So, what you named a page earlier on might not be what you want your visitors to see in your menu. You can edit the text that shows up in the menu by clicking the down arrow that you find on the right side of the menu item. When you click the arrow, a box will open up. Then, you can edit the menu item name right in that box. Of course, I make sure everything is consistent here with capitalization, because that will show on your menu as well.

Set the menu location & do the styling.

Once the menu is built, go to the tab at the top that says ‘locations.’ Set your new menu to show up as the Primary Menu and you’re alll set!

For more details and ideas for how to style your new WordPress menu, check out this article on setting up and styling your menu.

How to set up your WordPress footer:

Your WordPress website will likely come with a premade footer. You can use that if you like, and you can edit it in Appearance > Widgets.

If you just want to edit the bottom bar, there are a few different steps you have to take to find all the different pieces. None of these are hard, but you just have to look in different spots to find all the parts.

To turn off or edit the social media icons in the bottom bar: Go to Divi > Theme Options. Click the toggle where it says ‘show Facebook icon,’ etc. to toggle on or off the icons you want. Add the links in the section directly below that that says ‘Facebook Profile URL,’ etc. If you want to add different icons to the bottom bar, I recommend skipping down to the section on how to create your own footer & bottom bar in Divi.

To edit the styling or change the text in the bottom bar: Go to Appearance > Customize > Footer > Bottom Bar. Here you can change the size and color of the social media icons. You can also change the color of the bar and text and even edit the text yourself if you’d like.

For more information, check out this article on how to edit the footer in WordPress.

How to create your own footer & bottom bar in Divi:

What I usually do is create my own footer, and that overrides the widget footer and bottom bar that come as a default in WordPress. I just find it easier to build something new in the Divi builder than to try to navigate all the different places that WordPress hides things. It might seem scarier at first, but it’s easier than you think. Plus, building your own footer & bottom bar will make it easier for you to maintain and update going forward.

To build your own WordPress footer in Divi:

1. Go your WordPress admin dashboard > Divi > Theme Builder.

2. In the ‘Default Website Template’ box, choose ‘add global footer.’

3. A blank Divi builder page will load. Here you can build and design your footer & bottom bar however you like.

4. Make sure to save! It’s not intuitive here and you have to save in two places. First save, the page you’re building on. Then, click the purple X at the top right to go back to the Theme Builder page. On that page, make sure to click the green ‘save changes’ button!

Check and then share your new website!!

This is a good way to subtly ‘launch’ your site to friends and family. You can text them and say, ‘hey, I’m building my website and I wanted to make sure it works on your phone/ tablet/ desktop. Can you take a look and let me know how it looks?’  And bam, your website is soft launched and you didn’t even have a panic attack. 

Okay, that’s it for Day 9 of the DIY Website Challenge, on how to set up a wordpress menu and footer. I hope everything came out working properly and looking sharp! If you got stuck, there are tons of tutorials out there to help you. Just Google ‘WordPress menu (your problem)’ or ‘WordPress footer how to (your problem)’ and you’ll find plenty of help. If your issue is Divi-based, add ‘Divi’ to your search. Or, you can contact their excellent customer support team for free help. Tomorrow, we’ll be doing the very last, but very important bits – backing up & sharing our websites and organizing our tasks for future maintenance and growth.

Need Hosting?
I use & recommend

Related Posts

DIY Website Challenge

DIY Website Challenge

Welcome to the 10 day DIY Website Challenge!If you've decided to try DIY-ing your WordPress site (instead of hiring a freelance web developer to do it for you), you're in the right place. The goal is that, by the end of the challenge, you'll have your website all...

read more
DIY Website Challenge

8: Building a DIY Mobile Responsive Website

This is Day 8 of the 10 day Build Your Website Challenge, on building a DIY mobile responsive website. If you missed Day 7, on Designing your Home Page, you can find it here. The goal is that, by the end of 10 days, you'll have your DIY mobile responsive website up...

read more