Announcement

Collapse
No announcement yet.

Custom header with column classes, three areas?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Custom header with column classes, three areas?

    Scratching my head here because I´m still too far from being flexible with PHP.
    Here´s an example for a header I´d like to accomplish, keeping the Genesis title/logo area and Header Right area, adding a custom widget left:
    http://www.esmeth.com/wp/

    I had my tries with adding a custom widget left and using lots of CSS to position things, but actually it would be so much easier to have structural wraps with column classes (thirds) for all them (at least I think so, or am I wrong?).

    So that would be a custom widget (one third first wrap) and PHP to wrap divs with column classes (thirds) around title/logo and Header Right.

    Any PHP pro to help me with that? Didn´t find any fitting tutorial unfortunately....

  • #2
    Making progress with a workaround, based on one of Sridhar´s tutorials:
    http://sridharkatakam.com/replace-he...nally-genesis/

    That works but I bet it´s faaaaaar too complicated. Especially, it wouldn´t be necessary to replace the header right widget area but just wrap it. Anybody optimize that for me?


    PHP Code:
    //* Register Header Left Widget area
    genesis_register_sidebar( array(
    'id' => 'header-left',
    'name' => __'Header Left Widget''siga' ),
    'description' => __'This is the header left custom widget area.''siga' ),
    ) );

    //* Register Header Right Inner Primary sidebar
    genesis_register_sidebar( array(
    'id' => 'header-right-inner',
    'name' => __'Header Right Inner''siga' ),
    'description' => __'This is the header right inner sidebar.''siga' ),
    ) );



    //* Show Header Right Inner widget area in Header Right location on all pages other than homepage
    add_action'genesis_before_header''sk_replace_header_right_sidebar' );
    function 
    sk_replace_header_right_sidebar() {

    remove_action'genesis_header''genesis_do_header' );
    add_action'genesis_header''genesis_do_custom_header' );
    }

    //* Add header left widget
    add_action'genesis_header''header_left_widget' );
    function 
    header_left_widget() {

        
    genesis_widget_area'home-slider', array(
            
    'before' => '<div class="one-third first header-left">',
            
    'after'  => '</div>',
        ) );

    }

    function 
    genesis_do_custom_header() {
    genesis_markup( array(
    'html5' => '<div class="one-third"><div %s>',
    'xhtml' => '<div class="one-third"><div id="title-area">',
    'context' => 'title-area',
    ) );
    do_action'genesis_site_title' );
    do_action'genesis_site_description' );
    echo 
    '</div></div>';
        
    genesis_markup( array(
    'html5' => '<div class="one-third"><aside %s>',
    'xhtml' => '<div class="one-third"><div class="widget-area header-widget-area">',
    'context' => 'header-widget-area',
    ) );

    do_action'genesis_header_right' );

    add_filter'wp_nav_menu_args''genesis_header_menu_args' );
    add_filter'wp_nav_menu''genesis_header_menu_wrap' );
    dynamic_sidebar'header-right-inner' );
    remove_filter'wp_nav_menu_args''genesis_header_menu_args' );
    remove_filter'wp_nav_menu''genesis_header_menu_wrap' );

        
    genesis_markup( array(
    'html5' => '</aside></div>',
    'xhtml' => '</div></div>',
    ) );

    Comment


    • #3
      Howdy SiGa. Maybe you can glean something from one of these:
      http://wpsites.net/web-design/add-he...idget-genesis/
      http://wpbeaches.com/create-middle-h...s-child-theme/

      Comment


      • SiGa
        SiGa commented
        Editing a comment
        Thanks Bill, I´ll look into them. It seems easy to me to create the new widget and wrap it but the problem is how to wrap the existing ones. Suceeded with title area, now only header right is left hopefully.

    • #4
      Will this be mobile responsive?
      If so any you use 1/3's Left, Logo, and Right, the header left area will advance to the top of the page.

      How about something like this
      http://sandbox.sogwap.net/header-center-demo/

      Comment


      • SiGa
        SiGa commented
        Editing a comment
        Hm, I see where you are coming from, good argument. Seeing a three-part-header is pretty large on mobiles, I thought about dropping one of the parts anyway. But it wouldn´t be a problem to replace the one-third classes in the wrapping divs with something else and hook the header-left widget differently to get the source order right and let them float like you show there. As soon as I find out how to get the header right area part right. LOL

    • #5
      Does this work?

      https://www.dropbox.com/s/ffu1l8e49r...riple.png?dl=0

      PHP Code:
      //* Filter the header-right widget-area classes
      add_filter'genesis_attr_header-widget-area''dynamik_genesis_attr_header_widget' );
      function 
      dynamik_genesis_attr_header_widget $attributes ) {
          
          
      $attributes['class'] = 'widget-area header-widget-area header-right';
          return 
      $attributes;
      }

      //* Add markup for header-left widget-area
      add_action'genesis_header''dynamik_header_left');
      function 
      dynamik_header_left() {

          if ( 
      is_active_sidebar'header-left' ) ) {
              
              echo 
      '<aside class="widget-area header-widget-area header-left">';
                  
              
      add_filter'wp_nav_menu_args''genesis_header_menu_args' );
              
      add_filter'wp_nav_menu''genesis_header_menu_wrap' );
              
      dynamic_sidebar'header-left' );
              
      remove_filter'wp_nav_menu_args''genesis_header_menu_args' );
              
      remove_filter'wp_nav_menu''genesis_header_menu_wrap' );

              echo 
      '</aside>';
          }
      }

      //* Register header-left widget-area
      genesis_register_sidebar( array(
          
      'id'   => 'header-left',
          
      'name' => __'Header Left''dynamik-gen' ),
      ) ); 
      Code:
      /* Triple Header */
      .site-header .title-area,
      .header-image .site-header .wrap .title-area,
      .site-header .header-widget-area {
          box-sizing: border-box;
          float: left;
          margin-left: 0;
          margin-right: 0;
          padding-left: 0;
          padding-right: 0;
          text-align: center;
          width: 33.333333333333%;
      }
      
      .header-image .site-header .wrap .title-area {
          background-position: center top;
      }
      
      .site-header .genesis-nav-menu {
          text-align: center;
          width: auto;
      }
      
      @media only screen and (max-width: 1140px) {
          
          .site-header .title-area,
          .header-image .site-header .wrap .title-area,
          .site-header .header-widget-area {
              width: 100%;
          }
      }
      Last edited by Junior Atoms; 01-15-2015, 10:16 AM.

      Comment


      • jasondavis
        jasondavis commented
        Editing a comment
        So I put the PHP in the functions field and the code in the CSS field... and then...?

        Nothing magical happened. I checked the Appearance>Widgets hoping there would be new widgets or something, but no luck. What is my next step?

    • #6
      That works perfectly (and is much more effective than the pieces I frickled together)!

      Thanks for taking the time to look into it, Larry - very much appreciated!

      Comment


      • #7
        jasondavis the PHP code creates a new header widget "Header Left", the other two parts are already there (title/logo area and Header Right).

        Whenever you create widgets or sidebars, the checkbox "Affect Admin" in Dynamik Custom - Functions needs to be checked, else you´ll not see the widget areas in Appearance - Widgets. I guess that´s what was missing.

        Comment


        • #8
          Ah, yep, "affect admin" made the left header widget show up. So I get there's a widget for left and right sides now. What about the middle area? Where do you change the content in that area?

          Comment


          • SiGa
            SiGa commented
            Editing a comment
            That´s your logo/site title which would normally be on the left side in the header. Code and CSS make sure it´s in the middle now. You change it in the usual place in Dynamik: Dynamik Design - Header.
        Working...
        X