• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Did I make a coding mistake? Any Alternatives?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Did I make a coding mistake? Any Alternatives?

This topic is: not resolved

Tagged: coding, header widgets, hooks

  • This topic has 2 replies, 2 voices, and was last updated 6 years, 10 months ago by jamesparkin.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 26, 2016 at 4:28 pm #182299
    jamesparkin
    Participant

    I was attempting to add three header widgets on the home/front-page of the LifeStyle Pro Theme. They are styled exactly the same as the Footer Widgets. The coding worked exactly as planned, but I was wondering if there was an alternative way to do this?

    //* Extra the CTA Header Widget Area
    function genesischild_ctawidgetheader() {
    	genesis_register_sidebar( array(
    	'id' => 'ctawidgetheaderleft',
    	'name' => __( 'CTA Widget Header Left', 'genesis' ),
    	'description' => __( 'This is for the CTA Widget Left', 'genesis' ),
    	) );
    	genesis_register_sidebar( array(
    	'id' => 'ctawidgetheadermiddle',
    	'name' => __( 'CTA Widget Header Middle', 'genesis' ),
    	'description' => __( 'This is for the CTA Widget Middle', 'genesis' ),
    	) );
    	genesis_register_sidebar( array(
    	'id' => 'ctawidgetheaderright',
    	'name' => __( 'CTA Widget Header Right', 'genesis' ),
    	'description' => __( 'This is for the CTA Widget Right', 'genesis' ),
    	) );
    	
    }

    add_action ( 'widgets_init','genesischild_ctawidgetheader' );

    //* Position CTA Header Widget
    function genesischild_ctawidgetheader_position ()  {
    if( is_home() ) {
    	echo '<div class="ctawidgetheader-container"><div class="wrap"><div class="ctawidgetheaderleft">';
    	genesis_widget_area ( 'ctawidgetheaderleft' );
    	echo '</div><div class="ctawidgetheadermiddle">';
    	genesis_widget_area ( 'ctawidgetheadermiddle' );
    	echo '</div><div class="ctawidgetheaderright">';
    	genesis_widget_area ( 'ctawidgetheaderright' );
    	echo '</div></div>';
    }}
    //Action set to a higher priority to fire before CTA header widgets
    
    add_action ( 'genesis_before_content','genesischild_ctawidgetheader_position', 5);
    
    March 27, 2016 at 3:36 pm #182336
    Gary Jones
    Member

    I'd restructure it slightly differently:

    <?php
    
    // Requires at least PHP 5.4 for the shorthand array syntax.
    
    // Define where our view files are.
    // The constant prefix should represent the theme. Here, I've pretended the theme is called 'jamesparkin'.
    define( 'JAMESPARKIN_VIEW_DIR', trailingslashit( get_stylesheet_directory() ) . 'views/' );
    
    add_action( 'widgets_init', 'jamesparking_register_header_widgets' );
    /**
     * Register custom widget areas.
     * 
     * Note that this function name has a prefix, and an action - registering something. Functions should do something,
     * so try and name them with a verb.
     */
    function jamesparking_register_header_widgets() {
    	// Keep the data separate from what we do with the data for as long as possible.
    	// This array could be extracted into its own function, or a config file, or filtered before using it etc.
    	// Note that text domains should match with the theme slug - they should not be 'genesis'.
    	$widget_areas = [
    		[
    			// Nicely align to = characters make it all much easier to read.
    			// ID can be hyphenated to make it easier to read too.
    			'id'          => 'jamesparkin-header-left',
    			'name'        => __( 'CTA Widget Header Left', 'jamesparkin' ),
    			// You could be more verbose with these descriptions. Give a clue as to what widgets can work well
    			// in each of these widget areas, for instance. Just repeating the widget area title isn't helpful.
    			'description' => __( 'This is for the CTA Widget Left', 'jamesparkin' ),
    		],
    		[
    			'id'          => 'jamesparkin-header-middle',
    			'name'        => __( 'CTA Widget Header Middle', 'jamesparkin' ),
    			'description' => __( 'This is for the CTA Widget Middle', 'jamesparkin' ),
    		],
    		[
    			'id'          => 'jamesparkin-header-right',
    			'name'        => __( 'CTA Widget Header Right', 'jamesparkin' ),
    			'description' => __( 'This is for the CTA Widget Right', 'jamesparkin' ),
    		],
    	];
    
    	// Now loop through the data and use it to register sidebars.
    	array_walk( $widget_areas, function( $widget_area ) {
    		// Use genesis_register_widget_area() - does the same thing as genesis_register_sidebar(), but it helps to
    		// think of these as widget areas which may not be displayed as a bar on the side of content.
    		genesis_register_widget_area( $widget_area );
    	} );
    }
    
    add_action( 'genesis_before_content', 'jamesparkin_display_header_widgets', 5 );
    /**
     * Display call to action header widgets.
     */
    function jamesparkin_display_header_widgets() {
    	// Return early, makes code easier to follow.
    	if ( ! is_home() ) {
    		return;
    	}
    
    	// Don't have HTML stuffed into PHP strings. Have syntax-highlightable and front-end-developer-editable
    	// HTML in simple files, and just include them where needed.
    	include JAMESPARKIN_VIEW_DIR . 'header-widgets.php';
    }
    ?>
    <!-- wp-content/themes/jamesparkin/views/header-widgets.php -->
    <div class="header-widgets">
    	<div class="wrap">
    		<!--
    		Refer to output classes as -1, -2, -3, not left, middle, right as
    		responsive design means they may not be shown in those positions.
    		-->
    		<div class="header-widget header-widget-1">
    			<?php echo genesis_widget_area( 'jamesparkin-header-left' ); ?>
    		</div>
    		<div class="header-widget header-widget-2">
    			<?php echo genesis_widget_area( 'jamesparkin-header-middle' ); ?>
    		</div>
    		<div class="header-widget header-widget-3">
    			<?php echo genesis_widget_area( 'jamesparkin-header-right' ); ?>
    		</div>
    	</div>
    </div> <!-- This final /div was missing from the code you posted. -->

    WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

    March 29, 2016 at 2:13 pm #182485
    jamesparkin
    Participant

    Thank you Gary, this is greatly appreciated. The full explanations really does help.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble