WordPress.org

Ready to get started?Download WordPress

Forums

Customizing theme help (menus, custom page template, footer) (10 posts)

  1. Shan
    Member
    Posted 3 years ago #

    I converted an HTML website to WP, but I am having major issues with getting things to align correctly. I tried to add a dropdown menu using this tutorial http://wordpress-tuts.blogspot.com/2010/01/how-to-add-drop-down-menu-in-word-press.html and it worked except for one minor detail: the menubar was in the middle of the page over to the left and nothing I did would move it under the header.

    I made a custom page template and that worked OK (I'd rather have it coded so that it can be used on several pages with different text instead of hard coded to one page only). The only problem is that the footer is not showing up where it is supposed to and I cannot figure it out. Or I can get the footer to show in the right place but then the content background goes short.

    Also, the other pages are doing the same short content background thing.

    I tried 4 tutorials that touted how easy it was to convert a static website to WP and none of them worked nor could I get any help from the tutorial authors. I tried the WP codex but that left me more confused.

    Ideally, I would like to have the WP-menu function built in with the menubar showing in block form across the page w/dropdowns and the custom page template to be able to be used for more than one page, but I cannot find any tutorials to help with that. I need detailed instructions on placement of codes, etc.

    Can anyone help me? I am desperate.

    My hack job is here: http://lastshredsofsanity.com/ThisIsATest

    Original is here: http://agileprojectinc.com/index.html

  2. hedronist
    Member
    Posted 3 years ago #

    Just a quick look: I notice that your wrapper divs in the new site have totally different classes (names and rules) than in the original. Since you used ul/li in the original this should have been a simple matter of copying the classes over to the new site and tweaking the class/id names.

    I recommend taking a very conservative approach to copying the old to the new. First step, raw copy, all static (HTML & CSS). Next step, replace old class names with new and make sure the CSS rules are correct. Final step, invoke the menu function. If at any point it stops looking like what you want ... stop! And go back to find out what went wrong.

    I think you're closer than you think you are.

  3. Shan
    Member
    Posted 3 years ago #

    Yes, I am working on that name part. The problem is, I globally change them to what the WP site needs and it breaks the theme. It's so frustrating!

    My current issues are getting the logo to show up and creating a custom page template to mimic this page: http://agileprojectinc.com/experience.html

    I have read the codex on creating a custom page template. I get the basics, my issue is not knowing where or what to put in the php file to make the page look that way. I tried the page columnist plugin and it works for other pages I need but not for this one.

    And how and where do I invoke the menu function? That is something that the codex truly confused me on.

  4. hedronist
    Member
    Posted 3 years ago #

    Basically, you invoke the menu function where you want the UL to appear. My sidebar code (in its entirety) looks like this:

    sidebar.php:

    <!-- BEGIN SIDEBAR -->
    <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
    <!-- END SIDEBAR -->

    and it produces this output:

    <!-- BEGIN SIDEBAR -->
    <div class="menu-header"><ul id="menu-primary" class="menu"><li id="menu-item-48" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-4 current_page_item menu-item-48"><a href="http://www.example.com/new/">Home</a></li>
    <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-45"><a href="http://www.example.com/new/techbuddy-services/">Services</a>
    <ul class="sub-menu">
    	<li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-65"><a href="http://www.example.com/new/online-help/">Online Help</a></li>
    	<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-93"><a href="http://www.example.com/new/networking/">Networking</a></li>
    	<li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-64"><a href="http://www.example.com/new/backup/">Backup</a></li>
    
    </ul>
    </li>
    <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-68"><a href="http://www.example.com/new/rates-policies/">Rates & Policies</a></li>
    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="http://www.example.com/new/about/">About Us</a></li>
    <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-67"><a href="http://www.example.com/new/contact/">Contact Us</a></li>
    </ul></div><!-- END SIDEBAR -->

    So you style you ul.menu, ul.menu li, ul.sub-menu, and ul.sub-menu li to taste and there it is. If you have it working on your old site as ul/li, it should be a matter of getting the new class names attached to the old rules.

  5. Shan
    Member
    Posted 3 years ago #

    Thank you, but I need it to be a menubar under the header. I prefer to use the wp-menus function but it's not built into this theme. Although there has to be a way to do it. I just don't know what the is yet.

    The site when on WP, has to look and function exactly like it does now.

  6. hedronist
    Member
    Posted 3 years ago #

    OK, so it goes under the header. In WordPress terminology, a sidebar is a place where you can put one or more widgets, like a menu. It can be on the left or right hand side, but it can also be at the top or bottom or somewhere in between. But you don't have to put the menu inside of a sidebar, it can also be wired directly into the header.php file of your theme.

    I just looked at home page demo of boxpulse and it looked fairly straightforward. Maybe you could backup what you have and go back to the original boxpulse theme and see if the menu is correct in terms of content and approximate location. If it is, then styling it should be easy. If it's fundamentally different than what you need, then life gets more complicated.

    Good luck.

  7. Shan
    Member
    Posted 3 years ago #

    Thank you! So I would put the code in the header.php within the <div=id "header"> class/div, right?

    The menu is there (I wrote this post before I found Boxpulse) but styling it is becoming an issue for me. I THINK the designer is calling it page-nav, but when I look at it on firebug, it shows the dropdowns as being in the dropdown.css file which I can't find. I am almost afraid to hit the hammer and add my css for the nav bar. Seems like every time I add an edit, the theme breaks or goes wonky.

    Could you also explain to me how the columns call works? I have read the codex and it's just not clicking. I need to make a custom page template to mimic a page on the HTML site and I just don't get it at all.

    THANK YOU for all your help. I appreciate it so much.

  8. Shan
    Member
    Posted 3 years ago #

    Ok, so I added the css for the menubar and nothing changed. I swear this project is possessed!

  9. hedronist
    Member
    Posted 3 years ago #

    The dropdown CSS is at http://lastshredsofsanity.com/ThisIsATest/wp-content/themes/hybrid/library/css/drop-downs.css.

    I'm starting to fade (it's after 11pm here) and my wife is wondering where the hell I am. I'll take a look at this again in the morning. I noticed that we're both in CA so if this gets any more involved we might want to go to phone/Skype. My email addr is wordpress@techbuddy.us.

  10. Shan
    Member
    Posted 3 years ago #

    Yes we are both in the same state. Thank you for all your help. Go to bed. LOL

    I'll email you so that we can converse more easily. I don't do skype, but we can use the phone. Or gmail chat.

Topic Closed

This topic has been closed to new replies.

About this Topic