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:

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.

The post Split Layouts and WordPress appeared first on Guhru Studio.

“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”.

The post Those dreaded three words.. appeared first on Guhru Studio.

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 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.

The post Adding mobile menus to responisve WordPress themes without plugins **UPDATED 4/10/13 appeared first on Guhru Studio.

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…

The post Customizing the NextGen Gallery Plugin (WordPress) appeared first on Guhru Studio.

I know that you believe you understand what you think I said, but I’m not sure you realize that what you heard is not what I meant.” –Robert McCloskey

Effective communication is an essential skill for anyone in business. I am always amazed when I receive emails with requests that are not clearly defined and somehow I feel like the idiot when I am asking for clarification.

I read the message over and over and over, but sometimes I just have no clue what the writer is asking. I know they did not intentionally provide confusing information. However some people make the assumption when they are communicating that you are completely in tune with their thought process.

People in technology are the worst in this category. Somehow there is the assumption that the audience for their message is as fluent about the subject as they are. If they were, then why would you provide any information at all? Typical tutorials in the tech sector follow this pattern.

• Step A – Start
• Step B through X glossed over because they assume you know this already
• Step Y – Our amazing new step
• Step Z – Confusion

How to be an effective communicator

First and foremost, read. Read a lot. Nothing improves your communication skills more than getting a better understanding of our language. Fortunately for us, many authors are excellent at communicating thoughts, moods, feelings and environments. The second hand benefit of this is that you absorb some of these skills as well.

Secondly, read what you type. We have all done this. You type an email to someone and then realize later that your message reads like a 3 year old trying to grasp basic language skills. Before you hit that send button, take a break. Walk away from the email and come back and read it. I am certain there are very few emails that are so essential they could not wait another few minutes before sending.

Do you talk or text?

My wife and I argue about this all the time. I hate talking on the phone. I am much happier sending a brief text message that communicates everything I need to say.

Keeping with that motto, that is the end of this blog post.

The post How well do you communicate? appeared first on Guhru Studio.

Check out the new website, and our new look.

Keep coming back because we are not done remodeling around here.  There will be more services and more useful information available to help you look your best on the internet.

The post Welcome to Guhru Studio appeared first on Guhru Studio.

I played games and browsed the web with their iPads but nothing more than that. It was a fun toy. Flash forward to today and I have now had my own iPad 2 for 3 weeks. I cannot believe how much it has changed my computing habits and my hardware outlook.

I have found that I now use my iPad for more of my everyday computing functions than I would have imagined. Reading and responding to email, browsing the web, reading RSS feeds, Twitter, interacting with clients, and remote desktop management are now primarily the function of my iPad. I am even writing this blog post on the iPad.

Up until this point, my primary tools were my 13″ Powerbook connected to a 23″ monitor while on my desk and my iPhone. If I went out of the office, typically my Powerbook was with me and my iPhone loaded with apps to make life easier.

I have since removed many iPhone apps and relegated their use to the larger screen of the iPad. So, these are the apps that I currently use to make my digital life a little easier:

Business / Productivity

Daylite – Daylite by Marketcircle is a great app for the solo entrepreneur and small enterprise for tracking projects and client interaction. It syncs with my desktop, so I am keep my projects, contacts and to do’s up to date.

Apple iWork Suite – Apple’s iWork suite which are available as individual apps are great tools for writing (Pages), working with spread sheets (Numbers) and presentations (Keynote).

1 Password – 1 Password is the best utility for keeping track of the many passwords and logins to the many client websites, FTP, cPanel and other information I need to have on both my desktop and remotely.

Social Media / News

Reeder for iPad – the Reeder app for iPad has become my primary tool for keeping track of my Google Reader RSS feeds.

Twitter for iPad – I have found Twitter’s own app for the iPad to be a great interface for keeping up with my Twitter feed.

Other Utilities

TeamViewer – I use TeamViewer on my clients computers in order to remotely manage their machines when necessary. The iPad app is great for basic functions when you just have to look at an issue or change a small setting. For heavier tasks, the desktop app is truly the only way to go. I recently successfully removed some malware from a clients computer remotely. This task required several restarts and the uploading of software to the client from my own machine because the malware was blocking any attempt to download or install the software required to remove it.

Skyfire Browser – Skyfire brings Flash Video to your iPad. You can finally watch The Daily Show and other video sites that refuse to accommodate the millions of iPad users out here. The only issue is that you cannot pause the video. So make sure that you are ready to watch it in full with no interruptions.

There are many other apps on my iPad for entertainment and other news and information purposes. Many companies have gone through the process to deliver extremely high quality apps for their customer base. My favorite has been the NHL Game Center. During the regular season I was able to watch non blacked out games on the iPad live with my subscription. As a hockey nut, this is fantastic. They also provide tons of video highlights of games after the fact.

My iPad, paired with my Verizon MiFi make for a formidable duo with regard to remote productivity. Personally, I would recommend a MiFi type unit instead of getting a bundled 3G iPad. This provides a better platform for your multiple mobile devices that both you and your family members constantly have in tow. If you want one without a long term contract, check out Virgin Mobile’s offering.

So if you have been on the fence about the value of spending $500+ for an iPad, I highly recommend getting one and using it. It will surprise you with its versatility.

The post Living with an iPad appeared first on Guhru Studio.

First off, if you have not heard yet, Epsilon, a very large email marketing firm had been hacked last week.  So if you use a bank, shop, sleep or eat, chances are your email address was in Epsilon’s database and was compromised.  So make sure if you receive an email from one of your trusted vendors that any link from that email takes you to an actual website of their own.

Now back to spam.

Spam filters are wonderful things, even if they prevent me from viewing all the male organ enlargement pills that might be available to me.  However spam filters are not perfect and sometimes they send the wrong messages to the junk pile.

Last fall I was attempting to look at the website of a friend of a friend.  I say attempting because the site was not viewable.  As a web designer and all around geek, I poked around to find out what the problem was.  I figured it out and determined that the problem could be easily fixed with a simple code edit.  I emailed the site owner, introducing myself as a friend of their friend, and told them about the problem.  I offered to fix the problem free of charge as a courtesy to my friend.  After all, I knew what the problem was and determined it would take a whole 30 seconds to fix if I stopped for a coffee break.

I mentioned my email contact to my friend so that he would be aware if an inquiry about me arose.  A week went by, I heard nothing.  Another week, still no response.  At the end of week three, I asked my friend if his friend ever contacted him about my email.  ”Nope!”

Checking the website, it was still broken.  I forwarded my original email to my friend and he forwarded it to his friend.  Finally I get a response.  They apologized and said that my email went to their junk filter.  No big deal, but how often were you checking your website?  Did you know it was not visible?

I only mention this because the website was attempting to market more than $6.5 million dollars in real estate and no one could see it!  If I have that kind of inventory, I am not only checking it regularly, I want to see who came to my site, from where, and what they looked at.

More recently I met a wonderful executive at a high technology company.  After their product demonstration, which was impressive, I mentioned that I had executive contacts at a couple businesses that might find their product useful.  My attempt to follow up with them to provide the contact information and introduction went unanswered.  I can only assume that my email is getting funneled to their junk mail box.

I check my junk mail box regularly and find stuff that probably should not be there.

Go ahead and check yours.  You may find a customer lurking in there or maybe someone who can help your business.

The post Spam, spam, spam, spam, email, spam, spam and spam! appeared first on Guhru Studio.