Wordpress and navmenu...and PHP questions too

I decided to create my own theme b/c I wanted to do my own thing and, like it says in the documentation, it’s a great way to learn WP and PHP. Oh, I’m learning all right…in fits and starts. I will admit I posted this on the WP.org forum and got zero response, so apologies if you saw this before.

I’m starting to understand PHP better and template tags and so on. I’m using Bootstrap, but that really shouldn’t impact what I’m trying to do (i don’t think).

Here’s the basic design in HTML; http://www.leesachs.com/testing

I’m mainly concerned with the header and particularly the nav. If I can figure out the wp_nav_menu to do what I want it to do, I’ll be much further along. Here’s the HTML for my navigation (navbar-special is a class I created for an image-based navbar):

[INDENT]<div class=“navbar”>
<div class=“navbar-special”>
<ul class=“nav”>
<li><a href=“#”><img src=“blog.jpg” /></a></li>
<li><a href=“#”><img src=“humor_new.jpg” /></a></li>
<li><a href=“#”><img src=“consulting.jpg” /></a></li>
<li><a href=“#”><img src=“contact_new2.jpg” /></a></li>
</div> <!-- div closing navbar –>
</div><!-- div closing navbar –>[/INDENT]
and here’s my feeble attempt at PHP of that:

<?php wp_nav_menu( array(‘menu’ => ‘navbar’, ‘container’ => ‘nav’ , ‘container_class’ => ‘menu_navbar_special_container’)); ?>

I know the PHP doesn’t really explain much, but I don’t want to paste in a ton of code and make this post look even worse. I have lots of other questions, but some help here would be HUGE. Thanks in advance Sitepoint Peeps

Hi there,
Do I understand you correctly, that you are trying to take the nav bar from the HTML page you link to and implement it in WordPress?

That’s pretty much the idea. An image based nav, in WP, using Bootstrap to line everything up nice. Does that make sense?

BTW, these are the relevant classes from the CSS; the rest are handled by navbar

.navbar-special {
min-height: 51px;
padding-top: 15px;
}
.navbar-special .nav > li > a {
float: none;
margin:0px;
padding: 0px;
text-decoration: none;
}

Hi there,

This shouldn’t be too difficult to implement.
You write in your first post that you’ve decided to make your own theme.
How far along are you? (just so that I know where to jump in).
If you have started coding, have you got as far as the menu area yet?
Are these the only four menu points you have / will have?
Would you have anything against hard coding the menu into your theme, or do you want the ability to edit the menu from within your WP backend?

Thanks Pullo. I’m just working on a static home page like it shows in the prototype; my blog will be off of that home page. Yes, I am as far as the menu, but it’s not showing up in WP. (Actually currently, I’m swapping in and out different themes to just learn what I can and try things out.) I do have it set up under Settings > Readings for a static front page and then a blog. Those are the 4 menu options, but I don’t want home on the menu as the user could get back to home by clicking the header banner.

As far as hard coding, I have no problem with that; I just want it to work. OTOH, I might expand this project and, maybe maybe, this would be a theme someone else might use. Not intending it for that purpose, but there should be an ability to do both. Just to be sure, when you say through the WP backend, you mean in the Administration screen Appearance > Menus.

Hope that makes sense and thanks again!

Lee

Hi Lee,

Then first of all, let’s just port the page, as it is, to WordPress, so that you can see how all of the parts fit together.
Here are some instructions to follow:

[LIST=1]
[]Create a new folder in your WP themes folder. Name it test.
[
]In this new folder (wp-content/themes/test), create the following files: header.php, index.php, footer.php, styles.php.
[]Copy and paste the following code into the respective files and save it.
[
]Head to your WP dashboard -> Appearance -> Themes
[*]Activate the new theme - seem familiar??
[/LIST]Let me know when you’ve done that.

style.css

@charset "utf-8";
/* CSS Document */

/*
Theme Name: Lee sachs
Theme URI: http://www.leesachs.com
Author:Pullo
Tags: test
*/

header.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MENU</title>
    <link href="http://www.leesachs.com/testing/bootstrap.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="container">
      <div class="row">
        <ul class="toenails">
          <li class="span7"><img src="http://www.leesachs.com/testing/logo_good5a.jpg"></li>
          <li class="span5 pull-right"><h5>Lorem ipsum dolor et consecjsdf jfdsjo dsafj ra04n1 55lsjv0 jsdfirqw ffioi23 csdfjsf</h5></li>
          <li class="span5 pull-right"><a href="#"><img src="http://www.leesachs.com/testing/Social_comp.jpg" /></a></li>
        </ul>
      </div><!--row-->
      
      <div class="navbar">
        <div class="navbar-special">
          <ul class="nav">
            <li><a href="#"><img src="http://www.leesachs.com/testing/blog.jpg" /></a></li>
            <li><a href="#"><img src="http://www.leesachs.com/testing/humor_new.jpg" /></a></li>
            <li><a href="#"><img src="http://www.leesachs.com/testing/consulting.jpg" /></a></li>
            <li><a href="#"><img src="http://www.leesachs.com/testing/contact_new.jpg" /></a></li>
          </ul>
        </div> <!-- navbar-special -->
      </div><!-- navbar -->

