Category: WordPress


I took an excellent class on adaptive design at lynda.com in January. I decided to try mobilizing my main business site, which is a WordPress site that was running WPTouch or one of the other instant mobile plugins. I disabled it and got started about a week ago.

After taking the class, it was much easier to see what I needed to take out for the handheld version, but I hit a snag when I was trying to get images in custom post types to resize. This afternoon I finally got that problem fixed and was able to complete the mobile version, then it only took about 30 minutes to get a separate stylesheet for tablets.

I think it looks pretty reasonable considering it was my first attempt at creating an adaptive version of a WordPress theme – if you have a chance please check out Red Kite Creative on a phone or tablet and let me know what you think.

I’ve written a few posts about how to use CSS3 PIE in WordPress and it’s still evolving (first one, most recent one). What I’m using now is shown below: it’s easy, short, and unlike the other two, has never failed to work on occasion.

/* Conditional styles for old IE */
add_action( 'wp_enqueue_scripts', 'my_load_styles' );
function my_load_styles() {
global $wp_styles;
wp_register_style( 'my-ie8', get_stylesheet_directory_uri() . '/css/ie8.css', false, '0.1', 'all' );
$wp_styles->add_data( 'my-ie8', 'conditional', 'IE 8' );
wp_enqueue_style( 'my-ie8' );
wp_register_style( 'my-ie7', get_stylesheet_directory_uri() . '/css/ie7.css', false, '0.1', 'all' );
$wp_styles->add_data( 'my-ie7', 'conditional', 'IE 7' );
wp_enqueue_style( 'my-ie7' );
}

The only issue I’ve had so far is some error messages after upgrading the Custom Taxonomies Menu Widget plugin – but it was easily fixed by just resaving the widget as it was already set up.

About a month ago I was contacted by a company who had a big job (from my perspective as a freelancer), a WordPress conversion project, and a very short deadline. I chatted with the project director, the developer and a few others and was hired to do a small proof-of-concept task to both determine if WordPress was really going to be a good platform for what they needed, and to try out my company to see if we would be a good fit.

The POC went very well. It served as a good intro for me to their site’s structure and content styles, and the client was quite happy with the results. They asked me to write a full proposal that would include:

  • Creating a custom WordPress theme based on their current site’s design. It needed to be a pixel-perfect copy.
  • Migrating about 60 pages of content to the new platform.
  • Creating a set of 6 custom templates that would be used as the basis for another 30 or so pages.
  • A good deal of custom Javascript and PHP programming to integrate with their CRM and cart.
  • Helping with the WordPress migration and installation on their Amazon host.
  • Training for the client’s Marketing and Development teams.

Taking the Proposal to the Next Level

I’ve gotten quite good at writing estimates in the last few years, but this one needed more care.

I have a spreadsheet that I use for estimating hours that I used to feed all the info I had about this project into and came up with a preliminary number, but I knew that was just the beginning; I was very afraid of putting in something that was too low and terrified of comitting to something so big and fast without some input from someone else who had been there before. I needed to find out what team members I needed to pull in and get some estimating help from a friend who runs a web development studio and has more experience with quotes for this size project.

I met with my friend and things really started to flow from that meeting. Ron had two employees that had some time available in the following two weeks, which coincided with the short deadline, and between them they could provide the custom programming and some plugin support for about 25 hours of time. This was great! He helped me tweak my estimate and get in an appropriate amount of time for project management and unforeseen contingencies, and in the end I felt comfortable with the range of fees we provided to the client in the final version of the estimate.

Filling Out the Team

Writing the proposal helped me get a better handle on who I needed for the team. I had my programing covered, but I called on another colleague familiar with WordPress to do some tasks for me like managing widget placement and SEO tags on all pages, and then put out a call on the Women Designers’ Group mailing list, where I’m a member, for a few others who were experienced with custom theming for WordPress.

I was very lucky to find two women who had the time available to commit. One had a lot of custom theming experience similar to mine, and the other wound up contributing as quality control.

Jumping In With Both Feet

