Title: PHP Include for WordPress Nav Bar
Last modified: August 20, 2016

---

# PHP Include for WordPress Nav Bar

 *  [jadejovon](https://wordpress.org/support/users/jadejovon/)
 * (@jadejovon)
 * [14 years, 3 months ago](https://wordpress.org/support/topic/php-include-for-wordpress-nav-bar/)
 * Hi all,
 * I have a website at [http://jadebaltimore.com](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](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](https://wordpress.org/support/users/jarretc/)
 * (@jarretc)
 * [14 years, 3 months ago](https://wordpress.org/support/topic/php-include-for-wordpress-nav-bar/#post-2560511)
 * 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](https://wordpress.org/support/users/jadejovon/)
 * (@jadejovon)
 * [14 years, 3 months ago](https://wordpress.org/support/topic/php-include-for-wordpress-nav-bar/#post-2560515)
 * 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](https://wordpress.org/support/users/jadejovon/)
 * (@jadejovon)
 * [14 years, 3 months ago](https://wordpress.org/support/topic/php-include-for-wordpress-nav-bar/#post-2560522)
 * 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](https://wordpress.org/support/users/jarretc/)
 * (@jarretc)
 * [14 years, 3 months ago](https://wordpress.org/support/topic/php-include-for-wordpress-nav-bar/#post-2560661)
 * 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](https://wordpress.org/support/users/jadejovon/)
 * (@jadejovon)
 * [14 years, 3 months ago](https://wordpress.org/support/topic/php-include-for-wordpress-nav-bar/#post-2560688)
 * 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](http://i227.photobucket.com/albums/dd130/jadejovon/blognavbar.jpg) 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](http://i227.photobucket.com/albums/dd130/jadejovon/stienavbar.jpg)
   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](https://wordpress.org/support/users/jarretc/)
 * (@jarretc)
 * [14 years, 3 months ago](https://wordpress.org/support/topic/php-include-for-wordpress-nav-bar/#post-2560689)
 * 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](https://wordpress.org/support/users/jadejovon/)
 * (@jadejovon)
 * [14 years, 3 months ago](https://wordpress.org/support/topic/php-include-for-wordpress-nav-bar/#post-2560695)
 * 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](https://wordpress.org/support/users/jadejovon/)
 * (@jadejovon)
 * [14 years, 3 months ago](https://wordpress.org/support/topic/php-include-for-wordpress-nav-bar/#post-2560706)
 * 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](https://wordpress.org/support/users/jarretc/)
 * (@jarretc)
 * [14 years, 3 months ago](https://wordpress.org/support/topic/php-include-for-wordpress-nav-bar/#post-2560729)
 * 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.

## Tags

 * [nav bar](https://wordpress.org/support/topic-tag/nav-bar/)
 * [php includes](https://wordpress.org/support/topic-tag/php-includes/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 9 replies
 * 2 participants
 * Last reply from: [Jarret](https://wordpress.org/support/users/jarretc/)
 * Last activity: [14 years, 3 months ago](https://wordpress.org/support/topic/php-include-for-wordpress-nav-bar/#post-2560729)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
