PHP Include for WordPress Nav Bar

(@jadejovon)

Hi all,

I have a website at http://jadebaltimore.com and I’m trying to customize The Francis Wright WP theme to look like my site. You can view the theme here: http://wordpress.org/extend/themes/the-frances-wright.

Since I’m really only trying to add my navigation bar to the theme (everything else is fine the way it is), I read that I could do that as a PHP include. Unfortunately, I haven’t encountered any directions on how this is typically done, so I tried to wing it to no avail. I’ll walk you through the steps I took and if you have any insight into what I’m doing wrong, I could really use your advice.

First, I opened a PHP doc in Dreamweaver CS5.5, inserted a Spry Menu Bar, and styled it to look exactly like my existing menu bar at jadebaltimore.com. I then saved the file in the “includes” folder of my test site, which I’ve been testing on my local server. I named the file “menubar.inc.php.” I tested it out in Firefox and everything looked great.

Next, I attempted to load it on my WP theme by moving the “menubar.inc.php” file to the “includes” folder of my WP blog. I also copied the Spry Assets folder into my blog’s theme folder because I assumed the nav bar would have to pull from it in order to load properly.

Finally, I copied the php includes code and pasted it in my theme’s header file. You can view the codes below.

“menubar.inc.php code:

<div id="navigation"><?php include('includes/menubar.inc.php'); ?></div>
<map name="Map4" id="Map4">
  <area shape="rect" coords="113,343,212,377" href="bio.html" alt="Bio" />
  <area shape="rect" coords="110,388,241,424" href="poetry.html" />
  <area shape="rect" coords="110,430,333,468" href="nonfiction.html" />
  <area shape="rect" coords="113,475,275,510" href="fiction.html" alt="Fiction" />
  <area shape="rect" coords="113,518,236,555" href="http://www.jadebaltimore.com/blog" alt="Blog" />
  <area shape="rect" coords="111,563,264,594" href="resume.html" alt="Resume" />
</map>

My theme’s header code:

<?php
/**
 * @package WordPress
 * @subpackage TheFrancesWright
 */

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="inital-scale=1.0, width=device-width" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) ) {
		echo " | $site_description";
	}

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 ) {
		echo ' | ' . sprintf( __( 'Page %s', 'themesweet' ), max( $paged, $page ) );
	}

?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<?php wp_enqueue_style('google_fonts', 'http://fonts.googleapis.com/css?family=Meddon|Ubuntu:300|Raleway:100|PT+Serif'); ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<body lang="en">
	<div id="site">
		<div id="content">
			<div id="menu">
				<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
			</div>
			<a href="<?php echo home_url(); ?>">
				<div id="lockup">
					<div id="headimg"></div>
					<h1 id="site_title">
						<?php bloginfo('name'); ?>
					</h1>
					<i id="tagline"><?php bloginfo( 'description' ); ?></i>
				</div>
			</a>

I tried placing the php include code between these two codes in the header file:

<?php wp_head(); ?>
</head>

And, when that didn’t work, I tried placing it between these two codes in the header file:

</head>
<body <?php body_class(); ?>>

So far, nothing has worked. I’m not even sure I have the “menubar.inc.php” file or the Spry Assets folder in the right place. Can someone please, please, please explain what I’m doing wrong? I’ve spent months working on this project and I’m at my wit’s end. I’ve tried everything I can think of and I just can’t seem to make it work. Any help would be greatly appreciated!

Viewing 9 replies - 1 through 9 (of 9 total)

Jarret
(@jarretc)

12 years, 2 months ago

Hi there, I would suggest just moving everything related to the menu into your theme’s folder. By the ‘includes’ directory that you mentioned I’m guessing you meant the wp-includes folder which isn’t necessary.

Once you have all of your files inside of your current theme’s folder you would do

<?php include('menubar.inc.php'); ?>

wherever you would like your menubar to display.

Although looking at your site and the source code it looks like you’ve already figured this out. So in case anybody else stops by and sees this, you can include a file by my code above.

Thread Starter jadejovon
(@jadejovon)

12 years, 2 months ago

Hi Jarret,

Thanks for responding. I haven’t figured it out yet so I’ll give your method a try and let you know how it goes. I had a feeling I may have moved the php include file into the wrong folder so that may be what’s causing the issue. Thanks again for your advice.

Thread Starter jadejovon
(@jadejovon)

12 years, 2 months ago

Ok, so I did what you suggested Jarret and it pulled in my nav bar—THANK YOU! —the only thing is, none of the css is displaying (even though I definitely put the Spry Assets folder in the theme’s folder). Instead, it’s just a showing up as a bulleted, vertical list. Is there any way to get the Spry Menu’s style properties to display? The theme’s style.css is really confusing and I can’t figure out which code changes what, so if I have to go in there to alter it, I don’t think I’ll succeed. Here’s the code I used for the php include and the spry menu bar assets:

`<div>
<?php include(‘includes/menubar.inc.php’); ?>
</div>
<script src=”SpryAssets/SpryMenuBar.js” type=”text/javascript”></script>
<link href=”SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css” />`