The client was happy with our quote and so they hired us and we were off and running. We had roughly 10 days to get the project to a point it was ready for extensive review and testing by the client’s Development and Marketing teams, and then three more days until it went live. The quick timing was due to some advertising that was coming out right after the launch date.

I’d never managed a project so big nor had I ever had so many subcontractors working on a single project. In order to help me keep everything together and moving forward steadily I used two tools:

  • activeCollab, my project management site, where I set up milestones and tasks for everything in the project development sequence, and where we posted files and held discussions between team members and the client’s contact people.
  • A Google Apps spreadsheet that served as the master guide for everything. This spreadsheet took about half a day to put together. It showed every page on the site, it’s statuses for content migration, custom templating and programming if needed, notes, review/QA status and other elements. One of my subcontractors serving as QA/QC checked off pages in review as they were completed, and the other subs had access to mark their progress on various tasks for each page.

The client was pleased with our implied level of understanding of the minutiae of the project based on the spreadsheet and basically let us go, checking in every day and asking/answering questions as needed. They kept a very close eye on our work, and during the entire course of the project we ran into very few snags. Things went pleasantly smoothly.

The Team!

Could not have done this without the subs, in particular the custom themer that made it possible for us to offer additional features in the templates that we originally told the client would not be possible given the short timeframe, and the programmer that took the initiative to move things forward based on ongoing conversations with the client’s lead developer.  The choice of subs turned out to be very nearly perfect and it was fortuitous that everyone on the team had the time to throw at this project during the work period.

Launch and Beyond

We had a few hours of hiccups when the site was migrated from my production server to the client’s Amazon Web Services hosting, but the project launched on time  and the client was very pleased. I provided training sessions and extensive documentation for them, and we’ve established a strong working relationship that is moving into Phase 2 at this time.

The Most Important Things I Learned

  • Allow plenty of time for project management and be sure to put in an equal amount of time for contingencies because you just never know what’s going to happen.
  • Get the right people to help.
  • Stay organized, used tools accessible by all team members to stay on top of every task taking place across the board.
  • Find some time away whenever you can. I wound up with a nasty bacterial infection during the launch phase that began as a simple cold, I’m pretty sure it was due to the 12-14 hour days I put in near the end.

And, having a good client is also a huge contributing factor for the success of this project. The Marketing and Development staff and the project manager for the client were all passionate about their company, knowledgeable (or enthusiastic and willing to learn) about how our contributions would be affecting their daily work after launch, and easy to work with, and that was refreshing; it helped us keep moving forward at a rapid pace with few interruptions. The project was complex but the experience was great for me. I’m looking forward to working with this client in the future.

A great code snippet, works perfectly. Replaces the default [...] more syntax with a link and text of your choosing.

/* Changing excerpt more to a link */
function new_excerpt_more($more) {
   global $post;
   return '... <a href="'. get_permalink($post->ID) . '">' . 'Read the rest &raquo;' . '</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

example-photo

Add an image above the WordPress post title and content


I had to do this recently for a client for the first time – not that difficult at all. This post serves as an example.

I used the shortcode method mentioned here.

So in functions.php I added the shortcode like this:

function mm_insert_title_func($atts) {
   global $post;
   extract(shortcode_atts(array('before' => '<h2 class="title-after-photo">', 'after' => '</h2>' ), $atts));
$output = "{$before}{$post->post_title}{$after}";
return $output;
}
add_shortcode('mm-insert-title', 'mm_insert_title_func');

Then in the post I added the title where I wanted it to appear by inserting this shortcode (but remove the spaces on either side) in the main edit window.

[ mm-insert-title ]

The parameters are set in the function, but you could leave those blank and set them in the shortcode as shown in the linked post mentioned before.

Then you’ll need to add the style into your styles.css file, something like this:

h2.title-after-photo {
	clear: both;
	font-size: 22px;
	font-weight: normal;
}

Unfortunately this theme doesn’t make it easy to hide the regular title, but you can do that in CSS using body.postid .entry-title h2 { display: none; }. Or, if you add all the posts with large images before the title to a particular category you could do this:

.singular-post .this-category .entry-title {
display: none;
}
© 2012 position: relative; All rights reserved. Powered by WordPress.