Forums

[resolved] Adding menu from external site (20 posts)

  1. srtemple13
    Member
    Posted 1 year ago #

    My blog and website have the same layout (background image and menu bar). What I was hoping to do was insert the menu bar from my website into the blog using links to the css and javascript. Therefore, if I make changes to it, they appear on both sites. I just need to know where to put the lines of code for the head and body.

    Website: http://stevetempleproductions.com/testing/index.html

    Blog: http://stevetempleproductions.com/blog/

    Thanks.

  2. zoonini
    help me help you
    Posted 1 year ago #

    Did you get this sorted?

  3. srtemple13
    Member
    Posted 1 year ago #

    Nope, not yet. I don't even know if this is possible.

  4. zoonini
    help me help you
    Posted 1 year ago #

    Sure, it's possible.

    For the CSS (i.e. background image), you can link to your static site's stylesheet just by adding a link to it in your WordPress header.php.

    For the navigation menu, you can put it in a separate file and call it in via an include in both your static site, and your WordPress site.

    Example - you could put it in a file called menu.inc.php (or menu.php). (I recommend putting includes in a folder called includes to keep your files organized.)

    Then in your static site, use a PHP include where you want to display your menu with a line like:

    <?php include($_SERVER['DOCUMENT_ROOT'] . "/includes/menu.inc.php") ?>

    The first part means that the link will be root-relative, meaning that it will work on a file in any directory of your site.

    Put the same line in your WordPress header.php file where you want the menu.

    I notice you are not using .php extensions on your static site - you'll either need to change that, or add a line to your .htaccess file to cause HTML files to be rendered as PHP. Since your site isn't fully built yet, I recommend changing extensions from .html to .php.

    Let me know if you need any of this clarified or have any questions!

  5. srtemple13
    Member
    Posted 1 year ago #

    I understand what you are proposing on a basic level, but the execution is beyond my current abilities, however, this doesn't mean I don't want to try. Where I get lost is the language of dynamic pages, I'm more accustomed to code (on a basic level) on static pages. Threfore, I'd like to tackle executing this in my website since it's not live, so here are my questions right now:

    1. Does the background image really need to be coded into the blog? Couldn't it continue to just be the background image of the blog unrelated to the menu bar? I apologize, my initial post may have been confusing on this having included a reference to it.

    2. Can I simply change the extension on my website pages to .php via a 'Save as...' or is there more that needs to be done? These pages were also created using a Template, will there be implications there?

    3. How do I determine the location of the menu bar? Would there be an enclosing DIV tag around the include code you wrote in your post?

    Thank you so much for your help!

  6. zoonini
    help me help you
    Posted 1 year ago #

    1. Does the background image really need to be coded into the blog?

    No.

    Couldn't it continue to just be the background image of the blog unrelated to the menu bar?

    Sure.

    2. Can I simply change the extension on my website pages to .php via a 'Save as...'

    Yes.

    or is there more that needs to be done?

    Just be sure to change any internal links between pages as well.

    These pages were also created using a Template, will there be implications there?

    Do you mean a Dreamweaver template? Shouldn't be any implications that I can think of.

    3. How do I determine the location of the menu bar?

    Go into your code and see where your menu code is. Put the code in the include file and replace it in your original file with the PHP include statement. You'll need to make the image paths absolute (start with a /) if they're going to work within your WordPress install as well.

    Would there be an enclosing DIV tag around the include code you wrote in your post?

    Not unless you need one for structural reasons.

    The thing to remember about PHP includes is that it's really very simple. All it does is take the code in your included file and plop it in, as is, in another file.

    Maybe you could do a few simple PHP include experiments before delving into your site to see how they work. Here's one tutorial - there are lots of others.

    Once you get your head around it, you'll see how useful they are. Let me know how it goes.

  7. srtemple13
    Member
    Posted 1 year ago #

    I looked at the tutorial and the include command sounds a lot like an iframe, only without the iframe. Much cleaner than an iframe as well. I'll do some playing around and get back to you.

    Thanks again.

  8. srtemple13
    Member
    Posted 1 year ago #

    I got the include working on my website! It took a little bit of work, but it's up and running.

    Now for the blog. Below is the header.php code for my blog, and it seems to me I would replace everything inside the navigation div tag with <?php include($_SERVER['DOCUMENT_ROOT'] . "/includes/menu.inc.php") ?>. My question is the link to my menu.php file. Even though the blog lives on the same server (GoDaddy) as my website, will the link to the menu work or do I have to make it an absolute link? If it needs to be an absolute link, what does the code look like then?

    Here is my header code:

    [Please use a Pastebin to post large chunks of code, following forum etiquette]

  9. zoonini
    help me help you
    Posted 1 year ago #

    I got the include working on my website! It took a little bit of work, but it's up and running.

    Congratulations!

    Even though the blog lives on the same server (GoDaddy) as my website, will the link to the menu work or do I have to make it an absolute link? If it needs to be an absolute link, what does the code look like then?

    Yes, it does need to be an absolute link so it will work via your theme file, when called from any directory. You would use the same line as above:

    <?php include($_SERVER['DOCUMENT_ROOT'] . "/includes/menu.inc.php") ?>

  10. srtemple13
    Member
    Posted 1 year ago #

    It didn't work.

    Here is the original header code:

    <div id="navigation">
    			<?php if (function_exists( 'wp_nav_menu' ))
    				wp_nav_menu(array( 'theme_location' => 'arnold-main-menu', 'fallback_cb' => 'arnold_default_menu' ));
    			else
    				arnold_default_menu(); ?>
    		</div>

    ... and here is what I put in:

    <div id="navigation">
    			<?php include($_SERVER['DOCUMENT_ROOT'] . "http://stevetempleproductions.com/testing/includes/menu.php") ?>
    		</div>
  11. zoonini
    help me help you
    Posted 1 year ago #

    You didn't put the line I gave you - you replaced

    /includes/menu.inc.php

    with

    http://stevetempleproductions.com/testing/includes/menu.php

    Put:

    <?php include($_SERVER['DOCUMENT_ROOT'] . "/includes/menu.php") ?>

    And tell me what happens.

  12. zoonini
    help me help you
    Posted 1 year ago #

    Ah - I just reread your link and see that you didn't put the includes in your root directory - it's in a sub-directory called "testing." So you'd need to tweak your include line to:

    <?php include($_SERVER['DOCUMENT_ROOT'] . "/testing/includes/menu.php") ?>

    ... and change it later when you move things to the root. Or better yet, put your includes in the root now.

  13. zoonini
    help me help you
    Posted 1 year ago #

    Hmm - I just took a look at your code and it looks like you've included a complete page in your menu.php file rather than just the menu code itself. In other words, you've started the page with your doctype line, and have included the full <head>, <body> and <html> sections - that is not right. You should only be including the code for the actual menu - which looks like your unordered list.

    You'll need to link to the <head> JavaScript from your header.php file, and put the bottom JavaScript in your footer.php WordPress theme files.

  14. srtemple13
    Member
    Posted 1 year ago #

    I think that took care of it, have a look and see if it's ok. I'll need to do the same thing with my website.

    Thanks for the catch.

  15. srtemple13
    Member
    Posted 1 year ago #

    There seems to be something going on with the meny on the blog. The whole menu is being stretched so it's taller than the menu on my website. Even the text is being stretched. Any idea why?

  16. srtemple13
    Member
    Posted 1 year ago #

    I have now implemented the 'include' menu bar in both my blog and website. The website version is working just fine, but the blog menu bar is still being stretched ~15 pixels too tall and I cannot figure out why. Thank you again for all your time and assistance.

  17. zoonini
    help me help you
    Posted 1 year ago #

    Hiya, you'll need to do some hands-on CSS troubleshooting - some class or ID in your blog CSS must be adding the extra padding. (FYI - the text looks exactly the same size to me in FF 3.6.16/Mac, just the padding is different.) Look in your blog stylesheet for some padding being added to some class/ID being carried over.

    If you can't figure it out, I suggest you start a new thread so this new issue doesn't get buried here. Good luck!

  18. srtemple13
    Member
    Posted 1 year ago #

    @zoonini Found the answer. The reset code was the cultprit.

  19. zoonini
    help me help you
    Posted 1 year ago #

    Glad you solved it and thanks for reporting back!

  20. santoshkori
    Member
    Posted 6 months ago #

    Thanks Zoonini.. for great solution..

    I will happy if u Help me to Say,
    How to use this

    <?php include($_SERVER['DOCUMENT_ROOT'] . "/testing/includes/menu.php") ?>

    for if ur need to use this into http://www.mysite.com/blog/ theme.

    Thanks in Advanced. :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags