Community Forums › Forums › Archived Forums › Design Tips and Tricks › 3 widgets in header
- This topic has 12 replies, 3 voices, and was last updated 9 years, 9 months ago by jenglish647.
-
AuthorPosts
-
July 9, 2014 at 1:29 pm #113602jenglish647Member
How would I equally have 3 widgets in the top header instead of just the logo on the left and the header right widget? I want to put something in between the logo and header right and ideally all 3 spaces be equal in width. Any idea?
July 9, 2014 at 2:24 pm #113619Brad DaltonParticipantUnhook the header and then hook it back with a custom function that includes 3 widgets inline.
There's different ways to do this and the best method may be different depending on which theme you use http://wpsites.net/web-design/responsive-inline-header-widgets-side-by-side-in-studiopress-themes/
July 9, 2014 at 4:15 pm #113637Lauren @ OnceCoupledMemberJust use your header right widget area to accomplish that... place three different widgets in it and use CSS to give them all a width of 32%, a margin-right of 2%, and the last-child a margin-right of 0.
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
July 9, 2014 at 8:01 pm #113667jenglish647MemberMr. Dalton, I'm using simple hooks so I checked the box to unhook the header then went into the functions file and added the code exactly as you have it in the second option. Nothing happened. So I'm wondering what I did wrong. I also tried to add the code from the second option to the simple hooks where I unhooked the header. Please forgive me as this whole Genesis framework is not as easy to grasp as some of the other things I've done in the past.
July 10, 2014 at 12:38 am #113695Brad DaltonParticipantYou will need to follow the instructions on the post as it has nothing to do with simple hooks.
The code does not go in simple hooks.
July 10, 2014 at 7:59 am #113743jenglish647MemberI'm not sure where I'm going wrong but I'm following the instructions on the link and nothing is happening. SO when you say unhook the header and hook it back maybe that's where I'm going wrong. When I used the simple hooks I saw where it said "unhook header" so that's the only part on simple hooks I actually used and then I tried inputting the code into the functions file (and when that didn't work I tried to input the same code into the simple hooks plugin). My functions.php code looks like this before I do any adjustments so maybe you can tell me where to unhook and where to add this code on the link:
// Initialize Sandbox ** DON'T REMOVE **
require_once( get_stylesheet_directory() . '/lib/init.php');add_action( 'genesis_setup', 'gs_theme_setup', 15 );
//Theme Set Up Function
function gs_theme_setup() {//Enable HTML5 Support
add_theme_support( 'html5' );//Enable Post Navigation
add_action( 'genesis_after_entry_content', 'genesis_prev_next_post_nav', 5 );/**
* 01 Set width of oEmbed
* genesis_content_width() will be applied; Filters the content width based on the user selected layout.
*
* @see genesis_content_width()
* @param integer $default Default width
* @param integer $small Small width
* @param integer $large Large width
*/
$content_width = apply_filters( 'content_width', 600, 430, 920 );//Custom Image Sizes
add_image_size( 'featured-image', 225, 160, TRUE );// Enable Custom Background
//add_theme_support( 'custom-background' );// Enable Custom Header
//add_theme_support('genesis-custom-header');// Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
'header',
'nav',
'subnav',
'inner',
'footer-widgets',
'footer'
) );/**
* 07 Footer Widgets
* Add support for 3-column footer widgets
* Change 3 for support of up to 6 footer widgets (automatically styled for layout)
*/
add_theme_support( 'genesis-footer-widgets', 3 );/**
* 08 Genesis Menus
* Genesis Sandbox comes with 4 navigation systems built-in ready.
* Delete any menu systems that you do not wish to use.
*/
add_theme_support(
'genesis-menus',
array(
'primary' => __( 'Primary Navigation Menu', CHILD_DOMAIN ),
'secondary' => __( 'Secondary Navigation Menu', CHILD_DOMAIN ),
'footer' => __( 'Footer Navigation Menu', CHILD_DOMAIN ),
'mobile' => __( 'Mobile Navigation Menu', CHILD_DOMAIN ),
)
);// Add Mobile Navigation
add_action( 'genesis_before', 'gs_mobile_navigation', 5 );//Enqueue Sandbox Scripts
add_action( 'wp_enqueue_scripts', 'gs_enqueue_scripts' );/**
* 13 Editor Styles
* Takes a stylesheet string or an array of stylesheets.
* Default: editor-style.css
*/
//add_editor_style();// Register Sidebars
gs_register_sidebars();} // End of Set Up Function
// Register Sidebars
function gs_register_sidebars() {
$sidebars = array(
array(
'id' => 'home-top',
'name' => __( 'Home Top', CHILD_DOMAIN ),
'description' => __( 'This is the top homepage section.', CHILD_DOMAIN ),
),
array(
'id' => 'home-middle-01',
'name' => __( 'Home Left Middle', CHILD_DOMAIN ),
'description' => __( 'This is the homepage left section.', CHILD_DOMAIN ),
),
array(
'id' => 'home-middle-02',
'name' => __( 'Home Middle Middle', CHILD_DOMAIN ),
'description' => __( 'This is the homepage middle section.', CHILD_DOMAIN ),
),
array(
'id' => 'home-middle-03',
'name' => __( 'Home Right Middle', CHILD_DOMAIN ),
'description' => __( 'This is the homepage right section.', CHILD_DOMAIN ),
),
array(
'id' => 'home-bottom',
'name' => __( 'Home Bottom', CHILD_DOMAIN ),
'description' => __( 'This is the homepage right section.', CHILD_DOMAIN ),
),
array(
'id' => 'portfolio',
'name' => __( 'Portfolio', CHILD_DOMAIN ),
'description' => __( 'Use featured posts to showcase your portfolio.', CHILD_DOMAIN ),
),
array(
'id' => 'after-post',
'name' => __( 'After Post', CHILD_DOMAIN ),
'description' => __( 'This will show up after every post.', CHILD_DOMAIN ),
),
);foreach ( $sidebars as $sidebar )
genesis_register_sidebar( $sidebar );
}/**
* Enqueue and Register Scripts - Twitter Bootstrap, Font-Awesome, and Common.
*/
require_once('lib/scripts.php');/**
* Add navigation menu
* Required for each registered menu.
*
* @uses gs_navigation() Sandbox Navigation Helper Function in gs-functions.php.
*///Add Mobile Menu
function gs_mobile_navigation() {$mobile_menu_args = array(
'echo' => true,
);gs_navigation( 'mobile', $mobile_menu_args );
}// Add Widget Area After Post
add_action('genesis_after_entry', 'gs_do_after_entry');
function gs_do_after_entry() {
if ( is_single() ) {
genesis_widget_area(
'after-post',
array(
'before' => '<aside id="after-post" class="after-post"><div class="home-widget widget-area">',
'after' => '</div></aside><!-- end #home-left -->',
)
);
}
}July 10, 2014 at 8:02 am #113745Lauren @ OnceCoupledMemberWhen posting code to the forums, you need to enclose it in the code tags or put it into a GitHub Gist so that it is readable.
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
July 10, 2014 at 8:06 am #113746jenglish647MemberHow would I go about doing that?
July 10, 2014 at 8:20 am #113747Brad DaltonParticipantI added a second solution which solves your problem based on this forum question and tested it locally before i added it with the screenshot that proves it works to the existing post i published on the same topic last year.
If you are going to customize your theme using PHP and CSS, i suggest you install WP locally with a copy of your theme and play around with it there.
Plugins are generally not easy to modify and shouldn't really be used for theme customization in most cases.
July 10, 2014 at 8:46 am #113752jenglish647Memberok well thanks anyway. I wasn't trying to say that your solution doesn't work. Apparently I'm just in over my head and can't figure out how to make it work for myself....which is why I showed you my code to try to understand how to even "unhook the header" in the first place. I do have WP installed locally and I'll continue trying to play with it and figure it out on my own....and if someone can tell me how to put a forum code into a "GitHub Gist" or whatever I need to do next time so I don't get in trouble then I'd greatly appreciate it.
thanks.
July 10, 2014 at 9:03 am #113760Brad DaltonParticipantThe 2nd solution in the tutorial i linked to is very simple :
1. Copy and paste the PHP code into your functions.php file
2. And copy and paste the CSS into yourt style.css file.
July 10, 2014 at 9:32 am #113775Lauren @ OnceCoupledMemberHeyo,
Wasn't trying to say you were in trouble! I just have two extremes: lots of punctuation making me seem overly peppy, and the straight answer, making me seem cranky. The internet leaves no in-between for me!
Using the proper formatting ensures that a) anyone copying your code doesn't break their own site and b) that syntax highlighting and line breaks make it easy for everyone to read the raw code. 🙂
More on how to share code: http://www.studiopress.community/faq/#code
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
July 10, 2014 at 9:48 am #113778jenglish647MemberLauren, I got ya'! I'll check out the link and know for next time 🙂
Ahhh and Mr. Dalton,
There's really no need to try to make me feel stupider than I already feel 😉 BUT on the brighter side it's the supercilious tone in your latest post that drove me nuts enough to think even harder. It finally JUST HIT ME that apparently since I am using the Sandbox Starter theme, that particular code doesn't work with that theme so when I switched themes to the Sample Child theme it did work. I'm sorry I didn't realize that the code you gave there in option 2 was just for the Sample Child theme. Indeed it does work when I switched to that theme. SO, for the sake of keeping my sanity I'll just use the Sample Child theme and move on with life and forget all about old Sandbox until one day I learn all of this code language. Have a good day!Thank ya'll both for your help. I appreciate it!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.