pre, code, kbd, samp, tt, textarea{
	font-family: monospace, monospace;
}

However, in Chrome, this threw off the line height, which ruined the vertical rhythm I was working to create. After some trial and error, I discovered that setting the vertical-align property to “top” took care of the problem. I’ll be the first to admit that this isn’t the most elegant solution, but as far as I can tell, it works in every modern browser. Here is my final code:

pre, code, kbd, samp, tt, textarea{
	font-family: monospace, monospace;
	vertical-align: top;
}

Please let me know if you find any browsers that don’t render this properly. Thanks!

CSS media queries and jQuery window width calculations each handle scrollbars differently. This can cause unexpected (and ugly) results when they are used together. I was recently building a responsive menu system that relied on CSS media queries to create a vertical menu for small screens, such as mobile devices. I then used a jQuery width measurement to determine whether or not to create a button for toggling the visibility of the vertical menus. However, I was in for a nasty surprise. Unfortunately, when a CSS media query measures the width of the window it includes the width of the scrollbar. On the other hand, when jQuery measures the width of the window it does not include the width of the scrollbar. When there was no vertical scrollbar, both my CSS media query and jQuery function would fire at the same window size. However, when the page content was long enough to require a scrollbar, the jQuery function would fire first. Eventually, I realized that I could disable scrolling momentarily while I placed the window width into a variable for use later in the script. Here is what it looks like:

jQuery('body').css('overflow', 'hidden');
jQuery('html').css('overflow-y', 'hidden');
var window_width = jQuery(window).width();
jQuery('body').css('overflow', 'auto');
jQuery('html').css('overflow-y', 'auto');

Update: After working with this section of code for a time, I realized that setting “overflow” to hidden caused the page to jump to the top whenever the page was reloaded or the window was resized. So I set off across the internet in search of a script that would measure the width of the scroll bar, rather than measuring the width of the window without the scroll bar. That is how I came across this script by Jonathan Sharp. However, I didn’t need to know the scrollbar width on short pages that didn’t scroll, so I modified it to only return a value when a scrollbar is present on the page.

