Add a widgetized area under the header

Homepage Community Forums Epik Theme Support Add a widgetized area under the header

  • This topic has 10 replies, 4 voices, and was last updated 11 years ago by Wes.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #3607
    Glade
    Customer

      Can someone help me figure out how to add a full width widget area to my pages (services, contact, etc), site is here: http://pastedata.com/demoeleven/services/ ? I would like to add a widget titled “Page Featured” under the header section, or alternatively above the content. So, ultimately it will look something like this http://pastedata.com/demoeleven/wp-content/uploads/2013/04/service-details.png

       

       

      #3612
      Eric
      Customer

        Take a look at the Genesis Documentation on Studiopress.com on widgets, and hooks so you can get an idea how they work.

        You can follow this tutorial that Brian wrote for the eleven40 theme, it will work with this theme as well, you can change any word that says eleven40 to the theme you are using (epik) and everything should be fine. Just adjust it to your needs.


        I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

        #3618
        Terence
        Customer

          Hey Glade,

          How did you add that clickable image logo to Epik?

          Terence.

          #3625
          Glade
          Customer

            Thanks for the response Eric. I went through that tutorial before I posted here, but where I ran into trouble was adding it to the pages, rather than  the home.php. I want to add the full width feature widget to only the pages, not the home page. How would I change the code to do this? That is where I get stuck with using the funtions.php file rather than the home.php file.

            #3627
            Glade
            Customer

              Terence,

              I created an image file that is 1152px wide by 120px in height, then uploaded it under appearance > header. One other thing I learned is that you also have to make sure that the “show title” check box is unchecked under the themes > customize section, otherwise you’ll get the header text overlay on your logo.

              Then, depending on the width of your logo, you have to update this CSS code, as follows, note the change in width from 50% to a specific size of 290px.


              .header-image #title,
              .header-image #title a,
              .header-image #title-area {
              display: block;
              float: left;
              min-height: 120px;
              overflow: hidden;
              text-indent: -9999px;
              width: 290px;
              }

              #3633
              Eric
              Customer

                @Glade can you post the custom code that you added in your functions file? I can tell you what you’ll need to adjust to make it work.


                I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                #3646
                Terence
                Customer

                  @Glade ~ thanks! As it turns out, I had already modified the header size, and….

                  min-height: 60px;
                  width: 290px;

                  was all I need to solve my problems.

                  Many thanks.

                  #3657
                  Glade
                  Customer

                    I got it close with this code.

                    add_action( ‘genesis_before_content’, ‘include_sidebar_widget’ );
                    /** Loads a new sidebar after the content */
                    function include_sidebar_widget() {

                    echo ”;
                    dynamic_sidebar( ‘featured’ );
                    echo ”;

                    }

                    genesis_register_sidebar( array(
                    ‘id’ => ‘featured’,
                    ‘name’ => ‘Featured’,
                    ‘description’ => ‘This is where a featured section goes’,
                    ) );

                    But I can’t get it to show up outside the wrap so it spans the entire width of the page.

                    #3680
                    Wes
                    Moderator

                      @Glade Remove that code (at the top) and replace it with this –

                      Make sure and place the above code under the head-wrap code in your functions file……Place it under this –

                      // After Header Wrap
                      add_action( 'genesis_after_header', 'after_header_wrap' );
                      function after_header_wrap() {
                      echo '</div>';
                      }

                      That should show up directly under the header (which is actually the head-wrap) on your site. I just tested it and it works for me. Full width and everything…..you’ll just need to create some css for it.

                      Let me know if that works.

                      #3685
                      Glade
                      Customer

                        Ok, thanks for pointing me in the right direction. The code you gave me worked, but not quite correctly, as the widget text was aligned off the left hand side of the page. So I have to change the output from the widget to rather than . That way, I could further style the .widget-wrap inside the featured div id. That centered it.

                        Here is the final code that worked for me, I added it after the “//After Header Wrap” section. Note that I had to add the contional “if is home” section so it didn’t show up on the homepage.


                        genesis_register_sidebar( array(
                        'id' => 'featured',
                        'name' => __( 'Featured', 'epik' ),
                        'description' => __( 'This is the featured section.', 'epik' ),
                        ) );

                        /** Add the featured section */
                        add_action( 'genesis_after_header', 'epik_featured' );
                        function epik_featured() {

                        /** Do nothing on the home page */
                        if ( is_home() )
                        return;

                        genesis_widget_area( 'featured', array(
                        'before' => '',
                        ) );

                        }

                        Then I added this CSS.


                        #featured {
                        background: #474747;
                        color: #FFFFFF;
                        width: 100%;
                        margin: 0px auto;
                        }

                        #featured h1 {
                        color: #FFFFFF;
                        font-size: 32px;
                        }

                        #featured .widget-wrap {
                        width: 1152px;
                        margin: 0px auto;
                        }

                        #3688
                        Wes
                        Moderator

                          It works, you just have to style it in your css…..you also need to add your div (or divs if you plan to have multiple containers) which is missing in your code –

                          'before' => '<div class="featured">',

                          I added the same code and got it to look exactly like the screenshot you posted.

                          Let me know if you get it working.

                        Viewing 11 posts - 1 through 11 (of 11 total)
                        • You must be logged in to reply to this topic.