SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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?

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's pretty much the idea. An image based nav, in WP, using Bootstrap to line everything up nice. Does that make sense?

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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?

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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:
    1. Create a new folder in your WP themes folder. Name it test.
    2. In this new folder (wp-content/themes/test), create the following files: header.php, index.php, footer.php, styles.php.
    3. Copy and paste the following code into the respective files and save it.
    4. Head to your WP dashboard -> Appearance -> Themes
    5. Activate the new theme - seem familiar??
    Let me know when you've done that.

    style.css
    Code CSS:
    @charset "utf-8";
    /* CSS Document */
     
    /*
    Theme Name: Lee sachs
    Theme URI: [url]http://www.leesachs.com[/url]
    Author:Pullo
    Tags: test
    */

    header.php
    PHP Code:
    <!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 Code:
    <?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
    PHP Code:
        </div><!--container-->
      </
    body>
    </
    html

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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.

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by coolpillows View Post
    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):

    HTML Code:
    <!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 Code:
    <?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.

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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....

  13. #13
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi Lee,

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

    Edit your header.php
    PHP Code:
    <!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 Code:
    <?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:
    HTML Code:
    <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:
    HTML Code:
    <link href="http://www.leesachs.com/testing/bootstrap.css" rel="stylesheet" type="text/css" />
    to this:
    PHP Code:
    <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.

  15. #15
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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." :-)

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by coolpillows View Post
    sorry i called you Pulli last night
    That's alright. I quite liked it. I'm thinking of changing my name now ...

    Quote Originally Posted by coolpillows View Post
    I'm going to take a wild guess and assume that I don't have to use the description => "My Badass Menu."
    No, you do. This is a WordPress naming convention and if you break it, your site will stop working.

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

  17. #17
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  18. #18
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    http://www.leesachs.com/testing/the_...dget_thang.png

    can u help....thanks!

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by coolpillows View Post
    can u help....thanks!
    Sure, I can.
    What's the question?

  20. #20
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  21. #21
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #22
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #23
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by coolpillows View Post
    Just the folder tabs and the contact image...from my original hard-coded version are missing.
    Ok, this should be quite easy to fix.
    In your hard-coded version you had this:
    HTML Code:
    <li><a href="#"><img src="humor_new.jpg" /></a></li>
    In your dynamic version the mark-up being generated is this:
    HTML Code:
    <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:
    Code CSS:
    #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. #24
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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_set...ound_image.png

  25. #25
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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??


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •