Wordpress Required PHP Extensions

 

Following are extensions required by wordpress,

 

1. php-curl
2. php-gd
3. php-intl
4. php-mbstring
5. php-soap
6. php-xml
7. php-xmlrpc
8. php-zip

Changing The Color Of Each Nav Menu Item in Wordpress

The WordPress navigation menus take up a large chunk of CSS in your themes style.css file making it one of the most challenging elements to customize. With that in mind, i’m simply going to provide the exact code i used on this site and then explain a bit about each part.

 

Add CSS Classes

1. The first step is to go to Appearance > Menus and click the Screen Options tab located in the top right hand corner of the Edit Menu screen.
2. Check the CSS Classes box under Show advanced menu properties.
3. Next step is to add a unique name to the CSS classes field for each menu item.  
4. Once you’ve added the new classes for each item, you can then use those classes to style each one in your child themes.style.css file.

 

Style Sheet CSS Code

Here’s the code i used to style different classes of the primary nav menu.

Note: CSS code changes may not show up immediately due to browser & server side caching.

/**
* @author Hackkode
* @url http://hackkode.com
*/

.home-nav {
    background: #0F222E;
}

.menu-primary li.home-nav a:hover {
    background: #fff;
 color: #333;
}

.beg-vid-nav {
    background: #1A3A4F;
}

.menu-primary li.beg-vid-nav a:hover {
    background: #fff;
 color: #333;
}

.set-word-nav {
    background: #265573;
}

.menu-primary li.set-word-nav a:hover {
    background: #fff;
 color: #333;
}

.inst-word-nav  {  
background: #386D73;
}

.menu-primary li.inst-word-nav a:hover {
    background: #fff;
 color: #333;
}

.tools-nav {  
background: #81A68A;
}

.menu-primary li.tools-nav a:hover {
    background: #fff;
 color: #333;
}

.contact-nav {  
background: #9FBF8F;
}

.menu-primary li.contact-nav a:hover {
    background: #fff;
 color: #333;
}

.blog-nav {  
background: #D4D9B0;
}

.menu-primary li.blog-nav a:hover {
    background: #fff;
 color: #333;
}

.nav-primary a:hover, .nav-primary .current-menu-item > a {
    color: #333;
 background: #fff;
}

.menu-primary a:hover {
-webkit-box-shadow: 5px 5px 5px rgba(50, 50, 50, 50);
-moz-box-shadow:    5px 5px 5px rgba(50, 50, 50, 50);
box-shadow:         5px 5px 5px rgba(50, 50, 50, 50);
}

.menu-primary a, .menu a {
color: #fff;
}

.genesis-nav-menu .sub-menu a {
color: #333;
}

What Each Class Does

.home-nav – This is the unique class you can add to each menu item and use to style the static appearance of each menu item. In this case, its used to change the background color of each item. It changes when hovered using another class.

.menu-primary li.home-nav a:hover – These classes include both the custom classes added to each menu item and classes for which target the primary menu only. They also include the class which effects the hover color. In this case the hover color is set to white(#fff) for every item and the text color changes on hover to a dark grey(#333).
Each menu item includes the above styling.

.nav-primary a:hover, .nav-primary .current-menu-item > a – These classes effect the primary nav menu color for each item when the page is visited. They change the background color of each item to white and the text color to grey when the reader is on a page which is included in the nav menu.

.menu-primary a:hover – This CSS only effects each item when hovered over. In this code it adds a box shadow effect to each item.

.menu-primary a, .menu a – These classes only effect the static text color which i have changed to white.
No doubt there’s a lot more you can do to style each of your nav menu items using custom classes in your themes style sheet.

Here’s a few color tools you might like to use to choose which colors for each item.