WordPress.org

Support

Support » Themes and Templates » [Resolved] How to crete this type of header? (Logo Search Bar Login)

[Resolved] How to crete this type of header? (Logo Search Bar Login)

Viewing 6 replies - 1 through 6 (of 6 total)
  • paulwpxp

    @paulwp

    Font hero

    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.

    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;
    }

    @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)

    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>
    paulwpxp

    @paulwp

    Font hero

    @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.

    @gabrielcastillo
    @paulwpxp

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] How to crete this type of header? (Logo Search Bar Login)’ is closed to new replies.