Skip to Main Content
Sidebar Snips Hero Image

Better Sidebar Organization

I’m currently working on a large site and have been doing some fun things with the code and stretching my skills with ExpressionEngine. I’ve actually got another tutorial half written, and will be publishing that shortly.

I’m currently working on a large site and have been doing some fun things with the code and stretching my skills with ExpressionEngine. I’ve actually got another tutorial half written, and will be publishing that shortly.

On this site most pages have a sidebar with many of the pages sharing elements across the sidebar, but not all elements available on every page. As I was building the sidebar template it had gotten rather large, difficult to read and overly complex due to a number of advanced conditionals checking on segment_x.

This morning I took a few minutes and reevaluated what I was doing and came up with a much better approach. The new approach is much more flexible going forward and much easier to read in the backend as well.

Now each template has a single embed {embed="embeds/.sidebar"} that pulls in the sidebar. You might be thinking that embeds are bad and slow and you would be correct if overused, but on this site I only have a single embed on each page and I feel that the benefits far outway and disadvantages that may occur. If I could I would use snippets but it’s not possible to nest snippets inside other snippets so I’m limited to this approach.

Here is my current sidebar embed template:

    
    
      {!--about--}
{if segment_1 =="about"}
   {if segment_2 !="50th-anniversary-of-rawhide"}
      {snip-about}
      {snip-dogcare}
      {snip-contest}
      {snip-matchmaker}
   {/if}

   {if segment_2 =="50th-anniversary-of-rawhide"}
      {snip-youtube-contest}
   {/if}
{/if}

{!--dog care--}
{if segment_1 =="dog-care"}
   {snip-dogcare}
   {snip-about}
   {snip-tricks}
   {snip-matchmaker}
{/if}

{!--contest--}
{if segment_1 =="contest"}
   <h3>Contest Winners</h3>
   {exp:channel:entries channel="winners" dynamic="no" limit="1" disable="member_data|pagination"}
      <h4 class="winner-month">{title}</h4>
      <ul class="popular winner">
         {contest-winners}
         <li>
            {exp:ce_img:pair src="{winner-photo}" height="50" width="50" crop="y" allow_scale_larger="n"}
               <img src="{made}" alt="image description" width="{width}" height="{height}" class="winner-pic"/>
            {/exp:ce_img:pair} 
            <p>{winner-name}</p>
         </li>
         {/contest-winners}
      </ul>
   {/exp:channel:entries}
{/if}

{!--Pawsome Tricks--}
{if segment_1 =="tricks"}
   {snip-tricks}
   {snip-tricks-archives}
   {snip-contest}
   {snip-matchmaker}
{/if}

{!--Retailers--}
{if segment_1 =="retailers"}
   {snip-about}
   <h3><a href="/products/">Our Products</a></h3>
   <h3><a href="/shop/">Shop Online</a></h3>
   {snip-matchmaker}
{/if}

</aside>
<!-- sidebar closing -->

As you can see each section of the site is controlled by a simple conditional checking on segment_x and each part of the corresponding sidebar is now a segment which can be re-ordered very easily by moving it up or down in order. The sidebar embed is very easy to read and find the sections that need to have pieces add or deleted. It also keeps means that it’s very easy to edit a particular section of code and have it reflected across the whole site.

If anyone has comments or thoughts on a different approach or a way to improve this one please do let me know.