Upgrading Artisteer to Version 3 Part 2

WordPress have addressed the menus limitations in the latest version, but in doing so have created new calls to getting the menu items and have restructured these, so out the box the new features are not supported in legacy themes. lets add support for the new horizontal menus.

In part one we looked at creating a child theme for an existing Artisteer theme, one of the major changes in WordPress version 3 is the menu functions, with WordPress now having the ability to create different menu structures and apply these, the requests for moving menu items and adding links to external pages can be found in all the WordPress forums.

In the Artisteer Forum there are patches for creating new themes with Version 3 support, and Bud of Buds Tech Shed has produced a tutorial for modifying the header.php to give a legacy theme version 3 menu support.

You can download the example Parent theme Here: Example 2.4 Theme (1919)

You can download the example Child theme Part 1-2 Here: Artisteer Theme Upgrade Part 2 (1195)

There is no point in us re-inventing the wheel, so we will use Bud’s code in this tutorial, however if you have a pile of themes to modify and different WordPress versions to support it can become a nightmare.

What we will do in our child theme is to wrap Bud’s code into a function, copy the header.php file from the parents directory and add support for Version 3, we have added two extra line to Bud’s code to identify the menu we want to call for the horizontal menu bar.

In the child themes directory create a file called functions.php, with child themes this file will be loaded by WordPress before the parents functions.php, in this file we can add new functions, override existing functions, and turn off functions.

In the new functions.php file copy and paste the code below:

<?php

$childthemename = 'Artisteer V3';

// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
 'primary' => __( 'Primary Navigation', $childthemename ),
 'secondary' => __( 'Secondary Navigation', $childthemename ),
'tertiary' => __( 'Tertiary Navigation', $childthemename ),
) );

/* Start add Version 3 Menu Support from Buds Tech Shed */
function cms_wp_nav_menu() { ?>
<div class="art-nav">
 <div>class="l"</div>
 <div>class="r"</div>
 <?php wp_nav_menu( array(
  'sort_column' => 'menu_order',
  'theme_location' => 'primary',
  'menu_class' => 'art-menu',
  'title_li' => '<div class="l"></div><divclass="r"></div>',
  'menu' => 'pages', // this is the name of your menu you created in the menu admin
  'link_before' => '<span class="l"></span><span class="r"></span><span class="t">',
  'link_after' => '</span>'
 ) ); ?>
</div>
<?php }
/* End add Version 3 Menu Support from Buds Tech Shed */

?>

Open the child themes style.css and below the @imports add these lines from Bud’s tutorial, you will need to read Buds Tutorial to find the values for top and color.


/* Start add Version 3 Menu Support from Buds Tech Shed */
.art-menu li.current-menu-item a .l, .art-menu li.current-menu-item a .r ,
.art-menu li.menu-item-parent a .l,.art-menu li.menu-item-parent a .r
{
   top:-58px; /* Check Buds tutorial for setting this value */
}

.art-menu li.current-menu-item a .t, .art-menu li.menu-item-parent a .t
{
   color:#0C0E0C; /* Check Buds tutorial for setting this value */
}
/* End add Version 3 Menu Support from Buds Tech Shed */

Now we copy the header.php file from the parent themes directory to the child themes directory and add support for the horizontal menus, locate the existing art-menu block of code and use remarks like below to disable the code, later when you are happy with the changes you can delete the old remarked code, add in a call to our new function as in this example.

<!-- Version 3 Menu -->
<?php cms_wp_nav_menu(); ?>

<!-- this block can be remarked or deleted
<div class="art-nav">
	<div class="l"></div>
	<div class="r"></div>
	<ul class="art-menu">
		<?php art_menu_items(); ?>
	</ul>
</div>
-->

Now you have upgraded the horizontal menu, we will look at the vertical menu later in this set of tutorials, when you visit the admin panel of your test install you will now have a fully featured menu page.

Create a menu and set this as the primary navigation in Theme Locations, the secondary is to use later if you have a second horizontal menu, the tertiary will be used in a later tutorial to populate the vertical menu.

Here is the menu we created in the screenshot above.

Credits

Buds Tech Shed: www.budstechshed.com

Notice

Note: we do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information
This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.

All sample code is provided by www.DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of some themes and files is restricted to site supporters.

You can register for a 10 year ‘Free Supporters Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content some of these these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.

This website is a tool to support and promote WordPress and Artisteer, please support, share and give credit for any benefits you gain from the tutorials on this website.

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Migration

Child-8-12

To much information and still finding it a bit scary, lets us make it very easy, this quick guide is all the code changes except the styling, there are only three code block to do honest, first we need to find the header.jpg in … Continue reading

Read More