14
Simple, Dynamic, User Controlled Page Layouts
This is actually more of a tip than a tutorial, but I thought some of you would appreciate it either way. One of my more recent clients (blogthemesplus.com) had a requirement for his theme that I was designing to have dynamic user controlled page layouts. Similar to BestWebGallery.com (one of my favorite site’s), he basically wanted 3 different ways to display content on his main page that was dynamic and easily controlled by his users.
The Solution is Simple
The solution to this problem is actually much easier than you might think at first glance. There is a nifty little WordPress plugin called “Theme Switcher” that gets the job done in about 5 minutes by duplicating your theme and changing the home.php file for each layout style. In this case I had to design 3 different home page (home.php) templates using the layouts defined by my client. One page featuring just thumbnails, one with thumbnails and a short description and finally one with large, full width thumbnails. What you end up with is 3 copies of the same theme with 3 different home.php files. Make sure each theme copy has a slightly different name in within the stylesheet. You could also, change the properties for search results and indexing as well. Basically the possibilities are endless since you are working with 3 separate theme folders.
Finally… You will just need to add some buttons which will enable your users to switch between themes. For BlogThemesPlus.com, I created three very simplistic buttons similar to BestWebGallery.com. Simple is better (in my opinion) for what we are trying to accomplish here. Next, all you have to do is link each button using the “Theme Switcher” parameters. I have provided an example below for your reference.
<div id="themeswitch">
<img src="<?php bloginfo(’template_directory’); ?>/images/theme1.gif" alt="Theme1" />
<a href="<?php bloginfo(’url’); ?>/index.php?wptheme=Gallery2"><img src="<?php bloginfo(’template_directory’); ?>/images/theme2off.gif" alt="Theme2" /></a>
<a href="<?php bloginfo(’url’); ?>/index.php?wptheme=Gallery3"><img src="<?php bloginfo(’template_directory’); ?>/images/theme3off.gif" alt="Theme3" /></a>
</div>
What you end up with is a very cool feature giving your users a choice as to how they would like your content to be displayed. Check out BlogThemesPlus.com or BestWebGallery.com for a full demo. After I finished the BlogThemesPlus.com theme, I actually realized that BestWebGallery.com uses the exact same solution. This is one of those things that once you figure it out, you can’t believe how simple it is to do.
On a totally separate note… if you click through to one of the single post pages on BlogThemesPlus.com, you will notice that I had to integrate a fully automated version of Galleria, which is a very cool thumbnail gallery. I am looking into creating a plugin for Galleria soon. One of the many things on my list of “to do’s”.
14 Responses to “Simple, Dynamic, User Controlled Page Layouts”
Leave a Reply
June 5th, 2008 at 10:22 am
Nice! I was curious how you were going to tackle that with your “BestWebGallery-inspired” theme. I really like the client site, btw. The “logo” or title of the site isn’t aliased for some reason but it’s an image…. I don’t know if that was on purpose or the clients logo or a placeholder…. Sorry, I know I’m being picky, but it’s a great site design/layout, sad to see the logo so clunky.
Great work and thanks for the tip!
June 5th, 2008 at 10:31 am
@JayR… Yeah, I was wondering about the logo also on BlogThemesPlus.com. In this case, I wasn’t asked to design a logo for him.
June 5th, 2008 at 10:41 am
Shame.
June 5th, 2008 at 11:08 am
Yep…
June 5th, 2008 at 12:19 pm
Jason…
Thanks for linking to my site in the tip. I realize that the logo is poorly designed (I don’t have Photoshop, etc.), but will have a logo professionally designed within the next 2 weeks.
The Galleria script plugin for WordPress was just created - here.
June 5th, 2008 at 2:06 pm
@Kevin …. Good news! Glad to hear it! Great site as I’ve already found some great new themes and WordPress information. Keep it up!
June 5th, 2008 at 2:07 pm
@Kevin…. and you should have Jason do it! He ROCKS!!!
June 5th, 2008 at 2:09 pm
@Kevin… One less thing I have to do. Thanks for the link.
June 8th, 2008 at 4:59 am
This is a great idea, I too really love bestwebgallery. I think I might incorporate this into my next theme.
June 8th, 2008 at 1:43 pm
Hi Jason, this is something I’ve been thinking about doing with my own gallery, so it was fantastic that you’ve explained how to do it here. Thanks for saving me a few hours of head-scratching.
June 9th, 2008 at 9:42 am
@PJ… Good to hear. More tutorials coming soon.
June 16th, 2008 at 5:23 pm
any idea when hulu is coming out?
July 20th, 2008 at 9:11 am
Great …. thnx
August 4th, 2008 at 8:01 am
Думаю всем понравится.