WordPress Visual Editor Not Expanding With Zurb Foundation 5 CSS Styles

I just hunted down a very annoying bug in my Manifest Foundation WordPress starter theme that was preventing the visual editor (TinyMCE) from expanding vertically when the default CSS styles from the Zurb Foundation framework are included as an editor stylesheet.

Basically, the height of the visual editor is supposed to be determined based on how much content you’ve actually written in that area. This prevents you from having to scroll both the editing area and the page independently from one another. As you add content the height automatically expands, keeping your editing toolbar visible at the top of the page. Overall it’s a very nice feature, albeit one that many of our clients don’t always grasp intuitively (but that’s another post).

The bug I mentioned was preventing the editor from expanding vertically. Oddly enough the height of the editor would increase by one pixel every time that the user clicked the editor, or navigated using the arrow buttons on their keyboard.

After ruling out that this was a core error or at all related to any of the plugins I was running, I was then able to disable the editor stylesheet and see that the editor functioned as intended. The offending rule is located in the /scss/foundation/components/_global.scss partial of the Zurb Foundation framework.

As part of it’s styling reset, it ensures that both the <html> and the <body> elements are set to 100% height. On the front-end of a theme this ensures that the off-canvas, mobile menu will work as intended. However, the visual editor in WordPress uses an embedded iFrame that also includes these elements. Just place the following rule at the end of your editor stylesheet and you’ll come up aces.

html, body {
	height:auto;
}

An example of my full editor-style.scss file follows:

@charset "UTF-8";
@import "config/settings";
@import "../bower_components/foundation/scss/foundation/components/type";
@import "../bower_components/foundation/scss/foundation/components/clearing";
@import "../bower_components/foundation/scss/foundation/components/tables";
@import "../bower_components/foundation/scss/foundation/components/thumbs";
@import 'site/wp';

html, body {
	height:auto;
}

How Facebook Profits from Fake Likes

I discovered this great video on the Digg.com email newsletter this morning. It’s a great explanation of why paying to promote your Facebook Fan Page is not necessarily the best marketing strategy. It reinforces what I’ve always told clients, “Build your following on information and content that your followers want and need”. It’s another way of saying “To thine own self be true.”

I’d love to hear your thoughts on this video and also learn if you have a different perspective on this.

Simple Filters Make Using Custom Post Types Easier

I’m always looking for good ways to make the WordPress UI as intuitive as possible for Manifest Creative clients. You’d be amazed at how many folks get frustrated trying to remember “What field does what?”. There’s naturally a bit of disconnect between filling out information in the admin and how it’s displayed on the front-end to visitors.

A great example of this disconnect between the admin and front-end is one of our non-profit clients. We use a custom post to display a list of sponsors for the organization. Each post type includes several meta fields for details and is displayed on the front-end alongside the sponsor’s logo. In this use case it makes perfect sense that WordPress’ featured image feature would be used for the sponsor’s logo. But, because “featured image” is not immediately equated with a logo, it’s a prime candidate for customization.

By simply changing the text from “Set featured image” to “Choose sponsor logo” we can eliminate any question of where the admin user should set that particular item. As they say, it’s the little things!

When I create a new custom post type, there are 3 areas that I consider mandatory to customize:

  1. The “Enter Title Here” text shown for the post headline
  2. The “Featured Image” meta box title
  3. The link that says “Add featured image” or “Remove featured image”.

All of this code usually goes into the individual PHP file I use to create the custom post type, but you could just as easily include it in your theme’s functions.php file.

<?php
/**
* Filter the default title
*
* @param string $post_title The current 'Enter title here' text
* @return string The modified default text
*/
add_filter('enter_title_here', 'post_type_default_title');
function post_type_default_title($title) {
	global $post_type;
	if ( $post_type == 'mcrm_contacts' ) {
		$title = 'Company Name';
	}
	return $title;
}

/**
* Filter the Featured Image Metabox
*/
add_action('do_meta_boxes', 'post_type_featured_image_box');
function post_type_featured_image_box()
{
    remove_meta_box( 'postimagediv', 'mcrm_contacts', 'side' );
    add_meta_box('postimagediv', __('Company Logo'), 'post_thumbnail_meta_box', 'mcrm_contacts', 'side', 'default');
}

/**
* Filter the Featured Image link
*
* @param string $content The original link for featured image
* @return string The modified string
*/
add_filter('admin_post_thumbnail_html', 'post_type_featured_image_link');
function post_type_featured_image_link( $content ) {
	global $post_type;
  if ($post_type == 'mcrm_contacts') {
    $content = str_replace(__('featured image'), __('logo'), $content);
  }
  return $content;
}
?>

Awesome tools built on WordPress

I’ll continue to update this post as I find other “best-of-breed” or useful apps that I find for working with WordPress.

Today I found two cool tools that I thought were worth mentioning…

Screenshot of the Pea.rs website
The Pears theme lets you create your own repository of design patterns.

The first is an awesome WordPress theme by the folk over at SimpleBits (yep, Dan Cedarholm is the co-founder of Dribbble). It’s called Pears and allows you to create a custom library of your own HTML and CSS snippets for future use. Run it on your localhost machine (or online) and you’ll have your own repository of design patterns you can apply to any project. One word: Suhweet!

Screenshot of the wpremote.com website
WP Remote lets you bulk-manage your WordPress sites.

The other item worth mentioning is WP Remote. It’s basically a service that lets you manage multiple WordPress installations. Upgrade the core files, plugins, etc. all from within a single control panel.

I have nearly 100 WordPress websites that I’ve developed, and needless to say, keeping them all up to date can be a pain in the hind-end. I’ve toyed with the idea of putting them all into a multi-site installation, but that seems like overkill (not to mention a lot of retrofitting). I think I’ll give this service a try and see how it works out. Oh, did I mention that it’s free?!?

Who is Philip Downer?

Well by now it should be obvious that I’m a website developer. :-) Here’s the in-depth, not quite a resume look.

About Me

I’ve been developing websites in various capacities for 16 years. I founded Manifest Creative (a sole proprietorship) in 2005. My areas of strength are:

  • WordPress
  • PHP/MySQL
  • HTML5/CSS3
  • jQuery/JavaScript
  • Authorize.net integration

I’m also a well-rounded graphic designer. I have the unique ability to be able to both design and program, which helps me to understand both areas of website development. I’m familiar with several different marketing platforms and often leverage them for customers:

  • Campaign Monitor
  • Facebook brand pages (and API)
  • Twitter (and API)
  • Google Maps

I use Git and GitHub for version control and to contribute open source projects back to the community.

I frequently use BaseCamp for project management and bug-tracking. I use Skype for visual conferences.

Pricing & Availability

I bill my services hourly. I usually prefer to get full specs on a project and provide a flat-fee estimate based on what I believe the site will take. I book projects on a first-come, first-served basis with a 50% deposit holding your place on the production calendar. For small projects, with established customers, I’ll usually just dive in. I’m usually booked out about 2 weeks before able to accept new assignments.

Portfolio

There are a number of websites on ManifestBozeman.com in the portfolio section. Several of my most recent projects haven’t made it up yet, so I’m linking to them here. :-)

Social Media

I’m active on several social media channels as well: