This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Creating a widget for the top right header

  • Creator
    Topic
  • #17618
    dklahre
    Participant

    Hello Jason,
    As you can see (http://venturecoffeetalk.com) I was able to create a new widget and place some text in it. The text can be seen in the top center above the logo.

    Put this in the custom CSS but it still stays in the center

    #header-widget-area { float: right; }

    I put this code in functions.php

    function my_header_content() {
    	echo 'This content will show in the header.';
    }
    remove_all_actions( 'themeblvd_header_addon' );
    add_action( 'themeblvd_header_addon', 'my_header_content' );
    
    
    register_sidebar( $args ); 
    
    dynamic_sidebar( $index ); 
    
    
    themeblvd_add_sidebar_location( 'my_new_location', 'My New Location', 'collapsible' );
    
    
    function display_my_new_location() {
        echo '<div class="my-new-widget-area">';
        themeblvd_display_sidebar( 'my_new_location' );
        echo '</div>';
    }
    add_action( 'themeblvd_before', 'display_my_new_location' );

    I couldn’t put this code into functions.php because everything crashes

    /**
     * Add new sidebar location.
     */
    themeblvd_add_sidebar_location( 'my_header_widget_area', 'My Header Widget Area', 'collapsible' );
    
    /**
     * My header content
     */
    function my_header_content() {
    	echo '<div id="header-widget-area">';
    	themeblvd_display_sidebar( 'my_header_widget_area' );
    	echo '</div>';
    }
    remove_all_actions( 'themeblvd_header_addon' );
    add_action( 'themeblvd_header_addon', 'my_header_content' );

    I believe there may be a typo in this code that was provide or I’m just not getting something.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Author
    Replies
  • #17619
    dklahre
    Participant

    I have also changed the CSS to

    #my-new-widget-area { float: right; }

    but no change.

    #17620
    Jason Bobich
    Keymaster

    Hello,

    If you wanted to float this widget area to the right, you’d do this:

    .my-new-widget-area { float: right; }

    The following would not work because you do not have an ID on the div anywhere that is called “header-widget-area”

    #header-widget-area { float: right; }

    And the following wouldn’t work because you’ve added “my-new-widget-area” as a class to your outputted DIV, and not an ID.

    #my-new-widget-area { float: right; }

    In constructing a CSS selector, you prefix a class name with a period (.) and an ID with a pound sign (#).

    Also note that you’ve hooked your widget area to “themeblvd_before” and not “theme_header_addon” (which is what I think you meant to do) — So, when you do get it floated right, it’s going to look like this:

    See screenshot: http://www.uploadblvd.com/uploads/image_53b7af77948d8.png

    I believe there may be a typo in this code that was provide or I’m just not getting something.

    There is no typo in the code you’re referencing, that I can tell. It’s all working on my end.

    I couldn’t put this code into functions.php because everything crashes

    If you’re going to be doing PHP development on you site, I’d suggest turning on WP_DEBUG on your site while you’re developing. To see your site have “everything crash” with just a white screen is not any way troubleshoot. You’ll be running around in circles forever. If you turn on WordPress’s WP_DEBUG, it’ll enable PHP errors to display on your server. This way, when you have a PHP error, you’ll know exactly what line in your functions.php it’s at.

    http://codex.wordpress.org/Debugging_in_WordPress

    Just go into the wp-config.php file of your WordPress set and set WP_DEBUG to true.

    Additionally, the following two lines in your functions.php are not needed and contain incorrect PHP code. You should delete the following from your functions.php file.

    register_sidebar( $args );

    … The above is how you register a sidebar in WordPress. However, since you’re using themeblvd_add_sidebar_location(), this is already being done for you. Also, you’re not using the function correctly because your $args variable isn’t established with any arguments to pass to the function. This is the type of thing that will cause an error.

    dynamic_sidebar( $index );

    … And calling dynamic_sidebar() isn’t something you want to do here. You’ve got it randomly called in your functions.php. This is a function used in WordPress for displaying a sidebar. Calling this where you are would theoretically cause the sidebar to display before the HTML of the page is even constructed. However, similar to the last bit, the $index variable you’re passing into the function does not exist. So, no sidebar to display, and this can cause an error because you’re trying to reference a variable that doesn’t exist.

    Note that within your function display_my_new_location(), this is the place where if you were going to use dynamic_sidebar(), you would use it. However, since you’re using themeblvd_display_sidebar(), you don’t need to.

    #17622
    dklahre
    Participant

    Thanks Jason,
    The following is my new code in the functions.php file

    /**
     * My header content
     */
    function my_header_content() {
    	echo 'This content will show in the header.';
    }
    remove_all_actions( 'themeblvd_header_addon' );
    add_action( 'themeblvd_header_addon', 'my_header_content' );
    
    
    
    themeblvd_add_sidebar_location( 'my_new_location', 'My New Location', 'collapsible' );
    
    
    function display_my_new_location() {
        echo '<div class="my-new-widget-area">';
        themeblvd_display_sidebar( 'my_new_location' );
        echo '</div>';
    }
    add_action( 'themeblvd_before', 'display_my_new_location' );

    In the code below, I substituted (themebldd_before) with (theme_header_addon)
    as you suggested but that erased the text that I put into the new location
    widget

    themeblvd_add_sidebar_location( 'my_new_location', 'My New Location', 'collapsible' );
    
    function display_my_new_location() {
        echo '<div class="my-new-widget-area">';
        themeblvd_display_sidebar( 'my_new_location' );
        echo '</div>';
    }
    add_action( 'theme_header_addon', 'display_my_new_location' );

    I changed the CSS to the following but the area doesn’t move to the right

    .my-new-widget-area { float: right; }

    #17623
    Jason Bobich
    Keymaster

    I changed the CSS to the following but the area doesn’t move to the right

    It’s working. Do a hard re-fresh on your browser or clear your browser cache.

    With your functions.php, try not to just copy/paste, but understand the code you’re using. Try to read what’s going in there, understand, and learn. Understand what a function is in PHP, and understand how add_action works, why you’re using it, and that you’re passing in a specific action and name of a callback function that you’re creating.

    http://codex.wordpress.org/Function_Reference/add_action

    And try to look at the details; for example, in the code snippet you just referenced you have action “theme_header_addon” instead of “themeblvd_header_addon”.

    Now that I understand what you’re doing, let me give you a starting point. Replace all of this:

    /**
     * My header content
     */
    function my_header_content() {
    	echo 'This content will show in the header.';
    }
    remove_all_actions( 'themeblvd_header_addon' );
    add_action( 'themeblvd_header_addon', 'my_header_content' );
    
    
    
    themeblvd_add_sidebar_location( 'my_new_location', 'My New Location', 'collapsible' );
    
    
    function display_my_new_location() {
        echo '<div class="my-new-widget-area">';
        themeblvd_display_sidebar( 'my_new_location' );
        echo '</div>';
    }
    add_action( 'themeblvd_before', 'display_my_new_location' );

    With this:

    /**
     * Remove Alyeska'a default header addon
     */
    remove_action( 'themeblvd_header_addon', 'alyeska_header_addon' );
    
    /**
     * Display custom content in the header addon
     */
    function my_header_content() {
    	echo 'This content will show in the header.';
    }
    add_action( 'themeblvd_header_addon', 'my_header_content' );
    
    /**
     * Create a new sidebar location
     */
    themeblvd_add_sidebar_location( 'my_new_location', 'My New Location', 'collapsible' );
    
    /**
     * Display that new sidebar area in the header addon
     */
    function display_my_new_location() {
        echo '<div class="my-new-widget-area">';
        themeblvd_display_sidebar( 'my_new_location' );
        echo '</div>';
    }
    add_action( 'themeblvd_header_addon', 'display_my_new_location' );
    #17626
    dklahre
    Participant

    That was amazingly helpful…. thank you.

    #17657
    dklahre
    Participant

    I’ve spent a lot of time altering my functions.php code and have come up with the
    right positioning for my follow social buttons above the centered logo. Looks
    pretty good for cell phones

    http://postimg.org/image/mj91p1y37/

    But on tablets and computers, the buttons are pushing the logo over to the left

    http://postimg.org/image/6ak37grf7/

    I’m confused because this css snippet is not inside “header-content-inner”

    .my-new-widget-area { float: right; margin: 0px 15px 0px 0px; }

    Rather, it’s floating above somewhere inside the header. I’m going through this coding process because everyone uses Feedly nowadays and that’s not available in the theme’s social media button array.

    #17660
    dklahre
    Participant

    It’s funny that hover doesn’t work over the buttons when the browser width is too small.

    #17663
    Jason Bobich
    Keymaster

    That’s just how a floated element interacts with the proceeding HTML. In this case, floating your content would make more sense if it was in the same container with the logo.

    It sounds like you probably want to use absolute positioning.

    .my-new-widget-area {
    	position: absolute;
    	top: 10px;
    	right: 10px;
    }

    And then when you get to mobile, your icons will appear behind the logo. So you may want to just center the content or something.

    @media (max-width: 767px) {
    	.my-new-widget-area {
    		position: static;
    	}
    	.my-new-widget-area .textwidget > div {
    		margin-right: auto;
    		margin-left: auto;
    	}
    }
    #17665
    dklahre
    Participant

    I’ve hashed out the code for about 2 hours and found that that using absolute positioning is necessary before toggling to static positioning. However, with static positioning, I can’t click on the media buttons.

    .my-new-widget-area {
    position: absolute;
    top: 10px;
    right: 10px;
    }

    When toggling to static positioning, there’s absolutely no way to center the buttons. I’ve tried text-align / margin: 10px auto / float: center/ taking out “right: 10px”
    but nothing works. The buttons become elevated and stick to the left of the browser. However, the buttons can be clicked.

    .my-new-widget-area {
    position: static;
    top: 10px;
    right: 10px;
    }

    From a functionality standpoint, just using the second snippet alone works great, but the buttons need to start out on the right edge of the browser.

    #17666
    dklahre
    Participant

    For the first paragraph, I meant to say “with absolute positioning, I can’t click on the media buttons.”

    #17669
    Jason Bobich
    Keymaster

    In HTML, all elements are static by default. So when you put the position to static, you’re just putting it back the way it was by default — i.e. turning off absolute positioning.

    There are several ways to center the icons. I showed you one way above by targeting your DIV with fixed width that directly surrounds the icons and setting the left and right margin to auto. Note this will only work if a DIV has a fixed width and isn’t floated.

    By default a DIV is 100% width, and thus cannot be centered without fixed width by setting left/right margin to auto.

    In regards to not being able to click the buttons, just set a z-index.

    .my-new-widget-area {
    	position: absolute;
    	top: 10px;
    	right: 10px;
    	z-index: 1;
    }
    @media (max-width: 767px) {
    	.my-new-widget-area {
    		position: static;
    	}
    	.my-new-widget-area .textwidget > div {
    		margin-right: auto;
    		margin-left: auto;
    	}
    }

    The direct result on your site of the above:

    Desktop/Tablets: http://www.uploadblvd.com/uploads/image_53bc4ce9e103a.png

    Mobile: http://www.uploadblvd.com/uploads/image_53bc4cc7a4d69.png

    #17672
    dklahre
    Participant

    Well, that fixed everything. With a little more tweaking, my platform is done and my marathon for the next couple years has gone into full gear. Thanks for your help and all the best!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.