/* Calculates scrollbar width in pixels */
function scrollbar_width() {
	if( jQuery('body').height() > jQuery(window).height()) {

		/* Modified from: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php */
		var calculation_content = jQuery('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
		jQuery('body').append( calculation_content );
		var width_one = jQuery('div', calculation_content).innerWidth();
		calculation_content.css('overflow-y', 'scroll');
		var width_two = jQuery('div', calculation_content).innerWidth();
		jQuery(calculation_content).remove();
		return ( width_one - width_two );
	}
	return 0;
}

This can then be added to the window width to get the full width of the window including the scrollbar:

var window_width = jQuery('body').width() + scrollbar_width();

// Reset default media sizes
if ( is_admin() && isset( $_GET['activated'] ) && $pagenow == 'themes.php' ){
	global $wpdb;
	$wpdb->query("UPDATE $wpdb->options SET option_value='200' WHERE option_name='thumbnail_size_w'");
	$wpdb->query("UPDATE $wpdb->options SET option_value='200' WHERE option_name='thumbnail_size_h'");
	$wpdb->query("UPDATE $wpdb->options SET option_value='1' WHERE option_name='thumbnail_crop'");

	$wpdb->query("UPDATE $wpdb->options SET option_value='400' WHERE option_name='medium_size_w'");
	$wpdb->query("UPDATE $wpdb->options SET option_value='400' WHERE option_name='medium_size_h'");

	$wpdb->query("UPDATE $wpdb->options SET option_value='800' WHERE option_name='large_size_w'");
	$wpdb->query("UPDATE $wpdb->options SET option_value='800' WHERE option_name='large_size_h'");

	$wpdb->query("UPDATE $wpdb->options SET option_value='800' WHERE option_name='embed_size_w'");
	$wpdb->query("UPDATE $wpdb->options SET option_value='0' WHERE option_name='embed_size_h'");
	$wpdb->query("UPDATE $wpdb->options SET option_value='1' WHERE option_name='embed_autourls'");
}

This piece of code goes in the functions.php file of the theme. When the theme is activated, it sets all the default media sizes available on the Settings > Media page. Feel free to remove any lines that you don’t need. Then change the remaining values to fit the size of your theme and you’re ready to go!

In regards to custom taxonomies, it would be nice to have just one tabbed box within the editor instead a separate box for each taxonomy.

October 31, 2011 7:20 pm via Twitterrific for MacReplyRetweetFavorite

@jschuller

Jason Schuller

I thought that sounded like a good idea, so I went about figuring out how such a change could be made. In the end, it took three sections of code, all of which can be placed within your theme’s functions.php file if you’re hoping to test it out. Ideally, this change belongs in a plugin rather than a theme file, but I’m not going to get into that discussion today. Here’s the first section of code:

// Load the jQuiry UI tabs script
wp_enqueue_script( 'jquery-ui-tabs' );

All it does is load the jQuery UI tabs script that will help us create the taxonomy tabs. The file itself is packaged with WordPress, so we don’t have to specify where it resides. Next we have the script that creates the tabbed taxonomies area.

// Create new taxonomy tabs box and move current taxonomies into the new box
function custom_scripts() {
	?>
		<script type='text/javascript'>
			jQuery(document).ready(function() {
				if(jQuery('.categorydiv').length != 0){
					var element = jQuery('<div id="tax-tabs" class="postbox"><h3 class="hndl">Taxonomies</h3><div id="tabs"><ul id="tab-nav"></ul><div id="tax-tabs-inside" class="inside"></div></div></div>');
					jQuery(element).appendTo('#side-sortables');
					jQuery('.categorydiv').each(function(index) {
						jQuery(this).parents('.postbox').css('display', 'none');
						var title = jQuery(this).parents('.postbox').children('.hndle').children('span').html();
						var slug = jQuery(this).parents('.postbox').attr('ID');
						var slug = slug.replace('div', '');
						jQuery('<li><a href="#taxonomy-' + slug + '">' + title + '</a></li>').appendTo('#tab-nav');
						jQuery(this).appendTo('#tax-tabs-inside');
					});

					jQuery(function() {
						jQuery( "#tabs" ).tabs();
					});
				}
			});
		</script>
	<?php
}
add_action('admin_head', 'custom_scripts');

This function writes out the Javascript involved with adding a new section to the WordPress page/post editor. It begins by checking if any taxonomies exist (keep in mind that “Categories” are a built-in taxonomy). If there are, the taxonomy box is displayed. After this, we loop through all the “.categorydiv” elements and move them into our new taxonomy box, writing the tabbed navigation as we go. Finally, we need to add a few styles so that the tabs look like tabs and the whole box blends with the default WordPress experience:

// Style new taxonomy tabs
function custom_styles() {
	?>
		<style type="text/css">
			.ui-tabs-nav{
				background: #ededed;
				border-bottom: 1px solid #dfdfdf !important;
				margin-top: -6px !important;
				padding: 0 0 0 9px !important;
			}
			.ui-tabs-nav a{
				display:block;
				float:left;
				padding: 5px;
				margin:5px 0 0 0;
				text-decoration:none;
				}
			.ui-tabs-nav .ui-tabs-selected a{
				background: #f9f9f9;
				border: 1px solid #dfdfdf;
				border-bottom:0;
				color: #333;
				margin-bottom: -1px;
				-moz-border-radius: 3px 3px 0px 0px;
				-webkit-border-radius: 3px 3px 0px 0px;
				border-radius: 3px 3px 0px 0px;
			}
		</style>
	<?php
}
add_action('admin_head', 'custom_styles');

Please note: I have only tested this in Firefox and Chrome. There may be CSS issues with Internet Explorer. If you run into any difficulties setting this up, feel free to speak up in the comments.

Here is the HTML:

<div id="nav-primary">
	<ul>
		<li><a href="#">About</a></li>
		<li><a href="#">Level 1</a>
			<ul>
				<li><a href="#">Level 2</a></li>
				<li><a href="#">More Level 2</a>
					<ul>
						<li><a href="#">Level 3</a></li>
						<li><a href="#">More Level 3</a></li>
					</ul>
				</li>
				<li><a href="#">More Level 2 Again</a>
					<ul>
						<li><a href="#">Other Level 3</a></li>
						<li><a href="#">Other Level 3 Again</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Lorem Ipsum</a></li>
	</ul>
</div>

As you can see, the HTML is just a simple list based menu structure. Each sub-menu is contained within the list item of the parent. This is required for hover states to work properly.

The CSS is nearly as simple as the HTML:

#nav-primary{
	background: #444;
	height: 40px;
}

