• Resolved jenntru

    (@jenntru)


    After reading so many other posts, I still do not have an answer to my issue. I would like to replace the header text and image with my own logo. The link to my site is https://www.rockitmomma.com. Thank you so much for any help!!

    Here is the css code for the header:
    /* =Header
    ————————————————————– */

    #header {
    background:#8f8f8f;
    border-bottom:1px solid #000;
    padding: 0 0 0 0;
    margin:0 auto;
    width:100%;
    }
    #site-title {
    font-size: 55px;
    line-height: 55px;
    margin: 15px 0 15px 0;
    text-align:center;
    width: 100%;
    }
    #site-title a {
    color:#e02444;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-shadow: #000 1px 1px 3px;
    }

    #site-description{
    clear:both;
    color:#fff;
    display:block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 35px;
    margin: -5px 0 20px 0;
    text-align:center;
    text-shadow: #000 1px 1px 3px;
    }

    /* This is a custom header image */
    # branding {
    clear:both;
    padding: 15px 0;
    color: #e02444
    }

Viewing 15 replies - 1 through 15 (of 16 total)
  • No. That’s not the code for the header. It’s the CSS, and we can get that by visiting your site.

    The code for the head is, more than likely but depending on your theme, in the file header.php in your theme’s folder.

    In the twenty eleven theme, the code that outputs the site title and description is this:

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

    So in twenty eleven, you’d just delete the contents of the hgroup element and replace them with the image tag for your image.

    Cheers

    PAE

    Thread Starter jenntru

    (@jenntru)

    Thank you for such a quick response! I’m very inexperienced- can you tell me how to get to the header.php file? Thank you very much!

    Thread Starter jenntru

    (@jenntru)

    Oh! Found the header php file ??

    Thread Starter jenntru

    (@jenntru)

    So, now that I’ve found the header.php file, I cannot find anything that resembles the h group at all. Where do I go from here?

    Thread Starter jenntru

    (@jenntru)

    If anyone can help me out, I’d so much appreciate it! Here is my header.php, I cannot for the life of me figure out how to put my own logo in as opposed to the flames and text in my header. THANK YOU!

    <?php
    /**
    * The Header for our theme.
    *
    * Displays all of the <head> section and everything up till <div id=”main”>
    *
    * @package WordPress
    * @subpackage Distinction
    * @since Distinction 1.0
    */
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
    <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’, ‘distinction’ ), max( $paged, $page ) );

    ?></title>
    <link rel=”profile” href=”https://gmpg.org/xfn/11&#8243; />
    <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
    <link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
    <?php
    if ( is_singular() && get_option( ‘thread_comments’ ) )
    wp_enqueue_script( ‘comment-reply’ );

    wp_head();
    ?>

    </head>
    <?php global $wpnj_distinction_options; ?>
    <body <?php body_class(); ?>>

    <div id=”header”>

    <div id=”masthead”>
    <?php if ( ‘above’ == $wpnj_distinction_options[‘header_menu_position’] ) { ?>
    <div id=”header-menu”>

    <div id=”access” role=”navigation”>

    <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    <div class=”skip-link screen-reader-text”>
    “><?php _e( ‘Skip to content’, ‘wpnj_distinction’ ); ?>
    </div>

    <div class=”menu-header”>

    <?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( ‘container’ => ”, ‘theme_location’ => ‘primary’ ) ); ?>

    <?php if ( ‘true’ == $wpnj_distinction_options[‘display_menu_search_form’] ) { // Enabled by default ?>

    <div id=”search-form”><?php get_search_form(); ?></div>

    <?php } ?>

    </div><!– .menu-header –>

    </div><!– #access –>

    </div><!– #header-menu –>
    <?php } ?>
    <div id=”branding” role=”banner”>

    <?php $heading_tag = ( is_home() || is_front_page() ) ? ‘h1’ : ‘div’; ?>
    <<?php echo $heading_tag; ?> id=”site-title”>
    <?php
    if ( ‘true’ == $wpnj_distinction_options[‘display_header_flames’] ) { // Enabled by default ?>
    <img src=”<?php echo get_template_directory_uri(); ?>/images/lt-flurl.png” alt=”wispy image” />” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?><img src=”<?php echo get_template_directory_uri(); ?>/images/rt-flurl.png” alt=”wispy image” />

    <?php }else{ ?>

    ” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?>

    <?php } ?>
    </<?php echo $heading_tag; ?>>

    <?php
    if ( ‘true’ == $wpnj_distinction_options[‘display_site_description’] ) { // Enabled by default ?>

    <div id=”site-description”><?php bloginfo( ‘description’ ); ?></div>

    <?php } ?>

    </div><!– #branding –>
    <?php if ( ‘below’ == $wpnj_distinction_options[‘header_menu_position’] ) { ?>
    <div id=”header-menu”>

    <div id=”access” role=”navigation”>

    <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    <div class=”skip-link screen-reader-text”>
    “><?php _e( ‘Skip to content’, ‘wpnj_distinction’ ); ?>
    </div>

    <div class=”menu-header”>

    <?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( ‘container’ => ”, ‘theme_location’ => ‘primary’ ) ); ?>

    <?php
    global $wpnj_distinction_options;
    if ( has_nav_menu( ‘primary’ ) ) { // If a nav menu named ‘nav-header’ is configured, output it
    wp_nav_menu( array(
    ‘container’ => ”,
    ‘fallback_cb’ => ”,
    ‘depth’ => $wpnj_distinction_options[‘header_menu_depth’],
    ‘theme_location’ => ‘primary’
    ) );
    } else { // otherwise, output the top-level hierarchy list of pages ?>
    <ul class=”menu”>
    <?php if ( get_option( ‘show_on_front’ ) == ‘posts’ ) { // if posts, and not a static page, are being used as the site home page, display a link to HOME ?>

    • “>Home
    • <?php }
      wp_list_pages( array( ‘depth’ => $wpnj_distinction_options[‘header_menu_depth’], ‘sort_column’ => ‘menu_order’, ‘title_li’ => ” ) );
      // depth=1 indicates that only the top-level hierarchy of pages (i.e. no child pages) will be displayed
      // sort_column=menu_order indicates that the pages will be sorted as defined by the user in the Pages administration panel
      // title_li= (blank) indicates that the list will not be wrapped in

      tags, and the

    • tags will not be given a title
      // NOTE: list items are set to overflow:hidden. Long page titles will be cut off, but the full Page Title will display in the tooltip ?>

    <?php } ?>

    <?php if ( ‘true’ == $wpnj_distinction_options[‘display_menu_search_form’] ) { // Enabled by default ?>

    <div id=”search-form”><?php get_search_form(); ?></div>

    <?php } ?>

    </div><!– .menu-header –>

    </div><!– #access –>

    </div><!– #header-menu –>
    <?php } ?>
    </div><!– #masthead –>

    </div><!– #header –>

    <div id=”wrapper” class=”hfeed”>

    <div id=”main”>

    This is the stuff that’s displaying the site title and description:

    <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
    <<?php echo $heading_tag; ?> id="site-title">
    <?php
    if ( 'true' == $wpnj_distinction_options['display_header_flames'] ) { // Enabled by default ?>
    <img src="<?php echo get_template_directory_uri(); ?>/images/lt-flurl.png" alt="wispy image" />" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?><img src="<?php echo get_template_directory_uri(); ?>/images/rt-flurl.png" alt="wispy image" />
    
    <?php }else{ ?>
    
    " title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?>
    
    <?php } ?>
    </<?php echo $heading_tag; ?>>
    
    <?php
    if ( 'true' == $wpnj_distinction_options['display_site_description'] ) { // Enabled by default ?>
    
    <div id="site-description"><?php bloginfo( 'description' ); ?></div>
    
    <?php } ?>

    Try getting rid of that code and putting the code for an image in its place. I would save the code you’re deleting into a file somewhere safe so you can put it back it back if you need to later on.

    When you’ve done that, let us know and we’ll take a look to see what needs to be done to perhaps position the image correctly and so on.

    Cheers

    PAE

    testing. the code dump appears to have messed up the page.

    Thread Starter jenntru

    (@jenntru)

    Thank you! I will try it now and get back to you to let you know how it went :).

    Thread Starter jenntru

    (@jenntru)

    Peredur, I tried your solution, but the only thing that appeared in my heading was the url link for my image. Perhaps I just don’t know the proper way to code in the url… Thank you for all of your help – your time and patience is so VERY appreciated! ??

    Testing. Comments seem to have been shafted by the code pasting above

    You’ve got to leave it there for me to see or I don’t know what’s going on.

    Cheers

    PAAE

    Thread Starter jenntru

    (@jenntru)

    Sorry about that! I re-did the whole thing and have left it up for you.

    Erm. The code for an image ought to look something like:

    <img src="path/to/image" alt="something" />

    This is HTML we’re dealing with, not CSS.

    The path/to/image should be a full URL (https://www.rockitmomma.com/path/to/image/from/document/root). In other words, I should be able to type the URL into the address bar of my browser and be able to see the image displayed in my browser.

    After we’ve got it working we can replace some of the path with some PHP calls to get, for instance, the site URL.

    Cheers

    PAE

    Thread Starter jenntru

    (@jenntru)

    Oh, boy. It worked, but it is HUGE!

    Thread Starter jenntru

    (@jenntru)

    Peredur,

    Thank you so much for all of your help – again, any and all help is so appreciated! I am going to keep the header as-is right now (the default header) and work on the custom logo later.

    Have a great day!!

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘How to change header image text to my own logo’ is closed to new replies.