pixopoint-multiNOTE: Flexibility 3 and FlexSqueeze now have full drop-down menu support, including support for custom menus in WP 3.0.

Until I get a chance to update the actual theme code and integrate my own drop-down menu, here’s a pretty easy fix for both themes that allow for integration of the PixoPoint menu plugin by Ryan Hellyer.

The plugin not only does a good job with the suckerfish menu, but it also makes it very easy to customize your menu. Add drop-down categories, include or exclude pages, add custom code and even add a search box in your menu.  I’ve worked with the plugin extensively integrating it into another theme, but here’s the quick solution to using PixoPoint with Flexibility 2 and FlexSqueeze.

Edit the header.php file

The first thing you want to do is go into the ‘Editor’ option under the Appearance tab in WordPress. Find your header.php file and click on it to open the code in the edit box.

If editing code is not your thing, you can always just highlight all the code (Ctrl-A), copy (Ctrl-C) and paste into Notepad or some other text editor.  That way if you break it you can always just paste it back in and save it back to the default.

First, depending on if your navigation is above the header or below it, that will determine which code to edit.

Navigation above the header

If your navigation is above the header, look for this line of code:

<?php if ($flex_nav_position == "above") { ?>

Enter the following code immediately after the line above:

<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} else { ?>

And lastly, add this line of code immediately after the </div> tag 10 lines down:

<?php } ?>

Your final revised code will look like this:

<?php if ($flex_nav_position == "above") { ?>
<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} else { ?>
<div id="nav" style="clear:both;">
  <ul>
    <?php if ($flex_nav_home == "no") { ?>
    <?php } else { ?>
    <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
    <?php } ?>
    <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exclude=&title_li=&depth=1')); ?>
  </ul>
  <div class="clearer"></div>
</div>
<?php } ?>
<?php } else { ?>
<?php } ?>

The code above can simply be copied and pasted into your header.php file if you’d rather not add the individual lines.

Navigation below the header

Adding the PixoPoint menu into your navigation below the header is almost identical to the process above, you are just inserting the code lower in your header code. So if your navigation is located below your header, look for the following line of code in the header.php file:

<?php if ($flex_nav_position == "below") { ?>

To make this easy, just copy the code below and replace all the code from the line above to the end of the header.php file:

<?php if ($flex_nav_position == "below") { ?>
<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} else { ?>
<div id="nav" style="clear:both;">
  <ul>
    <?php if ($flex_nav_home == "no") { ?>
    <?php } else { ?>
    <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
    <?php } ?>
    <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exclude=&title_li=&depth=1')); ?>
  </ul>
  <div class="clearer"></div>
</div>
<?php } ?>
<?php } else { ?>
<?php } ?>

That’s it for the header.php modifications. Now we’ll add the CSS code to style the menu.

Edit the style.php file

Whether you’re using Flexibility 2 or FlexSqueeze, you’ll need to add the following code to the style.php file in order for the menus to look good and be able to customize the colors via the theme options.

If you’re using Flexibility 2, you will not need to resave your theme settings in order to preview the changes, but with FlexSqueeze, you’ll need to resave your theme settings after editing the style.php file in order to rewrite the style sheet.

Go into your file editor in WP and open the style.php file. Copy and paste the following code at the very bottom of the file.

/*-- PixoPoint Menu CSS  --*/
 
#pixopoint_menu1 {
	width:100%;
	height:33px;
	background:#<?php echo $flex_nav_barback; ?> url("images/navfhleft.png") repeat-x;
	background-position:50% 0;
	margin:0;}
#pixopoint_menu1 ul {
	width:100%;
	border:none;
	background:none;
	margin:0;
	padding:0;
	list-style:none;
	}
#pixopoint_menu1 li {
	border:none;
	background:none;
	background:#<?php echo $flex_nav_barback; ?> url("images/navfhleft.png");
	color:#<?php echo $flex_nav_txtclr; ?>;
	line-height:33px;
	z-index:20;
	letter-spacing:0px;
	background:;
	font-weight:bold;
	font-size:12px;
	padding:0;
	margin:0 0px;
	;float:left;
	font-family:tahoma,sans-serif;
	position:relative;
	}
#pixopoint_menu1 li:hover,#pixopoint_menu1 li.sfhover {
	background:#<?php echo $flex_nav_tabhvr; ?> url("images/navfhleft.png");
	}
#pixopoint_menu1 li a {
	border:none;
	background:none;
	text-decoration:none;
	display:block;
	padding:0 12px;
	color:#<?php echo $flex_nav_txtclr; ?>;
	}
#pixopoint_menu1 li a:hover {
	border:none;
	background:none;
	text-decoration:none;
	color:#<?php echo $flex_nav_hvrcolor; ?>;
	background-position:100% -150px;
	}
#pixopoint_menu1 ul ul {
	position:absolute;
	left:-999em;
	top:33px;
	width:150px;
	}
#pixopoint_menu1 li:hover ul,#pixopoint_menu1 li.sfhover ul {
	left:auto;
	}