#nav-primary ul{
	background: #444;
	list-style: none;
	margin: 0;
	padding: 0;
}

#nav-primary li{
	float: left;
	position:relative;
}

#nav-primary a{
	color: #fff;
	display: block;
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	text-decoration: none;
}

#nav-primary a:hover{
	background: #555;
}

#nav-primary ul ul{
	display:none;
	position: absolute;
	top: 40px;
	left: 0;
	width: auto;
}

#nav-primary ul ul li{
	width: 200px;
}

#nav-primary ul li:hover > ul {
	display: block;
}

#nav-primary ul ul ul {
	left: 100%;
	top: 0;
}

I have tested this menu with IE 7 and 8, Firefox 7, Chrome 14, Opera 11, and Safari 5.

add_filter('wp_default_editor', 'set_default_editor');

function set_default_editor( $type ) {
    global $post_type;
    if('code-doc' == $post_type)
        return 'html';
    return $type;
}

All you need to do to use this piece of code is change “code-doc” to reflect the name of your custom post type.

Download Plugin Template 1.1

Statistics

Here’s a quick rundown of the blog this year:

• Blog posts: 8
• Visits: 8,649
• Visitors: 7,537
• Pageviews: 11,670
• Avg. time on the site: 0:48
• Backlinks (as measured by Yahoo): 210
• Google Pagerank: 3

I didn’t even post once a month, but visits, vistors, and pageviews more than doubled since last year. Average time on site decreased by about 5 seconds though. Over 75% of my visitors are finding my site through a search engine, while only 10% are coming from referring sites. It’s nice to know people are searching for topics I’ve written about, but I’d like to bring up the percentage of people who find me through other sites who have linked to me because of content that they found helpful or worthwhile. My backlink count grew by just 35 this year and my Google pagerank actually dropped from 4 to 3. I won’t be in school this year, so I might finally get back to blogging a little more often.

Goals

I set a few goals in my one year review post, and now that year two is behind me, it’s time to review them.

1. Re-brand Sackcloth Studios (my web design and development business). Mission accomplished! The new site is live and I documented the whole process.
2. Build the Trusty Press brand. This didn’t happen at all. In fact, I just began the process of closing down the web hosting arm of Trusty Press (and that was its only arm). However, I do have an idea or two regarding where I’d like to take it in the future.
3. Complete another WordPress plugin. Done and done! I actually wrote two more plugins this year and they can both be found in the WordPress.org plugin repository.

• Easy Embed – A simple plugin allowing anything to be embedded in the editor via a shortcode in order to keep WordPress from messing with it.
• Simple Slide Show – Upload a batch of images via FTP. Place them all in a slide show with the ease of a simple shortcode.

Two out of three isn’t bad. Now on to a few of the things I’d like to accomplish this year:

1. Release a commercial WordPress theme.
2. Get Trusty Press running again, this time in a new direction.
3. Make Theme Signal a valuable resource for locating the perfect WordPress theme.

Well, it looks like that’s all for now. See you in a year :]

em:maxVersion="4.0b3pre" />

This is what is keeping the add-on from installing properly. To allow the add-on to be installed on any version of Firefox 4.0, you’ll need to use this line instead:

em:maxVersion="4.0.*" />

Make sure you save the the changes you’ve made. Next, delete the entire “META-INF” folder from within the XPI folder. It holds the checksums of the original add-on. Now that we’ve modified the install.rdf file, the checksums are wrong. Removing the “META-INF” folder will take care of that. Now open Firefox and go to “File > Open File… ” Then find your newly modified Delicious XPI file and open it. This should bring up the dialog box for installing Firefox add-ons. After restarting your browser, you should be greeted by a fully functioning Delicious add-on running on Firefox 4!

Update: It has come to my attention that there is also a beta version of the plugin with Firefox 4 support: https://addons.mozilla.org/en-US/firefox/addon/delicious-extension/