The client specialises in food writing and cooking in private homes.

The new site automatically adds the new publications to the home page, and allows complete control over the slideshow gallery, the entire website wording, and extra pages.

The client approached Acroweb requesting a vivid and pictorial site to showcase her work. The website was turned around very quickly and has resulted in an exceptionally happy client!.

Launch isabelhood.com

The site is at the top of Google’s natural listing for the chosen keywords and continues to draw a lot of traffic to 2XS.

Launch animalwetsuits.co.uk

This tutorial will take you through the everything you need to add to your php template and your css code in order to add great looking horizonal css drop down menus to your custom wordpress theme.

Step 1: Adding Custom Menu Support to your theme

Very simply, all you have to do is open your functions.php file. This is located in your theme directory. If you don’t already have one, create one.

Add this code:

function register_my_menus() {
  register_nav_menus(
    array(
      'top-nav' => __( 'Top Nav' )
    )
  );
}

This code simply tells wordpress that you have 1 menu position in your theme, called “Top Nav”.

If you now go to admin-appearance-menus you can then create a new menu.

Give your menu a name like Main Menu and click “Create Menu”

You should then see something like this:




From here, you can very easily add pages, categories and custom links to your menu, so build yourself a menu.

You can drag and drop menu links into the order that you want and if you drag a link to the right, it makes it a sub-menu item of the item above.

Do not forget to click “Save Menu” when you are done.

Step 2: Adding the Custom Menu to your Custom WordPress Theme

You may have noticed that although you have built a lovely new custom menu, it is not visible when you look at your WordPress site.

This is because you now need to add the custom menu to your custom theme.

If you are using a header.php file, you need to add something like the following code to the header.php file (in the position where you want your nav menu)

<?php
wp_nav_menu( array( 'theme_location' => 'top-nav' , 'container_class' => 'menu-header' ) );
?>

This code tells WordPress that this is the “Top Nav” position for your menu. It also tells WordPress to put the menu in the “menu-header” container class -the reason for doing this will become apparent later.

Looking at you WordPress site, depending on your css, you should see something like this:





In order to make this into a nice, horizontal, drop-down menu, we need to style it with some css.

Step 3: Styling Your Custom WordPress Horizontal Drop-Down Menu with CSS

The Custom WordPress Menu that you have produced is an un-numbered list and if you look at the source code that is produced, it will be something like:

<div class="menu-header">
  <ul id="menu-main-menu-1" class="menu">
    <li class="menu-item menu-item-type-post_type current-menu-item page_item page-item-12 current_page_item menu-item-38"><a href="http://localhost/acroweb/">Home</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-39"><a href="http://localhost/acroweb/?page_id=2">About</a>
       <ul class="sub-menu">
	 <li class="menu-item menu-item-type-custom menu-item-40"><a href="#">Submenu 1</a></li>
	 <li class="menu-item menu-item-type-custom menu-item-41"><a href="#">Submenu 2</a></li>
       </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-37"><a href="http://localhost/acroweb/?page_id=27">Contact Us</a></li>
</ul>
</div>

This is basically an un-numbered list (ul) – the submenu items are ‘nested’ in another un-numbered list.

It may look nasty at the moment but this can all be fixed with css and it is worth noting that un-numbered lists are the most search engine friendly menus to use in your WordPress site.

Making the List Horizontal and Removing the Bullets

Add the following to your style.css file:

.menu-header {
	display: block;
	float: left;
	margin: 0 auto;
  width: 100%;
  height: 42px;
}

.menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-header li,
div.menu li {
	float: left;
	position: relative;
}

This should make your Custom WordPress menu start to take shape. It should now be horizontal with no bullets and the submenu should appear underneath, something like this:

Positioning and Hiding the Submenu

The submenu needs to be hidden (we will make it appear on hover later). Add the following css to your file:

.menu-header li,
div.menu li {
	float: left;
	position: relative;
}

.menu-header ul ul {
	display: none;
	position: absolute;
	top: 38px;
	left: 0;
	float: left;
	width: 180px;
	z-index: 99999;
}

This will make the menu look something like this:

Better Colouring and spacing things out

We can then change the font colours and styling and space out the links:

.menu-header a {
	color: #aaa;
	display: block;
	line-height: 41px;
	padding: 0 10px;
	text-decoration: none;
	font-weight: normal;
}

So, our menu will then look like this:

Adding the Hover

To make the sub-menu appear, we need to use the :hover pseudo-class.
Add the following css:

.menu-header ul li:hover > ul {
	display: block;
}

We can also add some colouring to the hovering menu:

.menu-header li:hover > a,
.menu-header ul ul :hover > a {
	background: #333;
	color: #fff;
}

This should give you the following:



The hover should work in all browsers.

Styling the Submenu

We need to make the submenu vertical and give it some colour.

.menu-header ul ul a {
	background: #333;
	line-height: 1em;
	padding: 10px;
	width: 160px;
	height: auto;
}

To match the colourscheme, we are going to give the whole nav bar a black background by adding:

background-color: #000;
to the menu-header class, so you end up with:

.menu-header {
  background-color: #000;
  display: block;
  float: left;
  margin: 0 auto;
  width: 100%;
  height: 42px;
}

We are now nearly there.

Highlighting the Current Page

Wordpress adds classes to the current menu item. You can use this to style them. Try adding this to your css:

.menu-header ul li.current_page_item > a,
.menu-header ul li.current-menu-ancestor > a,
.menu-header ul li.current-menu-item > a,
.menu-header ul li.current-menu-parent > a {
	color: #fff;
}

This highlights the current item, making the font white.

The finished product:



So, there you have it. Proper CSS Custom Drop Down menus in WordPress!

The client specialises in personalised stationery for any occasion.

Modip was already running an online shop, but unfortunately the site did not allow them to change any products or add new ones and they no longer wished to pay high prices for each small change to their product catalogue.

The client approached acroweb with the requirement for a new website.

Acroweb designed and built an online, modified, Zen Cart that as well as lookng great, allows:

• easy changes to their product catalogue – price changes / adding and removing products
• excellent order and stock control
• customer communication through order confirmation and dispatch confirmation emails
• customized sales monitoring and reporting

At time of writing, the website is entering its second year of use and the online turnover is showing a steady growth

Launch modip.co.uk

The client’s requirements were for an easy-to-update website that allowed them to publish their latest menus (for both food and drink), keep everyone up-to-date with events at the pub and show latest Twitter tweets.

The client requested a very particular design style that gave a real feel for the pub, including a slideshow of local photography.

Acroweb delivered a custom WordPress theme which has proven ideal.

Launch theshorepub.co.uk