#pixopoint_menu1 ul ul li a {
	padding:4px 10px;
	text-transform:normal;
	font-variant:normal;
	}
#pixopoint_menu1 ul ul li {
	letter-spacing:0px;
	color:#444444;
	z-index:20;
	width:150px;
	font-family:helvetica,arial,sans-serif;
	font-size:11px;
	font-weight:normal;
	font-style:normal;
	background:#FFFFFF;
	border-bottom:1px solid #cccccc;
	border-left:1px solid #cccccc;
	border-right:1px solid #cccccc;
	margin:0;
	}
#pixopoint_menu1 ul ul li a {
	line-height:22px;
	color:#444444;
	text-decoration:none;
	}
#pixopoint_menu1 ul ul li:hover a,#pixopoint_menu1 ul ul li.sfhover a {
	color:#FFFFFF;
	text-decoration:none;
	}
#pixopoint_menu1 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
	color:#444444;
	}
#pixopoint_menu1 ul ul li:hover li a:hover,#pixopoint_menu1 ul ul li.sfhover li a:hover {
	color:#FFFFFF;
	}
#pixopoint_menu1 ul ul li:hover,#pixopoint_menu1 ul ul li.sfhover {
	color:#FFFFFF;
	background:#333333;  /*-- This is the drop-down menu hover background color  --*/
	}
#pixopoint_menu1 ul ul ul li {
	font-size:1em;}#pixopoint_menu1 ul ul ul, #pixopoint_menu1 ul ul ul ul {
	position:absolute;
	margin-left:-999em;
	top:0;
	width:150px;
	}
#pixopoint_menu1 li li:hover ul,#pixopoint_menu1 li li.sfhover ul,#pixopoint_menu1 li li li:hover ul,#pixopoint_menu1 li li li.sfhover ul {
	margin-left:150px;
	}
#pixopoint_menu1 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
	text-decoration:none;
	}
#pixopoint_menu1 ul ul li li:hover a,#pixopoint_menu1 ul ul li li.sfhover a {
	color:#FFFFFF;
	text-decoration:none;
	}
#pixopoint_menu1 li.pixo_search:hover {
	background:none;
	}
#pixopoint_menu1 li.pixo_search form {
	margin:0;
	padding:0;
	}
#pixopoint_menu1 li.pixo_search input {
	font-family:tahoma,sans-serif;}
#pixopoint_menu1 li.pixo_search input.pixo_inputsearch {
	width:100px;
	}
#pixopoint_menu1 li.pixo_right {
	float:right;
	}

PixoPoint Plugin Settings

pixopointAfter activating the PixoPoint menu plugin, you’ll have a new PixoPoint Menu option under your Settings menu. This is where you’ll find the controls for your menu as well as the slick drag-and-drop interface for organizing your menu bar.

Under the PixoPoint Settings tab, you’ll find a set of options similar to what you see to the left. Make your settings look exactly like these in order for your menu to work properly in the theme.

The Drop-down menu settings options (not shown in this screenshot) can be set to whatever you prefer for animation speed and effect.

Customizing the Menu

You’ll be able to customize the background color and hover color of the menu as well as the normal and hover color for the menu text. You will lose the ability to use any other menu styles however, as the CSS code above is coded to use the ‘simple’ style menu.

The drop-down menu is styled at 150 pixels wide with a white background and a dark grey hover state. If you glance through the CSS code above, you’ll see reference to colo r #333333 which is the background hover color. #444444 is the normal text color, #CCCCCC is the border color, #FFFFFF is both the hover text color and the normal background color. You’ll also see multiple references to 150px. If you want a wider menu, make all instances of 150 wider, and conversely if you want a narrower menu make them smaller.

Adding a Second PixoPoint Menu

If you’ve ever wanted to use a main menu bar for your pages and use a second menu bar for your categories, here’s how you do it with the PixoPoint plugin.

First, make the changes shown above, but skip the part for the lower navigation bar. So you’ll be adding the PixoPoint menu hook into the top navigation bar in the header.php and adding the CSS code for that menu to the style.php file.

To make the lower navigation bar (below the header) work with the PixoPoint plugin, here’s what to do:

In the header.php file, find and highlight this code (last code in the file)

<?php if ($flex_nav_position == "below") { ?>
<div id="nav" style="clear:both;">
  <ul>
    <?php if ($flex_nav_home == "no") { ?>
    <?php } else { ?>
    <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
    <?php } ?>
    <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exclude=&title_li=&depth=1')); ?>
  </ul>
  <div class="clearer"></div>
</div>
<?php } else { ?>
<?php } ?>

Now delete the entire selection. By doing this, you’re removing the conditional statement that controls the bottom nav bar and now we’ll replace it with the code to pull in the second PixoPoint menu:

<?php if (function_exists('pixopoint_menu')) {pixopoint_menu(2);}

Just paste that single line where the previous code was, save your header.php file and then go to the next step.

Adding in more CSS

You now need to copy all the CSS code that you pasted into your style.php file earlier, and paste it at the end of the file again, but after you paste the code, simply replace each reference to pixopoint_menu1 with pixopoint_menu2. You will then be able to style your second menu separate from your first, but it will default to being identical.

