Twenty Eleven 1.2 – Banner Help

  • Unknown's avatar
    eagleconsult · Member ·

    Hi,

    I have created a new blog which can be seen here – http://ec-payrollservices.com/

    I am using the default wordpress theme “Twenty Eleven 1.2”, this gives the option to specify a custom banner which is easy enough to do, I just created an image in Photoshop in the required dimensions and uploaded. That’s what you can see on the blog just now, a static .JPG of the banner I wish to use.

    You’ll notice the different areas on the banner I would like to be clickable. These clickable areas you see will link back to specific pages on our website. The problem I am having, basically is that I have no idea how to do this, being new to using WordPress etc.

    I have the image created in Photoshop and have saved for web, so have all the images here and the accompanying HTML. I will upload the images via FTP and edit the HTML to point at the location they are saved, all easy. I just have no idea how to use this HTML in the “header.php” file to display the banner as it is now but with the clickable areas linking to different pages on our website.

    I have googled this alot and cannot find anything specific that details this although I am sure there is information out there and alot of people will most definitely know how to do this, so any help is much appreciated.

    Here is my “header.php” if it’s any help or required for easier assistance –

    <?php
    /**
    * The Header for our theme.
    *
    * Displays all of the <head> section and everything up till <div id=”main”>
    *
    * @package WordPress
    * @subpackage Twenty_Eleven
    * @since Twenty Eleven 1.0
    */
    ?><!DOCTYPE html>
    <!–[if IE 6]>
    <html id=”ie6″ <?php language_attributes(); ?>>
    <![endif]–>
    <!–[if IE 7]>
    <html id=”ie7″ <?php language_attributes(); ?>>
    <![endif]–>
    <!–[if IE 8]>
    <html id=”ie8″ <?php language_attributes(); ?>>
    <![endif]–>
    <!–[if !(IE 6) | !(IE 7) | !(IE 8) ]><!–>
    <html <?php language_attributes(); ?>>
    <!–<![endif]–>
    <head>
    <meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
    <meta name=”viewport” content=”width=device-width” />
    <title><?php
    /*
    * Print the <title> tag based on what is being viewed.
    */
    global $page, $paged;

    wp_title( ‘|’, true, ‘right’ );

    // Add the blog name.
    bloginfo( ‘name’ );

    // Add the blog description for the home/front page.
    $site_description = get_bloginfo( ‘description’, ‘display’ );
    if ( $site_description && ( is_home() || is_front_page() ) )
    echo ” | $site_description”;

    // Add a page number if necessary:
    if ( $paged >= 2 || $page >= 2 )
    echo ‘ | ‘ . sprintf( __( ‘Page %s’, ‘twentyeleven’ ), max( $paged, $page ) );

    ?></title>
    <link rel=”profile” href=”http://gmpg.org/xfn/11″ />
    <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
    <link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
    <!–[if lt IE 9]>
    <script src=”<?php echo get_template_directory_uri(); ?>/js/html5.js” type=”text/javascript”></script>
    <![endif]–>
    <?php
    /* We add some JavaScript to pages with the comment form
    * to support sites with threaded comments (when in use).
    */
    if ( is_singular() && get_option( ‘thread_comments’ ) )
    wp_enqueue_script( ‘comment-reply’ );

    /* Always have wp_head() just before the closing </head>
    * tag of your theme, or you will break many plugins, which
    * generally use this hook to add elements to <head> such
    * as styles, scripts, and meta tags.
    */
    wp_head();
    ?>
    </head>

    <body <?php body_class(); ?>>
    <div id=”page” class=”hfeed”>
    <header id=”branding” role=”banner”>
    <hgroup>
    <h1 id=”site-title”><span>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></span></h1>
    <h2 id=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
    </hgroup>

    <?php
    // Check to see if the header image has been removed
    $header_image = get_header_image();
    if ( ! empty( $header_image ) ) :
    ?>
    “>
    <?php
    // The header image
    // Check if this is a post or page, if it has a thumbnail, and if it’s a big one
    if ( is_singular() &&
    has_post_thumbnail( $post->ID ) &&
    ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
    $image[1] >= HEADER_IMAGE_WIDTH ) :
    // Houston, we have a new header image!
    echo get_the_post_thumbnail( $post->ID, ‘post-thumbnail’ );
    else : ?>
    <img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”” />
    <?php endif; // end check for featured image or standard header ?>

    <?php endif; // end check for removed header image ?>

    <?php
    // Has the text been hidden?
    if ( ‘blank’ == get_header_textcolor() ) :
    ?>
    <div class=”only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>”>
    <?php get_search_form(); ?>
    </div>
    <?php
    else :
    ?>
    <?php get_search_form(); ?>
    <?php endif; ?>

    <nav id=”access” role=”navigation”>
    <h3 class=”assistive-text”><?php _e( ‘Main menu’, ‘twentyeleven’ ); ?></h3>
    <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
    <div class=”skip-link”>“><?php _e( ‘Skip to primary content’, ‘twentyeleven’ ); ?></div>
    <div class=”skip-link”>“><?php _e( ‘Skip to secondary content’, ‘twentyeleven’ ); ?></div>
    <?php /* Our navigation menu. If one isn’t filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
    <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?>
    <!– #access –>
    <!– #branding –>

    <div id=”main”>

    Thank you in advance.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    supportbot · Member ·

    The blog you specified at ec-payrollservices.com does not appear to be hosted at WordPress.com.

    This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you’ll find help at the WordPress.org forums.

    If you don’t understand the difference between WordPress.com and WordPress.org, you may find this information helpful.

    If you forgot to include a link to your blog, you can reply and include it below. It’ll help people to answer your question.

    This is an automated message.

  • Unknown's avatar
    eagleconsult · Member ·

    Apologies, feel free to delete this thread ^^

    Thanks.

  • The topic ‘Twenty Eleven 1.2 – Banner Help’ is closed to new replies.