Is there something else I need, other than the Spry Menu Bar’s javascript to get it to display properly?

Jarret
(@jarretc)

12 years, 2 months ago

You need to place the javascript and CSS style information into the <head> </head> part of your theme.

Usually the <head> </head> is located within header.php in most themes. You can usually access this file by visiting the Editor sub menu item in the Appearance menu. Just be careful in what you are doing since you can easily mess up the display of your site if you make a wrong change.
Thread Starter jadejovon
(@jadejovon)

12 years, 2 months ago
Ok, so I’m making progress, but I’m still not there. I did as you said and I placed the javascript & css between the <head></head> tags and it loaded perfectly in Dreamweaver’s Live View. However, when I went to my local host and pulled up the actual blog, it still wouldn’t load the javascript & css. The navbar is no longer a long, vertical bulleted list, but for some reason the theme’s “menu” or “pages” script is overriding my own it seems. Either I’m missing a step, there’s another file I have to edit in my theme folder, or I’m just going to have to try to figure out the theme’s css file and make my style alterations there. It’s all so confusing, but I definitely feel as though I’m getting closer and that’s a good thing.

Here’s what the navbar looks like so far:

*It basically looks as though I enabled the theme’s menu bar via my WP admin, but I haven’t. In fact, I haven’t even created a menu there, so I don’t know what’s up with that…*

And, here’s what it should look like (except centered):

Also, Here’s the code I have so far in my theme’s header.php file if that helps:
```
<?php
/**
 * @package WordPress
 * @subpackage TheFrancesWright
 */

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="inital-scale=1.0, width=device-width" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) ) {
		echo " | $site_description";
	}

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 ) {
		echo ' | ' . sprintf( __( 'Page %s', 'themesweet' ), max( $paged, $page ) );
	}

?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<?php wp_enqueue_style('google_fonts', 'http://fonts.googleapis.com/css?family=Meddon|Ubuntu:300|Raleway:100|PT+Serif'); ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body <?php body_class(); ?>>

<body lang="en">
	<div id="site">
		<div id="content">
			<div id="navbar">
				<?php include('includes/navbar.inc.php'); ?>
			</div>
			<a>">
				<div id="lockup">
					<div id="headimg"></div>
					<h1 id="site_title">
						<?php bloginfo('name'); ?>
					</h1>
					<i id="tagline"><?php bloginfo( 'description' ); ?></i>
				</div>
			</a>
```
Thanks for all your help so far. Hopefully someone else will jump in soon so I don’t have to keep pestering you 🙂
Jarret
(@jarretc)

12 years, 2 months ago

I tried looking at the site you initially mentioned to see the code but I don’t see that you are using WP on that. Do you have a development site you are working on somewhere that I could look at?

Thread Starter jadejovon
(@jadejovon)

12 years, 2 months ago

The site I have is one that I created in Dreamweaver and it’s hosted on GoDaddy…it’s not a WP site. I do, however, have WP installed through my GoDaddy account which means that I can have a WP blog as part of my site, but only the blog itself is handled through the WP admin. It seemed like too much work to move my entire site over to WP, so I just figured I could customize a WP blog theme to look like the rest of my site. The one I found is great and I plan to keep everything the same except for the navigation bar. I’ve read online that people have done the exact same thing by turning their HTML navigation bar into a PHP file and then simply doing a PHP include to have it show up on their WP blog, but there aren’t many instructions on how they actually made it work. From what I’ve read it seems as though I’m doing everything right, but for some reason it’s not showing up accurately. Unfortunately, I don’t have a developer site or anything like that to show you; I’ve just been working on my files in Dreamweaver and then testing them through the local server on my computer. I’d planned to upload them after migrating the navigation bar over to the WP theme. Is there an easier method to accomplish my goal…? Maybe I’m going about it the wrong way…

Thread Starter jadejovon
(@jadejovon)

12 years, 2 months ago

I got it to work! My blog’s nav bar now looks exactly like the one on my site! I just had to get my hands dirty with a little CSS. I can’t get my submenu to appear, but I’m working on it. I think the reason it’s missing has something to do with the fact that WP isn’t reading Dreamweaver’s SpryAssets folder, even though I placed it in my theme’s directory. Nonetheless, I’m hoping I can find a workaround. In the meantime, I’m still open to suggestions…any advice would really help. If I don’t get a response I’ll still come back and post the resolution just in case anyone else is struggling with the same issues. Rest assured that I’ll eventually find the solution! If you’re reading this Jarret, thanks again for all your help; I don’t think I could have gotten this far without your advice. 🙂
Jarret
(@jarretc)

12 years, 2 months ago
Do the meta links in your header.php file still look like
```
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
```
If so, you may want to try using

wp-content/themes/name_of_your_theme/SpryAssets/file_name

for the src

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘PHP Include for WordPress Nav Bar’ is closed to new replies.

PHP Include for WordPress Nav Bar

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics