Adding extra sidebars…

  • LJagermaster

    (@the-living-legend)


    14 years, 1 month ago

    I would have added this to the thread it relates to, howver someone decided to close it :-/

    Anyway, although WP has gotten a little more advanced as of late it’s still possible to add extra sidebars by manually adding code to files, and the code I’ll be referring to is sitting inside this thread.

    At the time I was adding it a theme that used a block of colour for the footer, so there were no issues with its extensibility, however my most recent project is using a theme that has an image file as the background of the footer, and I quickly discovered that adding the above code didn’t really produce a functional footer bar. And today it hit me, what about taking the code I’d put into the “footer.php” and adding it to the other files – index.php, page.php and single.php?

    So I tried it and…well see for yourself (it works! ?? ). You’ll notice that if you click on any page, or a post or even a category or archive page that there’s a nifty footer bar working away at the bottom of each of them.

    So – if you place the code intended for the “footer.php” (using the code from the post above) in between the “<?php get_sidebar(); ?>” and “<?php get_footer(); ?>” lines of the 3 files, your new footer bar should still work perfectly. In my example the code looks like:

    <?php get_sidebar(); ?>

<div id="subfooter">
    <div class="FooterLeft">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterLeft') ) : ?>
			<?php endif; ?>
    </div>	

    <div class="FooterCenter">
        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterCenter') ) : ?>        <?php endif; ?>
	</div>	

    <div class="FooterRight">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterRight') ) : ?>
			<?php endif; ?>
    </div>	

    <div class="FooterExtremeRight">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('FooterExtremeRight') ) : ?>
			<?php endif; ?>
    </div>

</div>

<?php get_footer(); ?>

    Theoretically, the base code could then be adapted and used to create an infinite number of extra sidebars allowing for a much more flexible design for those who are making a site heavily reliant on widgets. I haven’t tried this theoretical part so no guarantees though… ??

