WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to crete this type of header? (Logo+Search Bar+Login) (7 posts)

  1. neha_joshi_rocks
    Member
    Posted 1 year ago #

    I wants to create this type of header.
    Small logo on left + search bar of customizable size on middle + login/registration box on right side.

    http://s4.postimg.org/59gxzq3xp/Header.png

    I have no knowledge of php,css and I can understand easily with instruction or where to place codes.

    Any help will be highly appreciated.

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    To get help, you need to provide sufficient information.

    The image alone is not enough, for this kind of stuff it's best if you post link to your live site, or at the very least name the theme that you are using.

  3. gabrielcastillo
    Member
    Posted 1 year ago #

    This is what I would do with the html. Now you have to find the logo, search, users functions. Below is a simple example of some things i would do.

    Logo example:

    <img src="http://mysite.com/wp-content/uploads/2013/02/logo.png" alt="My Site"  />

    example search bar:

    <form action="q" method="GET">
    <input type="text" name="q" />
    <input type="submit" name="search" value="Search" />
    </form>

    Users example:

    <?php
    if ( is_user_logged_in() ) {
        echo 'Welcome, registered user!';
    } else {
        echo 'Welcome, visitor!';
    }
    ?>
    <div id="logo">
    //insert logo
    </div>
    <div id="search-bar">
    //insert search form
    </div>
    <div id="users">
    // insert user functions
    </div>

    //CSS

    #logo, #search-bar, #users {
    float:left; margi-right:20px;
    }
    #users {
    margin-right:0;
    }
  4. neha_joshi_rocks
    Member
    Posted 1 year ago #

    @paulwpxp
    Ok, here is the link of my website

    http://www.hotmug.org/

    And I am using TWENTY TWELVE theme.

    @gabrielcastillo
    Where would I have to put these codes? (like in header.php etc)

  5. gabrielcastillo
    Member
    Posted 1 year ago #

    You will have to adjust the css for this to show how you want but here is a good starter of what you are asking.

    Place this just before closing </head>

    <style type="text/css">
    #logo, #search-bar, #users {
    float:left; margin-right:20px;
    }
    #users {
    margin-right:0;
    }
    </style>

    In the header div section:

    Replace <hgroup> with:

    <div id="logo">
    		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"rel="home"><img src="http://dummyimage.com/450x150/000/fff" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a>
    		</div>
    		<div id="search-bar">
    			<form id="search-box" action="http://www.hotmug.org/" method="get" role="search">
    				<input id="s" type="text" name="s" value="">
    				<input id="search-box-submit" type="submit" value="Search">
    			</form>
    		</div>
    		<div id="users">
    			<?php if( is_user_logged_in() ): ?>
    			<?php $current_user = wp_get_current_user(); ?>
    			<p>Welcome: <?php echo ucfirst($current_user->display_name); ?></p>
    			<?php endif; ?>
    		</div>
  6. paulwpxp
    Font hero
    Posted 1 year ago #

    @neha_joshi_rocks

    You have to create a childtheme
    http://codex.wordpress.org/Child_Themes

    or you can just dl it from here
    http://quirm.net/themes/twenty-twelve-child

    Then copy over header.php from parent's and put into your child's folder. Then hardcode the html into it ( as suggested by gabrielcastillo ) but since Twentytwelve is responsive AND mobi first, you will have to assign the styling in CSS and make sure to adjust them in proper media query, be aware that Twentytwelve has IE specific CSS too.

  7. neha_joshi_rocks
    Member
    Posted 1 year ago #

    @gabrielcastillo
    @paulwpxp

    Thank you guys.
    You were a great help.
    Really, thanks a lot.

Topic Closed

This topic has been closed to new replies.

About this Topic