Wordpress and navmenu...and PHP questions too

CMS & WordPress
21

Hi there Lee,
Are any of page styles being picked up, or is it just the image backgrounds for the menu that are missing?

22

Just the folder tabs and the contact image…from my original hard-coded version are missing. It is definitely picking up the rest of the styles b/c everything else is there, behaving the way it should. Thanks, again, in advance…

lee

23

Ok, this should be quite easy to fix.
In your hard-coded version you had this:

<li><a href="#"><img src="humor_new.jpg" /></a></li>

In your dynamic version the mark-up being generated is this:

<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>

You just need to apply a background image to the anchor tags within the menu item being generated by WordPress, for example:

#menu-item-412 a{background-image:url('humor_new.jpg');

The paths for the images will be relative to your CSS file, the anchor tags should be set to display:block and you’ll have to apply some widths and heights to have it display properly.

Let me know how you get on.

24

If I understand correctly will I be assigning the background images via the Appearance > Menus and assign images via that. I get the image paths from the generated HTML & put them in the fields on that screen. Is that what you are talking about?
Here’s where I’m thinking you might be pointing me to…or not.

http://leesachs.com/testing/menu_settings_background_image.png

25

Or…as I’m re-reading this, you are saying to edit the CSS so that the <li>…</li> of the menu are not just hard coded with the image but will take the id generated by WP and then apply the image paths with attributes display, width, height, etc. in the CSS file.

Do I have that right??

26

Well, kinda. Let’s recap:
You have created a dynamic menu in your WP site, which means you are in a position to create new pages via your WP dashboard and add them to your menu.
You have embedded your dynamic menu in your WP theme (in the file “header.php”) with the following code:

<?php if ( !function_exists('dynamic_sidebar') || dynamic_sidebar('Menu') ) : ?>

When WP parses your header.php, it sees this line, does a bit of black magic and then spits out a load of HTML code.
Unless you have changed your menu, the HTML code should look 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/blog/">Blog</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>

So, as you can see, WP has used an unordered list to create the menu.
It has also added a bunch of classes and ids to the <li> elements in the list.
These represent your menu items.

If you look at your page at this point, you will just see something like:

  • Blog
  • Humor
  • Consulting
  • Contact

i.e an unstyled list containing your menu points. We now need to style this.

I’m presuming you have amended the your header.php to replace this:

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

with this:

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

Ok, so, using a text editor, you now have edit the file “style.css” (in your WP root folder) and style the menu.
Here are some styles to get you going.

ul#menu-main{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
}

ul#menu-main li{
  float:left;
}

ul#menu-main li a{
  display:block;
  width:70px;
  background-color:#dddddd;
}

Let me know when you have added these and if this works for you.

27

going to mess around with this some more tonight, but kinda stuck here. the folder icons are repeating, the text links are still present, and they’s displaying as rows. And, I lost my index.php content below that. All hell is breaking loose! Ah…I have faith though…with your insight and my brain, I’ll get this right.

danke

28

okay…i’m on this. would u believe i got home and didn’t realize that there was an additional post from you b/c it had paginated to p.2? ahh well, i now have my menus. the text links are still there. but the folder tabs are there. i still have a lot to do. will connect tomorrow, but grande danke (ahh…it’s late and i can’t remember the german word for large)…

29

The German word for large is “groß”.
Maybe you men " Ein großes Dankeschön" :slight_smile:

Anyway, I just got your PM, so I will respond there.

30

ja! großes why didn’t i think of that?!

Ein großes Dankeshön…heading into the city for work (NYC) will follow up from there…