Viewing 10 replies - 1 through 10 (of 10 total)

  • I’ve been using this approach to add widgets all over the place in page & post templates for ages. Sorry but there’s nothing really new about the method.

    Thread Starter LJagermaster

    (@the-living-legend)

    I’m aware of that, but there will be a lot of people who haven’t thought of it, or like I was until today too cautious to try it out. It was only intended to inform others ??

    Thanks, Legend, for the permission to get outside the box! i was curious about whether moving tags from one file to another would “break” something… your collaborative spirit is appreciated.

    Perhaps, Esmi, you could share some of your tips & tricks too, since you seem to be an old hand.

    Thread Starter LJagermaster

    (@the-living-legend)

    No worries ?? It’s no secret that WordPress is one of them most temporamental blogging/cms tools around, I’ve personally had to abandon a number of projects and restart from scratch using a different cms tool because of some “little” issue in wp causing a catastrophic error on the front-end, but in this case at least there are no issues to be concerned about as long as the code isn’t wonky ??

    And yeah, esmi, the main point of this forum is to share information to help others so by all means fire up your ideas and experiences for us to have a look at (if you already have some threads here feel free to post a few links ?? )…

    That’s what blogs are for – at least mine is.

    Thread Starter LJagermaster

    (@the-living-legend)

    Among other things, I suppose it is :-p

    Anyway, seems this has turned into “I need help with…” thread after all :-/

    I started to get kinda show offy and tried to convert the original code into a “header” bar rather than a footer bar – it worked, mostly, except it pushes the sidebar content down the page (the top of the sidebar contains a hard-coded search box and RSS feed, using part of the background images design as the search button and RSS image – it looks really good, unfortunately though when the content is moved the images remain and it just looks wrong).

    I’d originally placed the sidebar code in the “header.php” file, but after moving it to the 3 files I’d placed the footer code into it yeilds the same results. I then – as a last resort – tried moving the “<?php get_sidebar(); ?>” code above the header bar code but – after the page taking approx. 2-3 minutes to load – as expected the sidebar is restored but both the header bar and the page content are pushed right down to the bottom leaving an acre of emptiness above (I’ve only implemented this last part within the “page.php” so loading the homepage won’t show it – just hit something like this page to see it).

    So – I realise there’s a “new way” of adding additional sidebars to just about every part of a blog/site, but the “explanation” in the codex doesn’t really explain to someone who isn’t a developer how to actually do it (ie. describe exactly what code the additional files should contain), so it’s not a method I’d feel comfortable with attempting. Does anyone know of a clear way to implement “header” bars (basically just a footer bar that appears between the header and page content) without messing up the sidebar display, preferably using the code I’ve already got in place?

    Thanks in advance…

    P.S.
    Esmi, I’ll have a look at your site when I get a chance (too many projects, not enough time) but if you can think of something that would help I’d really appreciate it ??

    I don’t think there’s a generic, one-size-fits-all, solution here. So much is going to depend upon what’s in the new sidebar and how the initial design was constructed. I appreciate that this does sound like a cop-out but, in my experience, you end up having to approach each design/situation individually. Yes – there’s the odd bit of code of piece of CSS that you can re-use but, 9 times out of 10, it needs tweaking to fit into the new design.

    A sidebar that’s slowing a page download down to 2-3 minutes is definitely not right. Did it contain any javascript? Was the markup and CSS valid? Sounds like the browser is struggling badly with something. I’ve never come across such a severe issue myself and I’ve had sidebars (or widget blocks) at the very top of the header, to the side of the header, in the page content, in the footer etc etc.

    Thread Starter LJagermaster

    (@the-living-legend)

    The code used is identical to the block I posted above, except all refernces to “footer” have been replaced by “header”. And today the “slow-down” effect doesn’t seem to occur so maybe it was just a short-lived effect.

    I came across a possible solution last night, unfortunately it was on my phone so I’ll have to search for it again but once I track it down I’ll give it a try and post my results…

    Thread Starter LJagermaster

    (@the-living-legend)

    Turns out the possible solution wasn’t what I’d thought and wouldn’t work with my site, however simple common sense and attention detail won the day as I’ve managed to work it out (this should work in almost any standard theme).

    In the index.php, page.php and single.php files (assuming you want a side-wide sidebar) look for the lines:

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

    and place the above “subheader” code between those lines. In my example it looks like this:

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <div id=”subheader”>
    <div class=”HeaderLeft”>
    <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘HeaderLeft’) ) : ?>
    <?php endif; ?>
    </div>

    <div class=”HeaderCenter”>
    <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘HeaderCenter’) ) : ?> <?php endif; ?>
    </div>

    <div class=”HeaderRight”>
    <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘HeaderRight’) ) : ?>
    <?php endif; ?>
    </div>

    <div class=”HeaderExtremeRight”>
    <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘HeaderExtremeRight’) ) : ?>
    <?php endif; ?>
    </div>

    </div>

    <div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

    The bold code shows where you should place your code if it’s different.

    Hope this helps folk ??

    Thread Starter LJagermaster

    (@the-living-legend)

    MAJOR CORRECTION!!

    Regarding adding header bars (as in the post immediately before this one), I’ve just discovered that the method above will add those header bars above every post that’s fired up, so if you want to widgetise POST HEADERS then use that method, however, if like me you just want them near the top of the page, the “headerbar” code should go directly below the “<div id=”content”>” line, for example:

    <?php get_header(); ?>
<div id="content">

		<div id="subheader">
    <div class="Article Headbar">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Article Headbar') ) : ?>
			<?php endif; ?>
    </div>

    <div class="HeaderLeft">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('HeaderLeft') ) : ?>
			<?php endif; ?>
    </div>	

    <div class="HeaderCenter">
        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('HeaderCenter') ) : ?>        <?php endif; ?>
	</div>	

    <div class="HeaderRight">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('HeaderRight') ) : ?>
			<?php endif; ?>
    </div>	

    <div class="HeaderExtremeRight">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('HeaderExtremeRight') ) : ?>
			<?php endif; ?>
    </div>

</div>

    This, like before, should be added to the “index.php”, “page/php” and “single.php” files of your theme (or whichever of the areas you want it to appear on if not the entire site)…

    I now realise how obvious a mistake my first attempt was, since “<div id=”content”>” indicates where the page content appears, but live and learn I guess… ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Adding extra sidebars…’ is closed to new replies.