Centering WordPress Menus using Bones

As you may know, I build my WordPress themes using the Bones starter theme by Eddie Mochado. Quite often I am given a theme with a design that includes a WordPress menu that is centered on the screen. I know this subject has been danced around several times, but the solution is very easy with a couple of CSS edits.

First you have to decide at which break point you want the menu to be centered. So this edit should be done in the appropriate file. (ie: _base.scss, _768up.scss)

Make the following changes:

.nav {
     text-align:center;

     li {
          display:inline;
          float:none;

         a {
            display:inline-block;
           }
        }
      }

That’s it! Enjoy.

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.

Those dreaded three words..

As a freelance WordPress developer I scour the internet seeking opportunities to help digital creatives bring their works to life on the WordPress platform.  As I do this I am constantly faced with those three words that haunt me.

 

“MUST BE LOCAL”

 

If your company is of the mindset that you must have every individual work directly in your office or at least within the same zip code, this is how I imagine your office to be.  Yes, that is where your thinking is based.  In the past.

Without getting into how this mindset developed, lets just say that it is time to get over it.

There are lots of great companies that utilize a mobile and remote workforce to create wildly successful businesses. Speaking of WordPress, Automattic, the company behind WordPress.com and many other web technologies, HAS NO OFFICES!  All their amazing creations and contributions to the internet community are done by an amazing workforce located all over the world. The same goes for 37 Signals, the company behind the popular Basecamp, Highrise and Campfire collaboration software suites.

Have you ever flown JetBlue airlines? Their customer service and booking agents work from home.

To borrow a line of thought from Jason Fried, the best work and brainstorming is done when you are out of the office.

So now its up to you to bring the mindset to your workplace.  There is a lot of talent our there, and not all of them are interested in spending 8 hours a day where the forecast is “72 and fluorescent”.

 

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…