index.php

<?php get_header(); ?>

<div class="span12">
	<div class="row">		
		<h1>This is me.</h1>
		<h3>Just launched, so I'm still figuring out what's going on here. But basically it's what you see up there, a Blog about things related to User Experience, Technology and various amusing musings on our Weird World. Humor is humor; Consulting is about my professional life. </h3>
		<h3>Below are two highlights from the funny side of things.  The Museum of Marketing Madness is my curated collection of Bad Advertising, Marketing and other messaging, I'd call it the Awkward Family Photos of Advertising and Marketing, a curated collection of ads I find that should be held aloft for observation and ridicule.  </h3>
		<h3>I am so smart, I'm an idiot is a fictional blog (F'BLOG, my own term).  Did you ever read a blog written by someone you don't know talking about stuff you've never heard of and doing things you can't believe?  Well, then this blog is for you.  This is written by an obsessive blogger who, starting at the beginning of time, has been blogging about a bunch of stuff nobody cares about, nobody knows about and people no one ever knew.  You may recognize some of the people, but that's only because you too have wandered into blogs written by someone you don't know talking about stuff you never heard of. </h3>
		<p>then a p tag w/more stuff, rss feed, blah blah</p>
	</div><!-- end row -->
</div><!-- end span12 -->

<div class="span12">
	<div class="row">
		<div class="span6"><a href="#"><img src="http://www.leesachs.com/testing/madnessmuseum.jpg" /></a></div>
		<div class="span6"><a href="#"><img src="http://www.leesachs.com/testing/idiot.jpg" /></a></div>
	</div><!--row -->
</div><!--span12 -->

<div class="span8 offset4">
	<h6>This site is a the property and the sole creation of Lee Sachs, upon whom this domain is named and wherein all which therefore shall be mine all mine, so don't steal it.  Be nice.  I was here first.  Please link here and let me know if you do, but don't plagiarize or I will hunt you down like the dog that you are.  That is if you plagiarize.  You are only a dog if you plagiarize.  If you don't, then you can be any animal you want.</h6>
</div> 

<?php get_footer(); ?>

footer.php

    </div><!--container-->
  </body>
</html>

pullo…i gotta run out for a bit, but i’m going to do what you’re saying and get back to you. stay tuned…although it might be very late for you if you’re in germany, you’ll have something to wake up to. danke!

Yeah, no problem at all.
All the code I posted does is recreate your static page within WP, nothing terribly exciting.
Once you’ve got that working, we can go from there and make things more dynamic.

okay man, got you covered. i know WP is gonna want a functions.php file and so on. but it’s a place to start…think i see where you’re going. but enough for now.

Guten morgen,

So, hopefully you have done what I suggested and have seen that you now have a perfectly static copy of your original page within WP.
While this is cool, it is also pretty useless. Now you need to make your site dynamic, so that you can use WP to edit its content.

