ThemeShaper Forums » Thematic

[closed]

Adding non-widget content to sidebars (asides)

(3 posts)
  • Started 8 years ago by krowchuk
  • Latest reply from bigdanprice
  • This topic is not a support question

Tags:

  1. In the spirit of giving back to the community as a way of saying thanks, I am posting a solution that I have used to an issue that had me stumped for a long time. I hope that somebody will find this useful!

    While switching my old theme over to Thematic I wanted to be able to place non-widgetized functions into the main and secondary asides (sidebars) above and below any widgets that I might use in those sidebars. While I am using a 3 column (primary aside to left, content in middle, secondary aside to the right) layout, the information below could prove to be useful for other layouts as well.

    Like most things in Wordpress and Thematic, there are several ways to accomplish this. I am not very well versed in php and barely competent in css, (but wish to learn and get better at both!) so my method that I finally settled on may not be the best for you. Likewise, if anyone can share a method that would accomplish this in a better way, I would love to learn about it.

    So, to begin;

    I wanted to be able to place the thumbnail at the top of the primary aside (in 3col layout this is the left sidebar) and my current theme uses a custom field for the caption below the thumbnail image.

    Below these items I wished to be able to add any widget I might need in the future.

    The code I use in my old theme to display this:

    <div class="sidebar widesidebar">
      <?php echo get_the_post_thumbnail($wp_query->post->ID); ?>
        <div id="thumb-caption">
          <h2>
            <?php echo get_post_meta($post->ID, 'thumb_caption', true); ?>
          </h2>
        </div><!-- end thumb-caption -->
    
    <?php if (!function_exists('dynamic_sidebar') ||
             !dynamic_sidebar('wide')) : ?>
    <?php endif; ?>
    
    </div><!--end sidebar-->

    This presented a challenge to my Thematic "remodeling" adventure, since I was still stuck in my old way of thinking, that is, to simply customize the code inside the sidebar. There was not an (apparently) easy way to do this in Thematic without either;

    a-) over riding the entire aside with a child aside

    or...

    b-) using a plugin that allows you to place and execute custom php into a widget and then place that widget into the sidebar.

    I actually decided to try "option b" but quickly abandoned that when it didn't quite work so well with multiple copies of the widget in the same sidebar.

    I really wanted to do this the "Thematic" way! Without even really knowing yet what that is...

    My first attempt was to create a function using an action hook into thematic_abovemainasides().

    // Thumbs and custom field
    function thumbnail() {
    ?>
    <div id="above-aside">
      <ul>
        <?php $postid = get_the_ID(); ?>
        <?php the_post_thumbnail(); ?>
          <div class="thumb-caption">
           <h3>"<?php echo get_post_meta($postid, 'thumb_caption', true); ?>"</h3>
          </div><!-- end thumb-caption -->
      </ul>
    </div><!-- end above-aside -->
    <?php
    }
    add_action('thematic_abovemainasides', 'thumbnail');

    I was on the right path as it turns out, however, I created a css styling nightmare! The first thing it did was break my lovely 3 column layout! I managed to fix that when it was suggested that I needed to give my div the same classes as the primary aside.

    // Thumbs and custom field
    function thumbnail() {
    ?>
    <div id="primary" class="aside main-aside">
      <ul>
        <?php $postid = get_the_ID(); ?>
        <?php echo get_the_post_thumbnail(); ?>
          <div class="callout-caption">
           <h3>"<?php echo get_post_meta($postid, 'callout_caption', true); ?>"</h3>
          </div><!-- end callout-caption -->
      </ul>
    </div><!-- end primary main aside -->
    <?php
    }
    add_action('thematic_abovemainasides', 'thumbnail');

    Beautiful! I thought the problem was solved, and it would have been if I didn't need to place a widget into the primary aside. The lesson to be learned here was that any content that you action hook into the thematic_abovemainasides() appears above the main asides, completely outside of the div containing the aside. In this case;

    <div id="primary" class="aside main-aside">
      <!-- Thumb and custom field display in here -->
    </div><!-- end primary, aside, main-aside -->
    
    <div id="primary" class="aside main-aside">
      <!-- widgets display in here -->
    </div><!-- end primary, aside, main-aside -->

    Aside from producing invalid html code (#primary -> twice) this created a css styling nightmare where the second primary div overlapped the first and I could not figure out how to place it correctly below the first one. Besides, what I really wanted was the thumb and custom field "inside" the primary aside, not above it!

    Like this;

    <div id="primary" class="aside main-aside">
      <!-- Thumb and custom field display in here -->
      <!-- widgets display in here -->
    </div><!-- end primary, aside, main-aside -->

    You could simply take option b- and install a plugin to execute your php inside a widget and drag that into the primary aside from the widgets area of dashboard, but what if you want to display a custom field or function below any widgets in that aside?

    The solution is to think outside of the box, or div as it may be in this case!

    Thematic has numerous action hook areas, indeed there is one called thematic_betweenmainasides() and another called thematic_belowmainasides()

    What this allowed me to do was to create a "primary wrapper" container so to speak, by opening the wrapping div in thematic_abovemainasides and closing it in the thematic_betweenmainasides like this:

    // Add wrap div into the primary aside using abovemainasides and belowmainasides
    function wrap_aboveprimary() {
    ?>
      <div id="primary-wrap" class="aside main-aside">
        <ul>
          <?php $postid = get_the_ID(); ?>
          <?php echo get_the_post_thumbnail(); ?>
            <div class="thumb-caption">
           	  <h3>"<?php echo get_post_meta($postid, 'thumb_caption', true); ?>"</h3>
          	</div><!-- end thumb-caption -->
          	</ul>
    <?php
    }
    add_action('thematic_abovemainasides','wrap_aboveprimary');
    
    function wrap_belowprimary() {
    ?>
      </div><!-- end primary-wrap -->
    <?php
    }
    add_action('thematic_betweenmainasides','wrap_belowprimary');

    now all you need to do is to style it, copy the #primary css selectors and paste them into #primary-wrap, then change the #primary margin to 0, like this (your widths, margins and paddings may differ);

    #primary {
    	border:none; /* remove default border */
    	float: left;
    	margin: 0;
    	width: 340px;
    	padding: 7px 0 0;
    	}
    
    #primary-wrap {
    	float: left;
    	margin: 0 0 0 -940px;
    	width: 340px;
    	padding: 7px 0 0;
    	}

    There it is, a thing of Thematic beauty! My "Aha - Thematica!" moment!

    The thumb and custom field appears above the primary asides widgets in exactly the same place as I wished, top of the left aside. They "appear" to be inside the aside, but in reality they are inside a div that wraps the complete aside.

    We could take this a few steps further now, adding more custom fields or functions below the widgetized area of the primary aside, such as;

    // Add wrap div into the primary aside using abovemainasides and belowmainasides
    function wrap_aboveprimary() {
    ?>
      <div id="primary-wrap" class="aside main-aside">
        <ul>
          <?php $postid = get_the_ID(); ?>
          <?php echo get_the_post_thumbnail(); ?>
            <div class="thumb-caption">
           	  <h3>"<?php echo get_post_meta($postid, 'thumb_caption', true); ?>"</h3>
          	</div><!-- end thumb-caption -->
          	</ul>
    <?php
    }
    add_action('thematic_abovemainasides','wrap_aboveprimary');
    
    function wrap_belowprimary() {
    ?>
      <ul>
        <li><?php if(function_exists('echo_ald_crp')) echo_ald_crp(); ?></li>
        <li><?php if(function_exists('echo_ald_wherego')) echo_ald_wherego(); ?></li>
      </ul>
      </div><!-- end primary-wrap -->
    <?php
    }
    add_action('thematic_betweenmainasides','wrap_belowprimary');

    Where I have added some calls to 2 of my favourite related post plugins that don't have widgets.

    And of course you could take this one step further to include some custom content at the top and bottom of Secondary aside as well. Open your div in thematic_betweenmainasides and close it in thematic_belowmainasides. I haven't tested this yet, but it seems to me that the same magic could occur!

    Have fun!

    Chris

    Posted 8 years ago #
  2. Wow, Chris

    Thanks for giving this back! You have provided a really cool possible solution to my own situation. I have a bit of code via functions.php that shows above the content. It now needs to go into the sidebar, but there's no widget for this thing.

    This is a very appealing solution, Thematic-friendly, and an interesting story too!

    I will have to see if you keep a blog somewhere.

    Thank you for the technique -- now to try it...

    Posted 7 years ago #
  3. Great stuff, its the beauty of hooks and thematic!

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.