WordPress.org

Ready to get started?Download WordPress

Forums

Create 3 horizontal boxes between menu and container (16 posts)

  1. stuartirene
    Member
    Posted 3 years ago #

    Hi, does anyone know how to create 3 horizontal boxes between menu and container (content & widget), which is like having a horizontal widget area on top? Please refer to the example webiste: http://www.fotobeginner.com/

    Please help! Many thanks.

  2. alchymyth
    Forum Moderator
    Posted 3 years ago #

    where is the problem:

    - creating the html/css structure?
    - or the code the make the box content dynamic ready for widgets?

    in both cases, it might help if you could paste the code of (probably) header.php into a http://wordpress.pastebin.com/ and post the link to it here.

    http://codex.wordpress.org/Function_Reference/dynamic_sidebar
    http://codex.wordpress.org/Function_Reference/register_sidebars

    for inspiration, look into the code of sidebar-footer.php, functions.php, and and style.css of the new default theme Twenty Ten.

  3. stuartirene
    Member
    Posted 3 years ago #

    Hi alchymyth,

    Thanks for your reply. I'm currently using Twenty Ten and thought of having 3 horizontal boxes like those in http://www.fotobeginner.com/ on the top before the usual container in Twenty Ten starts.

    As I'm not familiar with coding and not sure of where shall I start, so can anyone please guide me through or point me to the right path inorder to create those boxes? Many thanks.

  4. alchymyth
    Forum Moderator
    Posted 3 years ago #

    basically, look into the code in Twenty Ten, and see how they have done this with the footer widget area.

    it is more-or-less a copy/paste with changing each reference to 'footer', in the text and code, to 'top'; and reducing it to three widgets ;-)

    step-by-step:
    1.
    edit header.php:
    after the last line (shown below as well), add:

    <div id="main">
    
    <?php
    	/* A sidebar on top of the content? Yep. You can can customize
    	 * your top with three columns of widgets.
    	 */
    	get_sidebar( 'top' );
    ?>

    2.
    make a copy of sidebar-footer.php and save it under the name of sidebar-top.php;
    edit it to change all references to 'footer' into 'top'; reduce widgets to three;
    the code should look like: http://wordpress.pastebin.com/VcFQR8Ph

    3.
    edit functions.php;
    locate the registration for the dynamic sidebar of the footer;
    copy the area, paste it just below the copied codes, make sure it is within the right location, and edit all references to 'footer' into 'top' matching the terms used in sidebar-top.php;
    the new area should look like this: http://wordpress.pastebin.com/DS5cJXbL
    in the context of the whole functions.php as ref: http://wordpress.pastebin.com/XLbTebec

    4.
    add new styles for the top widget area to style.css;
    again, using the ones for the footer widget area as a guide;
    these styles might be, for instance: http://wordpress.pastebin.com/7gqXjAgc

  5. stuartirene
    Member
    Posted 3 years ago #

    Hi alchymyth,

    Thanks for your reply. Just wondering after setting up these 3 sidebar top widgets, can i still monitor them via "Widget" in admin cp? Thanks.

  6. alchymyth
    Forum Moderator
    Posted 3 years ago #

    don't wonder - either try it or study the code suggestions i made.

    answer is: yes.
    screenshot

  7. Digital Raindrops
    Member
    Posted 3 years ago #

    @alchymyth your reply made me smile :) :)

    David

  8. thehomeground
    Member
    Posted 3 years ago #

    I was looking to do exactly what @alchymyth and @adeptris have described here and, after some trial and error (this was my first php editing) managed to create the top widget area. So, thanks to both of you!

    But, I would really like it to be on top of my header. I've looked around in the code but don't understand enough of the language to find the spot or even know what to tell it if I did find the place to edit. Can anyone help me on this?

    Website : http://thehomeground.com/blog

    Thanks so much!
    Brittany

  9. thehomeground
    Member
    Posted 3 years ago #

    Edit to my last post:

    I moved the widget area to be on top of the header. Now, if possible, it needs to replace the tagline area. I want it to be on the same line as the blog title. Is there a way to move it over there?

    Second, rather than being spread out across the top, the three widget areas are stacked on top of each other. How can I fix this? My end goal is to have a set of image links (a href with img src html using the text widget, similar to the widgets i have on the sidebar already) along the top of the header.

    Any help would be greatly appreciated :)
    Brittany

  10. alchymyth
    Forum Moderator
    Posted 3 years ago #

    Brittany,
    could you paste the code of header.php, functions.php, and the new sidebar fiel int a http://wordpress.pastebin.com/ each and post the three links to these pastebins here?

    also, there is no trace of top widgets in the link you supplied.

    could you add some, to make it easier to see what works and what not?

  11. thehomeground
    Member
    Posted 3 years ago #

    Hi Alchymyth,

    I just titled the three widgets (they're just text), so that you can see them on top of the header.

    header.php : http://wordpress.pastebin.com/8gmknBby

    sidebar-top.php : http://wordpress.pastebin.com/XDhGa6u6

    functions.php : pastebin isn't saving a page with my functions code. I've tried doing it in a different browser, in a new window, everything I can think of. Here is the widget code that I pasted into the functions.php file with context before and after it:

    // Area 5, located in the footer. Empty by default.
    	register_sidebar( array(
    		'name' => __( 'Third Footer Widget Area', 'twentyten' ),
    		'id' => 'third-footer-widget-area',
    		'description' => __( 'The third footer widget area', 'twentyten' ),
    		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    		'after_widget' => '</li>',
    		'before_title' => '<h3 class="widget-title">',
    		'after_title' => '</h3>',
    	) );
    		// Area 6, located in the header. Empty by default.
    	register_sidebar( array(
    		'name' => __( 'Left Top Widget Area', 'twentyten' ),
    		'id' => 'left-top-widget-area',
    		'description' => __( 'The left top widget area', 'twentyten' ),
    		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    		'after_widget' => '</li>',
    		'before_title' => '<h3 class="widget-title">',
    		'after_title' => '</h3>',
    	) );
    
    	// Area 7, located in the header. Empty by default.
    	register_sidebar( array(
    		'name' => __( 'Center Top Widget Area', 'twentyten' ),
    		'id' => 'center-top-widget-area',
    		'description' => __( 'The center top widget area', 'twentyten' ),
    		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    		'after_widget' => '</li>',
    		'before_title' => '<h3 class="widget-title">',
    		'after_title' => '</h3>',
    	) );
    
    	// Area 8, located in the header. Empty by default.
    	register_sidebar( array(
    		'name' => __( 'Right Top Widget Area', 'twentyten' ),
    		'id' => 'right-top-widget-area',
    		'description' => __( 'The right top widget area', 'twentyten' ),
    		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    		'after_widget' => '</li>',
    		'before_title' => '<h3 class="widget-title">',
    		'after_title' => '</h3>',
    	) );
    
    }
    /** Register sidebars by running twentyten_widgets_init() on the widgets_init hook. */
    add_action( 'widgets_init', 'twentyten_widgets_init' );
    
    /**
     * Removes the default styles that are packaged with the Recent Comments widget.
     *
     * To override this in a child theme, remove the filter and optionally add your own
     * function tied to the widgets_init action hook.

    Thanks!

  12. alchymyth
    Forum Moderator
    Posted 3 years ago #

    main issue:
    the widgets are not aligned, because you have not done step 4 in my earlier suggestion:

    4.
    add new styles for the top widget area to style.css;
    again, using the ones for the footer widget area as a guide;
    these styles might be, for instance: http://wordpress.pastebin.com/7gqXjAgc

    functions.php is ok, as you can add widgets in the dashbord.

    there a few validation errors in the code of the linked page:

    http://validator.w3.org/check?uri=http%3A%2F%2Fthehomeground.com%2Fblog%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    which also might have an influence on the display of the page in the browser.

  13. thehomeground
    Member
    Posted 3 years ago #

    It may be helpful to note that this is what I'm hoping for in the end. I imagine the nav links on top to be image links, using the text widget.

    http://thehomeground.com/blog/http://thehomeground.com/blog/wp-content/uploads/2010/10/Screen-shot-2010-10-17-at-11.22.13-PM.png

    Thanks again.

  14. zeaks
    Member
    Posted 3 years ago #

    @alchymyth Works great, thanks for this code.

  15. Nicpearcenrs
    Member
    Posted 3 years ago #

    As I'm not familiar with coding and not sure of where shall I start, so can anyone please guide me through or point me to the right path inorder to create those boxes? Many thanks.
    ..............
    Nic
    [sig moderated as per the Forum Rules]

  16. Zeb
    Member
    Posted 3 years ago #

    I hope to receive some help here to create 1-2 horizontal boxes or widget areas between menu and container.

    However, I have followed the instructions above to create widget areas in Arras theme but it didn't work. The code structure seems very different compare to what is described above.

    Is there any other possibilities to achieve the same result?

    /Z

Topic Closed

This topic has been closed to new replies.

About this Topic