WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to create a new header for a page (5 posts)

  1. mianelle
    Member
    Posted 3 years ago #

    Hi there,

    How do I create a specific header for a page template I have created. I would like to have a different header on the home page than in the rest of the site, which in my case is a static page. I hope some one can help me as I am srtuggling big time here

    http://www.signsalad.com/wordpress/

    thank you very much

    Mia

  2. Joseph
    Member
    Posted 3 years ago #

    Does your front page have it's own page template? If so, name your new header as header-{name}.php and, instead of <?php get_header(); ?>, use <?php get_header( '{name}' ); ?>.

    If it's using the default template, see http://codex.wordpress.org/Function_Reference/get_header#Multi_headers and use is_front_page() instead of is_home().

  3. mianelle
    Member
    Posted 3 years ago #

    hi there,

    Thank you so much for your feed back. Yes, the front page is using its own template. I have tried as suggested, and it now comes up with this:
    http://www.signsalad.com/wordpress/

    So, it has deleted the image and moved the navigation to the right. I think this has to with the style.css which I have tried to modify. But I do it in blind and have therefor pasted my coding in below:

    New tamplate file for frontpage called Indexnew.php
    <?php /* Template Name: Indexnew
    */ ?>

    <?php get_header(index); ?>

    <div id="content">

    <div id="contentleft">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1>" rel="bookmark"><?php the_title(); ?></h1>
    <?php the_content(__('Read more'));?><div style="clear:both;"></div>

    <!--
    <?php trackback_rdf(); ?>
    -->

    <?php endwhile; else: ?>

    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
    <?php posts_nav_link(' — ', __('« go back'), __('keep looking »')); ?>

    </div>
    </div>

    <!-- The main column ends -->

    <?php get_footer(); ?>

    Style.css (where I have inserted nav1)

    body {
    background: #FFFFFF url(images/bg.gif) repeat-x;
    color: #000000;
    font-size: 12px;
    font-family: Arial, Helvetica, Sans-Serif;
    margin: 0px auto 0px;
    padding: 0px;
    }

    #wrap {
    background: #FFFFFF;
    width: 960px;
    margin: 0px auto 0px;
    padding: 0px;
    }

    /************************************************
    * Hyperlinks *
    ************************************************/

    a, a:visited{
    color: #000000;
    text-decoration: none;
    }

    a:hover {
    text-decoration: underline;
    }

    /************************************************
    * Navbar *
    ************************************************/

    #navbar img a{
    margin: 0px;
    border: none;
    }

    #navbarright {
    width: 800px;
    float: right;
    text-align: right;
    margin: 0px;
    padding: 10px 0px 0px 0px;
    }

    #navbarright li {
    display: inline;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }

    #navbarright ul {
    margin: 0px;
    padding: 0px;
    }

    #navbarright a, #navbarright a:visited {
    color: #000000;
    font-weight: bold;
    margin: 0px;
    padding: 6px 10px 6px 10px;
    text-decoration: none;
    }

    #navbarright a:hover {
    color: #000000;
    font-weight: bold;
    text-decoration: underline;
    }

    #navbar {
    background: #FFFFFF url(images/header.gif);
    width: 960px;
    height: 283px;
    margin: 0px auto 0px;
    padding: 0px;
    overflow: hidden;

    }

    /************************************************
    * Navbar1 *
    ************************************************/

    #navbar img a{
    margin: 0px;
    border: none;
    }

    #navbarright {
    width: 800px;
    float: right;
    text-align: right;
    margin: 0px;
    padding: 10px 0px 0px 0px;
    }

    #navbarright li {
    display: inline;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }

    #navbarright ul {
    margin: 0px;
    padding: 0px;
    }

    #navbarright a, #navbarright a:visited {
    color: #000000;
    font-weight: bold;
    margin: 0px;
    padding: 6px 10px 6px 10px;
    text-decoration: none;
    }

    #navbar1right a:hover {
    color: #000000;
    font-weight: bold;
    text-decoration: underline;
    }

    #navbar1 {
    background: #FFFFFF url(images/header.gif);
    width: 960px;
    height: 283px;
    margin: 0px auto 0px;
    padding: 0px;
    overflow: hidden;
    }

    /************************************************
    * Content *
    ************************************************/

    #content {
    width: 960px;
    margin: 0px auto 0px;
    padding: 0px;
    }

    #content p{
    padding: 0px 0px 15px 0px;
    margin: 0px;
    line-height: 20px;
    }

    #content h1 {
    color: #000000;
    font-size: 16px;
    font-family: Arial, Verdana, Sans-Serif;
    font-weight: bold;
    margin: 25px 0px 0px 0px;
    padding: 20px 0px 10px 0px;
    border-top: 2px solid #000000;
    }

    #content h1 a {
    color: #000000;
    text-decoration: none;
    }

    #content h1 a:hover {
    color: #00adef;
    text-decoration: none;
    }

    #content p img{
    float: left;
    border: none;
    margin-right: 15px;
    margin-bottom: 10px;
    }

    #content h2 {
    color: #000000;
    font-size: 14px;
    font-family: Arial, Verdana, Sans-Serif
    font-weight: normal;
    padding: 20px 0px 5px 0px;
    margin: 0px;
    border-bottom: 1px solid #C0C0C0;
    }

    #content h3 {
    color: #000000;
    font-size: 22px;
    font-family: Arial, Verdana, Sans-Serif
    font-weight: normal;
    margin: 25px 0px 0px 0px;
    padding: 20px 0px 10px 0px;
    }

    #content img.wp-smiley {
    float: none;
    border: none;
    padding: 0px;
    margin: 0px;
    }

    #content img.wp-wink {
    float: none;
    border: none;
    padding: 0px;
    margin: 0px;
    }

    #contentleft {
    float: left;
    width: 630px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 20px 0px;
    }

    #contentleft ol{
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 10px 0px;
    }

    #contentleft ol li{
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 0px 0px;
    }

    #contentleft ul{
    list-style-type: square;
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 10px 0px;
    }

    #contentleft ul li{
    list-style-type: square;
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 0px 0px;
    }

    blockquote{
    margin: 0px 25px 10px 25px;
    padding: 0px 25px 0px 10px;
    background: #E8E8E8;
    border-bottom: 1px solid #000000;
    }

    #content blockquote p{
    margin: 0px 0px 10px 0px;
    padding: 10px 0px 0px 0px;
    }

    /************************************************
    * Left Sidebar *
    ************************************************/

    #l_sidebar {
    float: left;
    width: 225px;
    margin: 25px 0px 0px 0px;
    padding: 0px 0px 20px 0px;
    border-top: 2px solid #000000;
    }

    #l_sidebar ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #l_sidebar ul li {
    display: inline;
    padding: 0px;
    margin: 0px;
    }

    #l_sidebar ul li a {
    display: block;
    color: #000000;
    text-decoration: none;
    margin: 0px;
    padding: 5px 0px 5px 0px;
    border-bottom: 1px solid #C0C0C0;
    }

    #l_sidebar ul li a:hover {
    background: #EFEFEF;
    color: #990000;
    }

    #l_sidebar p{
    padding: 3px 0px 0px 0px;
    margin: 0px;
    line-height: 20px;
    }

    /************************************************
    * Right Sidebar *
    ************************************************/

    #r_sidebar {
    float: right;
    width: 225px;
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 20px 0px;
    }

    #r_sidebar ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #r_sidebar ul li {
    display: inline;
    padding: 0px;
    margin: 0px;
    }

    #r_sidebar ul li a {
    display: block;
    color: #000000;
    text-decoration: none;
    margin: 0px;
    padding: 5px 0px 5px 0px;
    border-bottom: 0px solid #C0C0C0;
    }

    #r_sidebar ul li a:hover {
    background: #FFFFFF;
    color: #00adef;
    }

    #r_sidebar p{
    padding: 3px 0px 0px 0px;
    margin: 0px;
    line-height: 20px;
    }

    /************************************************
    * Footer Background *
    ************************************************/

    #footerbg {
    background: #555555;
    }

    /************************************************
    * Footer *
    ************************************************/

    #footer {
    width: 960px;
    height: 400px;
    background: #555555;
    color: #FFFFFF;
    margin: 0px auto 0px;
    text-align: left;
    position: relative;
    line-height: 17px;
    }

    #footer p {
    color: #FFFFFF;
    padding: 0px;
    list-style-type: none;
    margin: 0px;
    }

    #footer h2 {
    color: #FFFFFF;
    font-size: 12px;
    font-family: Arial, Helvetica, Sans-Serif;
    font-weight: bold;
    border-bottom: 2px solid #666666;
    padding: 0px 0px 2px 0px;
    margin: 15px 0px 0px 0px;
    text-transform: uppercase;
    }

    #footer h3 {
    color: #FFFFFF;
    font-size: 12px;
    font-family: Arial, Helvetica, Sans-Serif;
    font-weight: bold;
    border-bottom: 2px solid #666666;
    padding: 0px 0px 2px 0px;
    margin: 15px 0px 3px 0px;
    text-transform: uppercase;
    }

    #footer a {
    color: #AAAAAA;
    text-decoration: none;
    }

    #footer a:hover {
    color: #FFFFFF;
    text-decoration: none;
    }

    #footer ul {
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    }

    #footer ul li {
    display: inline;
    padding: 0px;
    margin: 0px;
    }

    #footer ul li a {
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    margin: 0px;
    padding: 5px 0px 5px 0px;
    border-bottom: 1px solid #666666;
    }

    #footer ul li a:hover {
    background: #333333;
    color: #FFFFFF;
    }

    #footerleft {
    background: #555555;
    float: left;
    width: 225px;
    margin: 0px 20px 0px 0px;
    padding: 0px;
    }

    #footermiddle1 {
    background: #555555;
    float: left;
    width: 225px;
    margin: 0px 20px 0px 0px;
    padding: 0px;
    }

    #footermiddle2 {
    background: #555555;
    float: left;
    width: 225px;
    margin: 0px 20px 0px 0px;
    padding: 0px;
    }

    #footerright {
    background: #555555;
    float: right;
    width: 225px;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    }

    /************************************************
    * Search Form *
    ************************************************/

    #searchdiv {
    margin: 0px;
    padding 0px;
    }

    #searchform {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }

    #s {
    background: #EFEFEF url(images/search.gif);
    color: #333333;
    font-size: 11px;
    font-family: Verdana, Helvetica, Sans-Serif;
    padding: 2px;
    margin: 4px 0px 0px 0px;
    border: 1px solid #C0C0C0;
    }

    #sbutt {
    background: #878787;
    color: #FFFFFF;
    font-size: 11px;
    font-family: Verdana, Helvetica, Sans-Serif;
    padding: 1px;
    margin: 0px 0px 0px 5px;
    border: 1px solid #333333;
    }

    /************************************************
    * Comments *
    ************************************************/

    #commentblock {
    width: 430px;
    background: #E8E8E8;
    color: #000000;
    float: left;
    padding: 20px 20px 10px 20px;
    margin: 10px 0px 0px 0px;
    border-top: 2px solid #000000;
    border-bottom: 1px solid #000000;
    }

    #commentblock ol{
    list-style-type: square;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 10px 0px;
    }

    .commentdate {
    font-size: 12px;
    padding-left: 0px;
    }

    #commentlist li p{
    margin-bottom: 8px;
    line-height: 20px;
    padding: 0px;
    }

    .commentname {
    color: #333333;
    margin: 0px;
    padding: 5px 5px 5px 0px;
    }

    .commentinfo{
    clear: both;
    }

    .commenttext {
    clear: both;
    margin: 3px 0px 10px 0px;
    padding: 20px 10px 5px 10px;
    width: 380px;
    background: #FFFFFF url(images/comment.gif) no-repeat top;
    }

    .commenttext-admin {
    clear: both;
    margin: 3px 0px 10px 0px;
    padding: 20px 10px 5px 10px;
    width: 380px;
    background: #FFFFFF url(images/comment.gif) no-repeat top;
    }

    #commentsformheader{
    padding-left: 0px;
    }

    #commentsform{
    text-align: center;
    margin: 0px;
    padding: 0px;
    }

    #commentsform form{
    text-align: left;
    margin: 0px;
    }

    #commentsform p{
    margin: 0px;
    }

    #commentsform form textarea{
    width: 99%;
    }

    p.comments_link img{
    margin: 0px;
    padding: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }

    My new header file
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta name="distribution" content="global" />
    <meta name="robots" content="follow, all" />
    <meta name="language" content="en, sv" />

    <title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    <!-- leave this for stats please -->

    <link rel="Shortcut Icon" href="<?php echo get_settings('home'); ?>/wp-content/themes/vertigo-electrified/images/favicon.ico" type="image/x-icon" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php wp_head(); ?>
    <style type="text/css" media="screen">
    <!-- @import url( <?php bloginfo('stylesheet_url'); ?> ); -->
    </style>
    </head>

    <body>

    <div id="navbar1">

    <div id="navbarleft" onclick="location.href='<?php echo get_settings('home'); ?>';" style="cursor: pointer;">
    </div>

    <div id="navbarright">

      <?php wp_list_pages('title_li=&depth=1'); ?>

    </div>

    </div>

    I hope it makes sense and that you have the patience with me :-)

    Thank you

  4. mianelle
    Member
    Posted 3 years ago #

    Hi again,

    I did it! All I had to do was to modify the stylesheet. Phew.... slowly but safely. Should anyone else run into similar problems then please drop a line as it has taken me many hours to get this far :-)

    thanks again

    Mia

  5. Joseph
    Member
    Posted 3 years ago #

    Firstly, please don't post a large chuck of code per the forum rule.

    Secondly, I didn't view your site so I have no idea what's changed.

    Edit: Nevermind since you've got it.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.