Split Layouts and WordPress

Recently I was reading the article “Understanding the Split Layout in Web Design” on WebdesignTuts+ and since I needed to update the portfolio section on my own website, I thought I would layout the Portfolio entries in the zig-zag pattern they discuss.

The great thing about WordPress and its PHP/MySQL backend is that you can access all the data and manipulate it any way you choose.

For this task, I already had a custom post type where I could enter the description of my Portfolio projects and upload multiple pictures. I decided to create the layout with the featured image and description alternating sides while the extra pictures float below the description.

Here is how I did it:

FYI: I use Eddie Mochado’s Bones template for the creation of all my WordPress themes.

First I created a custom Portfolio page layout my portfolio entries. Then I began to modify the loop on this page.

Now I set up a new query for my custom post type:

<?php $the_query = new WP_Query( 'post_type=custom_portfolio_post_type' ); ?>

Now I modify the loop for my new query:

<?php if ( have_posts() )
{
   while( $the_query->have_posts() )
{
   $the_query->the_post(); ?>

Now I start the layout for posts:

<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
<section class="post-content">

Now I start the layout for odd and even posts:

<?php if ( 0 === $the_query->current_post %2 )
{ 
// do stuff for even posts
?>

Put all your layout html for the even numbered posts here. Depending on your framework, layout your content according to column classes you are using. Once, that is done, we continue on to the odd numbered posts. For example I used the “3col” and “9col” classes to layout the content in my Portfolio.

<?php
// Jump to next post in the loop
continue;
} 
// do stuff for odd posts ?>
}
?>

These posts are using a layout with the columns and content switched from the even posts.

Example:  Odd Posts are 3col -> 9col and Even Posts are 9col -> 3col

That’s it! Now you have zig zagging content and all the work is done for you.

Adding mobile menus to responisve WordPress themes without plugins **UPDATED 4/10/13

The best tool I have found for creating themes in WordPress is the Bones template by Eddie Mochado at Themble.

The latest version of Bones was completely updated using the latest web standards. It has always been an HTML5/CSS3 template. Originally based on the 960 grid, the new version is completely responsive with a twelve column grid based on Twitter bootstrap.

In addition to the new responsive layout, the template comes with both SASS and LESS stylesheets allowing the end user to choose their preferred platform.

I was comfortable with the original template and created many sites with it. Now it was time to jump into the “Responsive” deep end. It has taken some time trying to wrap my head around the whole “mobile first” idea. Previously I let the WP-Touch plugin handle the mobile stuff. Now it was time to build my own site with this latest methodology.

The community that works with Eddie on Github has been great. I have had nothing but extremely helpful interactions in trying to figure out what was going on.

What I was trying to accomplish was to have the main navigation replaced with a drop down menu. Based on this great post by Jerry G. Reitfield, here is my solution.

Step 1

Add the tinynav.min.js to the /library/lib/js/ folder

Using the tinynav.js found here -> https://github.com/viljamis/TinyNav.js (This tutorial was written with version 1.1)

Step 2

In the bones.php file, directly below the line that enqueues jQuery and before the line that enqueues the scripts.js file add these lines:

wp_register_script( 'bones-tinynav', get_stylesheet_directory_uri() . '/library/js/libs/tinynav.min.js', array(), '1.1', false );
wp_enqueue_script('bones-tinynav');

Step 3

In the scripts.js file add this below the section that states //add your scripts here

$(function () {
      $('#menu-main-menu').tinyNav({
        header: 'Menu' // Writing any title with this option triggers the header
      });
    });

The #main-menu is the title that you give your menu in WordPress menus. If you name it Top Menu, then change this to #top-menu

The word ‘Menu’ can be changed to read whatever you want.

Read the docs on tiny nav if you want to set other features such as having the current selected page displayed in the menu.

If you want the “active” class to display the current page instead of the word ‘Menu’ use these options -> active: ‘current_page_item’, header: false
You will need to edit tinynav.min.js and change “selected” to “current_page_item” for this feature.

Step 4

Finally I add the styling to turn it on and off.
in base.less or base.scss

.tinynav { display: block; margin: 160px auto 0 auto; width:100%; }
#menu-main-menu { display: none }

in 768up.less or 768up.scss

.tinynav { display: none;}
#menu-main-menu {display:inline-block;}

Just remember to change #menu-main-menu to #menu-“whatever you call your main menu”

To see what this looks like, just resize your browser screen and watch my main menu disappear and the mobile menu appear.

Customizing the NextGen Gallery Plugin (WordPress)

While working on a client solution, I needed to customize an already great plugin NextGen Gallery.

The client wanted a staff directory, and I thought it would look good as a gallery with the staff bio fully visible in the lightbox. That part was easy, just put the staff bio in the description box in the gallery.

Now my goal was to have just a snippet of the bio visible on the directory. Therefore we have to trim the bio down for the gallery view and through CSS magic rearrange it so that it does not appear below the gallery image, but to the right.

First the code. We need to modify one of the next-gen files. Make sure you back these changes up, because they will get written over if you upgrade the plugin.

The file needed to modify the gallery-caption.php file and is located in your plugins directory. nextgen-gallery –> view –> gallery-caption.php

We are going to replace this line of code:

<?php echo $image->caption ?>

with the following lines of code:

<?php echo $image->alttext ?>
	<?php $longcap=$image->caption;
	$shortcap=substr($longcap,0,150); ?>

<?php echo $shortcap; ?><a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> > <br />[MORE]</a>

This takes our caption and shortens it to 150 characters for our purposes. Just change the 150 to whatever length you want.

Now we play with the CSS to get the caption over to the location we want. For my purposes, I have a two column gallery and I moved the new caption sipper to the right of the thumbnail.

.ngg-gallery-thumbnail span {
	/* Images description */
	font-size:80%;
	padding-left:5px; 
	display:block;
	float:right;
	text-align:left;
	position:relative;
	left:-20px;
	top:-170px;
	width:300px;
}

The results look like this…