Creating a secondary menu in WP3 artisteer theme |
|
wonka
|
Howdy,
How would I go about creating a second horizontal menu above (or inside) the header. I already have the main primary menu below the header.
I want this (and primary) menu to be configured in Appearance->Menus in WP-admin.
I've read up about doing this in WP3, and it seems I should use "wp_nav_menu". But when I look at artisteer's header.php & navigation.php it just seems jibberish - I really don't know where I would place this call, or what arguments to use. Also, I would need different CSS styles for the secondary menu.
|
| |
Tim
|
I too would be interested in learning about this.
|
| |
Abland
|
Hi, wonka and Tim,
Here's what worked for me:
In your theme's "core" folder create a new file: tmenu.php
Copy the following into the new file:
<?php
function art_get_tmenu_auto($theme_location = 'tertiary-menu', $source='Pages', $Subitems = 'true', $menu = null)
{
$depth = (!$Subitems ? 1 : 0);
if (($source != 'Custom Menu') && function_exists('wp_nav_menu')) {
$locations = get_nav_menu_locations();
if ($locations && isset( $locations[ $theme_location ] ) ) {
$nav = wp_get_nav_menu_object($locations[$theme_location]);
if($nav){
$source = 'Custom Menu';
$menu = $nav;
}
}
}
return art_get_tmenu($source, $depth, $menu);
}
function art_get_tmenu($source='Pages', $depth = 0, $menu = null)
{
if ($source == 'Custom Menu' && function_exists('wp_nav_menu') && $menu) {
return art_get_list_menu( array( 'menu' => $menu, 'depth' => $depth));
}
if ($source == 'Pages') {
return art_get_list_pages(array('depth' => $depth, 'sort_column' => 'menu_order'));
}
if ($source == 'Categories') {
return art_get_list_categories(array('title_li'=> false, 'depth' => $depth));
}
return "Error in menu source ".$source. ".";
}
** NOTE: All this is, is an edited copy of the first two functions of your core/navigation.php to create a tertiary menu and reference to tmenu
--------------
Next, in your theme's config.ini add the following just above [vmenu]:
[tmenu]
homeCaption = "Home";
showHome = true;
topItemBegin = "<span class='l'></span><span class='r'></span><span class='t'>";
topItemEnd = "</span>";
showSubitems = true;
source = "Pages";
--------------
In functions.php at approximately line 48 below "function art_page_variables($variables = null)" find:
'menu_items' => art_get_menu_auto('primary-menu', $art_config['menu']['source'], $art_config['menu']['showSubitems']),
Add below that line:
'tmenu_items' => art_get_tmenu_auto('tertiary-menu', $art_config['tmenu']['source'], $art_config['tmenu']['showSubitems']),
--------------
Then again in functions.php at approximately line 490 find:
if (function_exists('register_nav_menus')) {
register_nav_menus(
array(
'primary-menu' => __( 'Primary Menu' ),
'secondary-menu' => __( 'Secondary Menu' )
Edit as follows:
if (function_exists('register_nav_menus')) {
register_nav_menus(
array(
'primary-menu' => __( 'Primary Menu' ),
'secondary-menu' => __( 'Secondary Menu' ),
'tertiary-menu' => __( 'Tertiary Menu' )
** NOTICE: I added the tertiary-menu line, but also added a comma after the secondary-menu line.
--------------
Finally in functions.php at approximately line 24 find:
require_once(TEMPLATEPATH.'/core/parser.php');
require_once(TEMPLATEPATH.'/core/navigation.php');
require_once(TEMPLATEPATH.'/core/sidebars.php');
require_once(TEMPLATEPATH.'/core/widgets.php');
Add the next line:
require_once(TEMPLATEPATH.'/core/tmenu.php');
--------------
Now in your theme's templates/page.php add below <div class="art-sheet-body"> and above <div class="art-header">:
<div class="art-nav1">
<div class="l"></div>
<div class="r"></div>
<ul class="art-menu">
<?php echo $tmenu_items; ?>
</ul>
</div>
** NOTE: this is a copy of your art-nav div so yours might vary slightly. I called mine art-nav1 so I could add unique styling rules in my css by copying the art-nav styles, rename to art-nav1, and edit. Also notice it echos $tmenu_items
--------------
In your WordPress admin: Appearance > Menus under Theme Locations you have the Primary Menu, Secondary Menu, and now also Tertiary Menu.
Create your new custom menu, add some links and save. Then associate your new menu from the Tertiary Menu drop down and Save.
Style now in your style.css.
|
| |
wonka
|
hi Abland,
I followed your instructions, and they worked perfectly. Many thanks for this, I really appreciate it.
I've also been playing with the CSS, but finding it quite challenging. I added art-nav1 to style.css, and I've got the menu to move over to the right of the page, however despite lots of tweaking for a few hours, the style of the menu items is still identical to the main navigation menu.
I only want the new menu items to appear in plain black text, so it shouldn't be that difficult, but there are just so many CSS classes to understand, particularly the art-menu related ones.
Do you have any simple advice on how to change the menu items style to plain text?
Once again, thanks.
|
| |
Abland
|
Hi, wonka,
The art-nav to art-nav1 you obviously have figured out by being able to move your menu. For the menu items you would copy the related art-menu rules, then add the art-nav1 to the rule. For example, to have no background tabs on the new menu find: (this is from one of my projects - your values likely differ)
.art-menu a .r, .art-menu a .l
{
position: absolute;
display: block;
top: 0;
z-index: -1;
height: 90px;
background-image: url('images/menuitem.png');
}
Copy, add the art-nav1 class, and remove the background image:
.art-nav1 .art-menu a .r, .art-nav1 .art-menu a .l
{
position: absolute;
display: block;
top: 0;
z-index: -1;
height: 90px;
background-image: none;
}
For black text find:
.art-menu a .t
{
margin-right: 10px;
margin-left: 10px;
color: #DDE0DC;
padding: 0 19px;
margin: 0 4px;
line-height: 30px;
text-align: center;
}
Add the art-nav1 class and change the text color:
.art-nav1 .art-menu a .t
{
margin-right: 10px;
margin-left: 10px;
color: #000000;
padding: 0 19px;
margin: 0 4px;
line-height: 30px;
text-align: center;
}
All the rules of art-menu still apply, except for the ones you add that say apply to the art-menu that's inside the art-nav1. This should give you the idea for styling the hover and active links also.
|
| |
wonka
|
Once again Abland, many thanks.
I now have a stylish second menu above the header, and I appreciate you taking the time and trouble to explain how.
|
| |
Adeptris
|
The Wordpress 3 way!
Add a second text menu with it's own unique style
Functions.php add the third menu support:
register_nav_menus( array(
'tertiary' => __( 'Top Bar Menu', $themename ),
) );
Add the Style in Style.css Change width, height, colors to suit your theme:
/* Start Second Menu support */
#pagemenu {
display: block;
float: left;
margin: 5px 0px;
width: 940px;
height: 30px;
border-bottom: solid 1px #333;
}
#pagemenu a {
color:#000;
line-height:30px;
margin:0;
padding:0 10px;
text-decoration: none;
text-align:center;
}
#pagemenu .page-header,
page-menu.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#pagemenu .page-header ul,
.page-menu ul {
list-style: none outside none;
margin: 0;
}
#pagemenu .page-header li,
.page-menu li {
float:left;
position: relative;
}
#pagemenu li:hover > a,
#pagemenu ul ul :hover > a {
color:#FFF;
background:#000;
}
#pagemenu ul li:hover > ul {
display:block;
}
#pagemenu ul li.selected >a,
#pagemenu ul li.current_page_item > a,
#pagemenu ul li.current-menu-ancestor > a,
#pagemenu ul li.current-menu-item > a,
#pagemenu ul li.current-menu-parent > a {
color: #777;
}
* html #pagemenu ul li.selected a,
* html #pagemenu ul li.current_page_item a,
* html #pagemenu ul li.current-menu-ancestor a,
* html #pagemenu ul li.current-menu-item a,
* html #pagemenu ul li.current-menu-parent a,
* html #pagemenu ul li a:hover {
color:#777;
}
/* End Second Menu support */
Create a new file called navigation-2.php in the themes directory
Note: fallback_cb' => '' this only shows if menu is populated
<?php /* Start add our second page menu */ ?>
<div id="pagemenu" role="navigation">
<?php wp_nav_menu( array( 'container_class' => 'page-header', 'menu_class' => 'page-menu', 'theme_location' => 'tertiary', 'depth' => 0, 'fallback_cb' => '' ) ); ?>
</div>
<?php /* End lower page menu */ ?>
To call this in your themes header.php with a WordPress function Call
<?php /* Get our second navigation bar */ ?>
<?php get_template_part( 'navigation', 2 ); ?>
This is your introduction to "Template Parts", adding it to another theme is easy!
David 
|
| |
Momms
|
Okay got the secondary bar but they are both showing at the top. What did i do wrong.
|
| |
Abland
|
Hi, Momms,
Your original menu must have also been above the header.
Quote wonka:I already have the main primary menu below the header.
Quote Abland:Now in your theme's templates/page.php add below <div class="art-sheet-body"> and above <div class="art-header">:
<div class="art-nav1">
<div class="l"></div>
<div class="r"></div>
<ul class="art-menu">
<?php echo $tmenu_items; ?>
</ul>
</div>
The instructions were for the original menu below the header. But only the placement of the code changes. The code quoted above gets placed immediately after the </div> that closes the header instead of before the div starts.
|
| |
Rosemary
|
OK, I don't want to start a war, only a debate. Which way is better for WP 3.01 and latest Artisteer...Abland's or Adrepis' ?
Thanks,
Rosemary
|
| |
Adeptris
|
There will not be a war, Abland's solution is for Artisteer, mine is an alternative, both will work, you need to try both and settle for the one that you are happy with.
Mine is just a text menu, Abland has the images as well!
If you want transferable skills then look to learn both Artisteer and WordPress, if one version does not work for you, it may work for someone else that is the good thing about forums
David
|
| |
Rosemary
|
Hi David,
I don't understand the distinction. What do you mean that Abland's is a solution for Artisteer and yours is an alternative? An alternative to what? To Artisteer? in an Artisteer forum? I guess I thought that both were solutions for Wordpress 3.0 with an installed Art 2.5 produced theme...and that the files to be changed are Wordpress theme files. Am I understanding this correctly?
If I am, the question remains, which is better, meaning, which produces better, faster, more streamlined code?
Thanks,
Rosemary
PS, I know Artisteer quite well, TY, and my Wordpress skills are limited only to the extent that I don't yet understand php. I have php-phobia because of all those non-text characters!
|
| |
Adeptris
|
Hi Rosemary,
The distinction is my solution will work in Artisteer and many other themes, Abland wrote the solution just for the artisteer themes.
As other themes do not have the Artisteer structure and ini file the learnt skills are not easy transferred between projects.
I have child theme tutorials on my website for both migrating Artisteer 2.4 themes to add 'WordPress 3' functions and the WordPress twenty ten theme.
Which is better can only be answered by trying both methods, I am trying to get a broader knowlege base and add more tools to the toolbox, what suits one person may not suit another.
Have a look at my series of tutorials, these have easy to follow steps with the php code, compare them to how you would work with an Artisteer Theme.
http://digitalraindrops.net/tutorials/
This is a child theme I am working on for a new tutorial series, everything is transferable to the next theme by dropping in a few files and a few lines of code, no ini file to understand:
It is just a makeover of the twenty ten theme.
http://tutorial-2.digitalraindrops.net/
David
|
| |
Adeptris
|
Quote :
I thought that both were solutions for Wordpress 3.0 with an installed Art 2.5 produced theme...and that the files to be changed are Wordpress theme files. Am I understanding this correctly?
Yes that is correct both will work with an Artisteer Created Theme, the WordPress 3 one will work with any other WordPress 3 theme, not just Artisteer.
The point of my post was that you can think "Outside the Artisteer Box" for a solution, once the theme is exported in no longer reqiures Artisteer to work.
David 
|
| |
Steve
|
Thank you Adeptris!
I was looking all over for a easy way to do this and you made it simple. Also took a look at your site, very good information you have provided to all of us.
Also thanks to Abland, have learned something new from you.
Steve J.
|
| |
|
|