Footer

Here are tutorials on how to modify the website footer.


You can add a second menu to your site in the footer. Adding the footer menu is optional.

The footer menu is discussed at the 4:45 mark in the video.

Step by Step

How to Add the Footer Menu

1. In WordPress click Menus on the sidebar under Appearance.

2. On the Menus page click the Create a New Menu link.

create-menu

3. Enter a menu name in the Menu Name input field. Name it Footer Menu or something similar. Click Create Menu button on the right.

footer-menu

4. Now in the Pages box on the left, check all the pages you would like to add to the footer menu and click Add to Menu. Limit the amount of links you add to the footer menu. Drag and rearrange the links in the order you would like them to appear in the footer.

add-to-menu

5. In the lower part of the menu box under Menu Settings check Footer Menu.

select-footer-menu

6. Click the Save Menu button on the right.

save

Check out your live website to make sure the links appear properly.

Footer Menu Notes:

  • Limit the number of links you add to the footer so it doesn’t break into 2 or 3 lines.
  • Do no stack link into drop down menus, they will not work in the footer.


By default the footer widget section is hidden on the website, so you must turn this feature on.

Enable footer widgets:

  1. In WordPress click Customize under Appearance on the sidebar.
  2. Click Footer, then Settings.
  3. Select Show Footer Widgets Area and click the Save & Publish button.

Add Footer Widgets

  1. In WordPress click Widgets under Appearance on the sidebar.
  2. There are 3 widget areas for widgets: Footer ( Left ), Footer ( Middle ), Footer ( Right )
  3. Drag the widgets you would like to use to the Footer widget areas.

 

Footer Widget Notes:

  • Only add 1 widget to each footer widget option box.

Here is CSS code for the footer. If you are using version 2.18 and up, you can change the footer colors in the WordPress Customizer.

Change the Footer Text Color

Change the black color ( #000000 ) to what ever color you want.You can use the color picker at colorpicker.com to get the color your want.

/* Change Footer Text Color  */
#footer .textwidget, #footer h3, #footer h3 a, #footer ul li a, #footer_sub a,
#footer #widget_recent_post li span, #footer #widget_new_beats li span,
div#footer_copywrite {color: #ffffff !important;}

Hide the Footer

#footer_sub { display: none;}

Remove Footer Background

#footer, #footer_sub { background-color: none !important; background-image: none !important; background: none !important; }

Change the Footer Background Color

Change the dark grey #333333 to what ever color you want. You can use the color picker at colorpicker.com to get the color your want.

#footer_sub, #footer { background-color: #333333; }

Updated on August 19, 2012

Was this article helpful?

Related Articles

Leave a Comment