Here’s the new code if you prefer to copy and paste:

#pixopoint_menu2 {
	width:100%;
	height:33px;
	background:#<?php echo $flex_nav_barback; ?> url("images/navfhleft.png") repeat-x;
	background-position:50% 0;
	margin:0;}
#pixopoint_menu2 ul {
	width:100%;
	border:none;
	background:none;
	margin:0;
	padding:0;
	list-style:none;
	}
#pixopoint_menu2 li {
	border:none;
	background:none;
	background:#<?php echo $flex_nav_barback; ?> url("images/navfhleft.png");
	color:#<?php echo $flex_nav_txtclr; ?>;
	line-height:33px;
	z-index:20;
	letter-spacing:0px;
	background:;
	font-weight:bold;
	font-size:12px;
	padding:0;
	margin:0 0px;
	;float:left;
	font-family:tahoma,sans-serif;
	position:relative;
	}
#pixopoint_menu2 li:hover,#pixopoint_menu1 li.sfhover {
	background:#<?php echo $flex_nav_tabhvr; ?> url("images/navfhleft.png");
	}
#pixopoint_menu2 li a {
	border:none;
	background:none;
	text-decoration:none;
	display:block;
	padding:0 12px;
	color:#<?php echo $flex_nav_txtclr; ?>;
	}
#pixopoint_menu2 li a:hover {
	border:none;
	background:none;
	text-decoration:none;
	color:#<?php echo $flex_nav_hvrcolor; ?>;
	background-position:100% -150px;
	}
#pixopoint_menu2 ul ul {
	position:absolute;
	left:-999em;
	top:33px;
	width:150px;
	}
#pixopoint_menu2 li:hover ul,#pixopoint_menu1 li.sfhover ul {
	left:auto;
	}
#pixopoint_menu2 ul ul li a {
	padding:4px 10px;
	text-transform:normal;
	font-variant:normal;
	}
#pixopoint_menu2 ul ul li {
	letter-spacing:0px;
	color:#444444;
	z-index:20;
	width:150px;
	font-family:helvetica,arial,sans-serif;
	font-size:11px;
	font-weight:normal;
	font-style:normal;
	background:#FFFFFF;
	border-bottom:1px solid #cccccc;
	border-left:1px solid #cccccc;
	border-right:1px solid #cccccc;
	margin:0;
	}
#pixopoint_menu2 ul ul li a {
	line-height:22px;
	color:#444444;
	text-decoration:none;
	}
#pixopoint_menu2 ul ul li:hover a,#pixopoint_menu1 ul ul li.sfhover a {
	color:#FFFFFF;
	text-decoration:none;
	}
#pixopoint_menu2 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
	color:#444444;
	}
#pixopoint_menu2 ul ul li:hover li a:hover,#pixopoint_menu1 ul ul li.sfhover li a:hover {
	color:#FFFFFF;
	}
#pixopoint_menu2 ul ul li:hover,#pixopoint_menu1 ul ul li.sfhover {
	color:#FFFFFF;
	background:#333333;  /*-- This is the drop-down menu hover background color  --*/
	}
#pixopoint_menu2 ul ul ul li {
	font-size:1em;}#pixopoint_menu1 ul ul ul, #pixopoint_menu1 ul ul ul ul {
	position:absolute;
	margin-left:-999em;
	top:0;
	width:150px;
	}
#pixopoint_menu2 li li:hover ul,#pixopoint_menu1 li li.sfhover ul,#pixopoint_menu1 li li li:hover ul,#pixopoint_menu1 li li li.sfhover ul {
	margin-left:150px;
	}
#pixopoint_menu2 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
	text-decoration:none;
	}
#pixopoint_menu2 ul ul li li:hover a,#pixopoint_menu1 ul ul li li.sfhover a {
	color:#FFFFFF;
	text-decoration:none;
	}
#pixopoint_menu2 li.pixo_search:hover {
	background:none;
	}
#pixopoint_menu2 li.pixo_search form {
	margin:0;
	padding:0;
	}
#pixopoint_menu2 li.pixo_search input {
	font-family:tahoma,sans-serif;}
#pixopoint_menu2 li.pixo_search input.pixo_inputsearch {
	width:100px;
	}
#pixopoint_menu2 li.pixo_right {
	float:right;
	}

If you’re using Flexibility 2, there’s no need to save theme settings, but if you’re using FlexSqueeze, go into the theme settings and save them to rewrite the style sheet.

Turn on the second PixoPoint menu

The last step is to go back into your PixoPoint plugin settings and check the option box for “Add a second menu”. This will activate the lower menu and by default will show your categories unless you had modified your second menu prior to this. Now you have the same drag-and-drop function on your second menu as you have on your first.

That’s it! Now you have the ability to use multiple drop-down menus with FlexSqueeze or Flexibility 2, and also the excellent menu organization function built in by PixoPoint!

Tagged with:

Filed under: Flexibility BlogTheme IssuesTutorials

Like this post? Subscribe to my RSS feed and get loads more!