Custom Header Right Widget Area in Genesis

This post follows on from this previous post about how to Conditionally Remove the Header Right Widget Area in Genesis

Here’s the code to conditionally replace the header right widget area with a custom widget area.


Comments

18 responses to “Custom Header Right Widget Area in Genesis”

  1. Hi, how could I Custom Header Right Widget Area , set the same theme as the previous Header Right Widget Area. Thank you.

    1. Brad Dalton Avatar
      Brad Dalton

      Sorry but i don’t understand.

      1. I remove_header_widget’ that is type as menu and is Horizontal arrangement , but my new Custom Header Right Widget is Vertical arrangement . how to make the new Custom Header Right Widget has same format as as menu and is Horizontal arrangement ?

        1. Brad Dalton Avatar
          Brad Dalton

          Link to the site please.

          1. http://www.girlsyouareloved.com/
            Custom Header Right from the woo commerce page, I have recover the Header Right menu. I hope my Header Right menu type would be same as it. thank you.

          2. Brad Dalton Avatar
            Brad Dalton

            This is NOT something i have written about.

          3. Brad Dalton Avatar
            Brad Dalton

            Also try this new tutorial

          4. Sorry, I still have some problem,
            I used the Pretty Chic theme version 3.1 for my website.
            web site : http://www.girlsyouareloved.com/shop

            I add the following code
            //* Add WooCommerce header_widget
            add_action( ‘genesis_header’, ‘add_woocommerce_header_widget’ );
            function add_woocommerce_header_widget() {
            if ( is_woocommerce() or is_checkout() or is_account_page() or is_cart() or is_product() or is_shop() ) {
            genesis_widget_area( ‘woocommerce-header-right’, array(
            ‘before’ => ”,
            ‘after’ => ”,
            ) );
            }
            }

            genesis_register_sidebar( array(
            ‘id’ => ‘woocommerce-header-right’,
            ‘name’ => __( ‘WooCommerce Header Right’, ‘genesis’ ),
            ) );

            the new Custom Header Right Widget is Vertical arrangement and all color is pink,
            it doesn’t use Pretty Chic theme. It’s also make the shop page sub menu disappear.
            What can I do to make the Custom Header have same type,and not don’t make the shop page sub menu disappear. thanks!

            (the image before and after I add this code
            https://docs.google.com/document/d/1c_8p9Htw-GLfUF4RYTq-ERJyKUG1dMa8wm6AylbyTyE/edit)

          5. Brad Dalton Avatar
            Brad Dalton

            Are you referring to the code in this post? https://wpsites.net/web-design/show-different-menu-title-tagline-header-widget-on-all-woocommerce-pages/

            Because the video proves it works perfectly.

          6. Hi, I have clearly read that post
            but I have used this code for my sub-menu,as following code

            //* Hook WooCommerce menu after header conditionally
            add_action( ‘genesis_before_content_sidebar_wrap’, ‘woocommerce_shop_page_menu’, 12 );
            function woocommerce_shop_page_menu() {

            if ( ! class_exists( ‘WooCommerce’ ) )
            return;

            if ( is_woocommerce() or is_checkout() or is_account_page() or is_cart() or is_product() or is_shop() ) {
            genesis_nav_menu( array(
            ‘theme_location’ => ‘woocommerce-menu’,
            ‘container’ => false,
            ‘depth’ => 1,
            ‘fallback_cb’ => false,
            ‘menu_class’ => ‘genesis-nav-menu wrap nav-primary class’,
            ) );
            }

            }
            //* Remove nav-menu from WooCommerce page
            add_action(‘get_header’, ‘child_remove_genesis_do_nav’);
            function child_remove_genesis_do_nav() {
            if (is_woocommerce() or is_checkout() or is_account_page() or is_cart() or is_product() or is_shop()) {
            remove_action( ‘genesis_before_content_sidebar_wrap’, ‘genesis_do_nav’ );
            }
            }

            And the top menu use custom_header_widget,
            the new Custom Header Right Widget is Vertical arrangement and all color is pink,
            it doesn’t use Pretty Chic theme. It’s also make the shop page sub menu disappear.
            What can I do to make the Custom Header have same type,and not don’t make the shop page sub menu disappear. thanks!
            Is it necessary to add new menu to solve this questions?
            and I have add a new one already,should I add new second menu?

            (this web site is image for my questions
            https://docs.google.com/document/d/1c_8p9Htw-GLfUF4RYTq-ERJyKUG1dMa8wm6AylbyTyE/edit )

          7. Brad Dalton Avatar
            Brad Dalton

            Please ask this question on the other tutorial.

            All code is tested and works as shown in the video demo.

            Otherwise, you have a problem with the code in your theme.

          8. Sorry, and again to ask you,previously your reply was also read in detail,but on this code and about my theme is still a little problem.
            Website using Pretty Chic theme version 3.1
            Web site : http://www.girlsyouareloved.com/shop
            There are currently installed style plugin.
            At the top of the menu, the site uses the code in the tutorial,
            But the format on the menu is sorted vertically downwards and the colors are all pink.
            In the original header_widget, the sorted format is sorted horizontally to the right,
            How to adjust the code to the same original header_widget format?
            Also ask whether such a question is related to the style.css setting?

            The following is a description of the screenshots before and after adjustment
            https://docs.google.com/document/d/1c_8p9Htw-GLfUF4RYTq-ERJyKUG1dMa8wm6AylbyTyE/edit
            Thank you!

          9. Brad Dalton Avatar
            Brad Dalton

            When i check your site it displays inline whereas your before and after images indicate it displays vertically.

            Have you tried using display: inline; or display: inline-block;

            CSS is not covered under membership. You should understand basic CSS if you are a webdesigner.

          10. Sorry, I tried to set the site chlid theme style.css header to display: inline; or display: inline-block ;.
            However, the menu arrangement does not change,
            Should I add a custom_header_widget project in the style.css file?
            or how do I set up the display in style.css?

          11. The following file is add inline to style.css I have been working on the process

            https://docs.google.com/document/d/1c_8p9Htw-GLfUF4RYTq-ERJyKUG1dMa8wm6AylbyTyE/edit

            Thank you!

          12. Brad Dalton Avatar
            Brad Dalton

            Please ask all support questions using Facebook messenger https://wpsites.net/wordpress-support/ and link to a live site so i can inspect the CSS

  2. […] Custom Header Right Widget Area in Genesis […]

  3. […] Custom Header Right Widget Area in Genesis […]

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.