The first thing to look at is the menu. Essentially you have five pages: blog, humor, consulting, contact and home.
Go to “Pages” on your WP dashboard and create blank pages with these names.
Then go to Settings -> Permalinks and change the link structure to “Postname”
Now edit the menu code of header.php as follows (this assumes that your WP site resides at http://domainname and not http://domainname/wordpress/, for example):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MENU</title>
    <link href="http://www.leesachs.com/testing/bootstrap.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="container">
      <div class="row">
        <ul class="toenails">
          <li class="span7"><a href="/home/"><img src="http://www.leesachs.com/testing/logo_good5a.jpg"></a></li>
          <li class="span5 pull-right"><h5>Lorem ipsum dolor et consecjsdf jfdsjo dsafj ra04n1 55lsjv0 jsdfirqw ffioi23 csdfjsf</h5></li>
          <li class="span5 pull-right"><img src="http://www.leesachs.com/testing/Social_comp.jpg" /></li>
        </ul>
      </div><!--row-->
      
      <div class="navbar">
        <div class="navbar-special">
          <ul class="nav">
            <li><a href="/blog"><img src="http://www.leesachs.com/testing/blog.jpg" /></a></li>
            <li><a href="/humor"><img src="http://www.leesachs.com/testing/humor_new.jpg" /></a></li>
            <li><a href="/consulting"><img src="http://www.leesachs.com/testing/consulting.jpg" /></a></li>
            <li><a href="/contact"><img src="http://www.leesachs.com/testing/contact_new.jpg" /></a></li>
          </ul>
        </div><!--navbar-special-->
      </div><!-- navbar-->

Finally, make the content of these pages editable, by altering index.php like so:

<?php get_header(); ?>
<div class="span12">
    <div class="row">           
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <h2><?php the_title(); ?></h2>            
        <?php the_content('Read more...'); ?>          
      <?php endwhile; endif; ?>        
    </div><!-- end row -->
</div><!-- end span12 -->
<?php get_footer(); ?>

Now you should be in a position to add content via the WP dashboard and have a (albeit very basic) working site.

If you have any questions, just let me know.

P.S. I’m not suggesting that you go live with this, it is merely intended to demonstrate how to fit some of the pieces together to achieve what you want.

ok…i will make those changes later tonight (while you are probably sleeping). i’m already sorta seeing where you’re going, but let me see what i can figure out…will check in tomorrow.

ciao…

Guten morgen!

Pulli - I totally get what you’re doing. So the menu is hard coded into the site. And maybe this is just as well. For the life of me I don’t see a plugin or a way to cleanly have a navbar that uses images instead of text. This method for now might just work. Need to understand more but making progress!

Lee

Hi Lee,

Making a dynamic menu with images is not at all hard.
You would just do the following:

Edit your header.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MENU</title>
    <link href="http://www.leesachs.com/testing/bootstrap.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="container">
      <div class="row">
        <ul class="toenails">
          <li class="span7"><a href="/wp_1/home/"><img src="http://www.leesachs.com/testing/logo_good5a.jpg"></a></li>
          <li class="span5 pull-right"><h5>Lorem ipsum dolor et consecjsdf jfdsjo dsafj ra04n1 55lsjv0 jsdfirqw ffioi23 csdfjsf</h5></li>
          <li class="span5 pull-right"><img src="http://www.leesachs.com/testing/Social_comp.jpg" /></li>
        </ul>
      </div><!--row-->
      
      <?php if ( !function_exists('dynamic_sidebar') || dynamic_sidebar('Menu') ) : ?>
      <?php endif; ?>

Notice the last two lines. They replace your hard coded menu.

Then you need to create a functions.php file and place the following code in it:

<?php
if ( function_exists('register_sidebar') ){
  register_sidebar(array('name' => 'Menu',
                         'description' => 'My badass menu',
                         'before_widget' => '<div class="navbar">',
                         'after_widget' => '</div>'));
}
?>

Now d the following in your WP dashboard:

  • Go to Appearance -> Menus
  • Create a new menu, giving it a unique name and adding the desired pages to it (you can also drag the pages into the desired order)
  • Go to Appearance -> Widgets
  • You should see your theme’s menu area displayed on the right hand side of the screen
  • Your newly created menu will either already be in the theme’s menu area, or will be listed under inactive widgets
  • If it is listed under inactive widgets, then drag it over to the menu area and press save
  • Sorted!

Now if you look at your page you should see your menu, which is fully functional, but unstyled.

If you take a look at the page’s source code you will see something like this:

<div class="navbar">
  <div class="menu-main-container">
    <ul id="menu-main" class="menu">
      <li id="menu-item-411" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-411"><a href="http://localhost/testing/">Testing</a></li>
      <li id="menu-item-412" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-412"><a href="http://localhost/humor/">Humor</a></li>
      <li id="menu-item-413" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-413"><a href="http://localhost/consulting/">Consulting</a></li>
      <li id="menu-item-414" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-414"><a href="http://localhost/contact/">Contact</a></li>
    </ul>
  </div>
</div>

Now change the link to your site’s stylesheet in header.php from this:

<link href="http://www.leesachs.com/testing/bootstrap.css" rel="stylesheet" type="text/css" />

to this:

<link rel="Stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" />

Copy all of your CSS styles into style.css, then style your menu as desired (with images or whatever).
Simples!

Hope that helps.
Hit me up if you have any questions.

Pullo -

(sorry i called you Pulli last night). This rocks. You rock. Sitepoint Rocks. As I mentioned before, I posted this on the WP Forums and nobody replied. I’m going to play around some more and see what other trouble I can get into.

I’m going to take a wild guess and assume that I don’t have to use the description => “My Badass Menu.” :slight_smile:

That’s alright. I quite liked it. I’m thinking of changing my name now … :slight_smile:

No, you do. This is a WordPress naming convention and if you break it, your site will stop working. :smiley:

Anyways, good luck with this. If you run into any more trouble, just let me know.

okay…not quite there. don’t know why. did what you said, but not seeing the menu unstyled or otherwise.

I’m trying to figure it out on my own, and I think it might have something to do with either what the description is in functions.php or the dynamic_sidebar(‘Menu’) in header.php or something else. Yes we joked about the name “My badass menu” which I left in, but should it be changing that to the new name of the menu I created in the WP Appearance>Menu screen which is, in fact, “FoldersMenu?” Let me know what you think. You can view it online if you want or if you want to mess around I guess I can give you a profile to go into the blog itself, but I doubt that’s needed. Thanks again, in advance!

Lee

Actually, I got the menu to appear unstyled now, by dragging the Custom Menu widget under the Menu widget that’s on the right. I’ve definitely changed the stylesheet to include all the bootstrap styles, so that’s all working. I also added the php function to call the style sheet in header.php.

here’s a screenshot:

www.leesachs.com/testing/the_menu_widget_thang.png

can u help…thanks!

Sure, I can.
What’s the question?

I’m not seeing the folder tabs that I had in my menu when it was hard coded. I was able to follow your instructions, but then didn’t see an unstyled menu at all (at first). But then I was able to get it to show up. For now, though, the styles are not being picked up. Why is that? (hope that’s clear enough). Danke!

lee