Archives

All posts for the month August, 2016

How to add a Menu to your WordPress Theme footer.php

Published August 27, 2016 by Anil Kumar Vishwakarma

Adding a Menu to the Footer

When I create a custom WordPress theme for my clients I like to create a footer menu as well. This is useful for adding links to contact, sitemap and back to top. Here are the steps to edit your own theme.

In this tutorial you are going to edit the functions.php, footer.php, and style.css files. If you modify theme files directly your customization will disappear when the theme updates. So create a child theme first.

Create a secondary menu area

Add the following code to the functions.php file for your twenty ten child theme

// This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
  'primary' => __( 'Primary Navigation', 'twentyten' ),  
  'secondary' => __('Secondary Navigation', 'twentyten')  
) );

Tell WordPress where the secondary menu should be used

Open your footer.php file and add the following code wherever you want the secondary menu to appear.

capture image

Style the menu

Open your css file and create a class bottomMenu and add your own styling. Here is an example.

.bottomMenu { display: block; width:960px;}
.bottomMenu ul { display:inline; float:right;}
.bottomMenu li { list-style-type: none; display: inline; font-size: 12px; }
.bottomMenu li a {
	color:#000;
	line-height:15px;
	text-decoration:none;
	font-weight:normal;
	border-right: thin solid #000;
	padding: 0 7px 0 3px;
}
.bottomMenu li a:hover { color:#ccc; text-decoration:underline;}
.bottomMenu li:last-child > a {border-right: none;} /* remove pipe from last item */

Create the Menu

  • Go to Appearance -> Menus and click the + to create a new menu
  • Name the menu e.g. “footer”
  • Add published pages such as contact, sitemap, privacy policy to the menu
  • Drag and drop menu items to order them
  • Save the menu
  • Set the Secondary Menu (you created this with the edit to the functions.php file) on the left side to use this newly created menu

Mobile Device Trick

Published August 4, 2016 by Anil Kumar Vishwakarma

Use media queries to hide content on screens with smaller resolutions, or show content on screens with a higher resolution. Easy way to hide pictures or unnecessary blocks of content for mobile devices. Good addition to put in your media queries to lay content out differently.

@media screen and (max-width: 480px){ }

@media screen and (max-width: 568px){ }

@media screen and (max-width: 667px){ }

@media screen and (max-width: 736px){ }

@media screen and (max-width: 600px){ }

@media screen and (max-width: 768px){ }

 

Note : You can test your website friendly on all devices from here : www.responsinator.com