Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I want to use the header, top menu and footer from my website on my Wordpress blog. The website itself is not a Wordpress site but the blog is and resides in a 'blog' folder on my server.

So I guess what I need to do is edit the blog's 'header.php' file to use my website header for starters (then the same for menu and footer) but being relatively new to Wordpress I am finding it difficult to navigate the wordpress 'header.php' file.

How do I call a header/menu/footer with direct url's to override the themes header.

It seems to be possible but is more of a 'hack' and I can find no definitive answer anywhere. Is it that difficult/tricky to do??

Here is the code for the Wordpress 'header.php' header

    <?php
/*
 * Header Section of Iconic One
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress - Themonic Framework
 * @subpackage Iconic_One
 * @since Iconic One 1.0
*/
?>

<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in  older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"  type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
<?php include($_SERVER['DOCUMENT_ROOT'] . "/includes/header.php") ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
        <?php if ( get_theme_mod( 'themonic_logo' ) ) : ?>

    <div class="themonic-logo">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo  esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php  echo get_theme_mod( 'themonic_logo' ); ?>" alt="<?php echo  esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></a>
    </div>
<?php if( get_theme_mod( 'iconic_one_social_activate' ) == '1') { ?>    
    <div class="socialmedia">
    <a href="<?php echo get_theme_mod( 'twitter_url', 'default_value' ); ?>" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/ img/twitter.png" alt="Follow us on Twitter"/></a> <a href="<?php echo get_theme_mod( 'facebook_url', 'default_value' ); ?>" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/img/facebook.png" alt="Follow us on Facebook"/></a> <a href="<?php echo get_theme_mod( 'plus_url', 'default_value' ); ?>" rel="author" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/img/gplus.png" alt="Follow us on Google Plus"/></a><a href="<?php echo get_theme_mod( 'rss_url', 'default_value' ); ?>" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/img/rss.png" alt="Subscribe RSS"/></a>
    </div>
<?php } ?>  

    <?php else : ?>
    <hgroup>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
            <br .../> <a class="site-description"><?php bloginfo( 'description' ); ?></a>
    </hgroup>
<?php if( get_theme_mod( 'iconic_one_social_activate' ) == '1') { ?>
    <div class="socialmedia">
    <a href="<?php echo get_theme_mod( 'twitter_url', 'default_value' ); ?>" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/img/twitter.png" alt="Follow us on Twitter"/></a> <a href="<?php echo get_theme_mod( 'facebook_url', 'default_value' ); ?>" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/img/facebook.png" alt="Follow us on Facebook"/></a> <a href="<?php echo get_theme_mod( 'plus_url', 'default_value' ); ?>" rel="author" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/img/gplus.png" alt="Follow us on Google Plus"/></a><a href="<?php echo get_theme_mod( 'rss_url', 'default_value' ); ?>" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/img/rss.png" alt="Follow us on rss"/></a>
</div>
<?php } ?>  
    <?php endif; ?>

    <nav id="site-navigation" class="themonic-nav" role="navigation">
        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'themonic' ); ?>"><?php _e( 'Skip to content', 'themonic' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'menu-top', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

    <?php $header_image = get_header_image();
    if ( ! empty( $header_image ) ) : ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    <?php endif; ?><div class="clear"></div>
</header><!-- #masthead -->
<div id="main" class="wrapper">
share|improve this question

3 Answers 3

i resolved this, for the header using my code above as an example. Under I simply entered so the same solution as Joey Nax suggested other than the path. For some reason a direct path to the file on my server doesn't work with wordpress but ($_SERVER['DOCUMENT_ROOT'] did. I updated my code with the added line. Then it is simply a case of adding my own header css into 'custom.css' in Wordpress admin.

share|improve this answer

I'm facing the same problem and finally am editing the header.php file in my wordpress. After including the link to the CSS of my main website I tried putting my header logo and menu in new but I realise I have to keep to retain the opacity behind the blog. I want the head part to turn transparent and that happens when I remove class="hfeed site" but that also renders the rest of the blog transparent. Stuck!

share|improve this answer
    
Tp include your own css, just copy the relevant bits into the 'custom.css' option within the admin. Much easier than working out how to include the css in the header file. The emphasis being on 'relevant css'. If you copy all your site's css, it will mess with the theme. –  jfar_magnetik Nov 25 '13 at 10:05

Include wp-load.php in the non-wordpress site to get WordPress functions.

define( 'WP_USE_THEMES', false );
require( '/path/to/wp-load.php' );

Then you should be able to make the appropriate calls to get_header(), get_footer(), and wp_nav_menu() as you would within your WordPress theme.

share|improve this answer
    
Thanks for the reply but I'm not sure where this would go. Do you mean in the (non Wordpress) website header? Sorry to sound simple, I have been developing sites for a while now but have only recently got involved with Wordpress. It is great but difficult to get used to. –  jfar_magnetik Nov 18 '13 at 22:45
    
Yes, in the non-wordpress site. –  Joey Yax Nov 18 '13 at 22:52
    
Ok so where the current 'get footer' picks up the wordpress header, how will it know to pick up my own? Would I replace the whole header.php with my own header? –  jfar_magnetik Nov 18 '13 at 23:07
    
I'm not familiar with how your sites are configured and having trouble understanding your question. Calling get_header() in your non-wordpress site will display the contents of header.php from the active template in your wordpress install. Likewise get_footer() will display the contents of footer.php. –  Joey Yax Nov 18 '13 at 23:11
    
Sorry for not being clearer. I think you may have answered my question the other way round. I dont want to pick up my wordpress blog header on my website, I do however want to pick up my website header on my wordpress blog which seems to be the opposite of your explanation. Like I say sorry if I didnt explain properly. My website is php and uses /includes files for header, menu and footer. The current header, menu and footer on the wordpress blog are very dull so I want to use my website header, menu and footer from the website on my blog. –  jfar_magnetik Nov 18 '13 at 23:19

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.