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

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.

Planning

I knew that I wanted something at least a little more unique. My previous design was nice enough, but it wasn’t really that different from any number of other sites floating around cyberspace. One of the first design elements I settled on was a bottom aligned header. Rather than place my logo and navigation at the top of the page, I would fix it to the bottom of the browser window. It seems to work well in all browsers except embedded Safari.

The other thing I knew I wanted to change was the blog. Since I started alexmansfield.com, I didn’t have much use for the Sackcloth Studios blog. So with the new site design, the blog is replaced by my portfolio. I might add a more traditional blog again in the future, but for the moment I think the portfolio will be just fine. I only had a couple posts on the old blog that got many links, so I re-published them here and redirected the old pages here.

Design

I already mentioned the bottom aligned header. After that I decided to make extensive use of the @font-face css property. I chose to use the Museo font by Jos Buivenga, which I had already used sparingly in my first design. Next I decided to use a small background image in the lower right hand corner. As I started to build the site, I realized I didn’t need a sidebar. This left more room for the background image even at smaller screen sizes. The footer was also unnecessary. Finally, I found a nicely drawn Magic Marker icon set with more icons than I could ever dream of using. Part way through the design process I changed the background color from white to light gray, which really helped give the site the look I was going for.

Development

When I first started building the theme, I planned on using the new custom post types feature for the portfolio. However, the more I worked with it, the more I realized that old fashioned categories were the best tool for the job. For the portfolio posts, I decided to display the screenshots by looping through all the images associated with the post. That makes adding an image as simple as can be. I can just go to the post, upload an image, and it will automatically show up on the page. However, this became a problem when I decided to use thumbnails on the portfolio category page. If I uploaded a thumbnail, it would automatically show up on the post page, even if I didn’t want it to be displayed there. To solve this problem, I used this handy little piece of code.

$attachments = get_posts($args);
if ($attachments) {<br />   foreach ($attachments as $attachment) {
      if ($attachment->ID != get_post_thumbnail_id()){
         $image = get_image_by_id($attachment->ID);
         echo '<img src="' . $image->src . '" alt="'. $image->alt . '">';
      }
   }
}

As it’s looping through the images, it checks to make sure it’s not the thumbnail image before displaying it. Problem solved! The last little touch was adding support for custom background images. My face is on the home page, but I really didn’t want it on every page, so I added a custom field where I could specify the location of an image to be used for individual posts.

Plugins

Gravity Forms
– http://gravityforms.com

I decided to use the Gravity Forms plugin to handle the contact form. It was a snap to set up and it does everything I could ask for (and probably quite a bit more).

Limit Login Attempts
– http://devel.kostdoktorn.se/limit-login-attempts/
– http://wordpress.org/extend/plugins/limit-login-attempts/

This simply limits the number of failed login attempts that can happen before blocking a user. This prevents trial and error attempts at compromising the login.

Google Analytics for WordPress
– http://yoast.com/wordpress/google-analytics/
– http://wordpress.org/extend/plugins/google-analytics-for-wordpress/

A great plugin from Joost de Valk that handles everything imaginable relating to Google Analytics and WordPress.

W3 Total Cache
– http://www.w3-edge.com/wordpress-plugins/w3-total-cache
- http://wordpress.org/extend/plugins/w3-total-cache/

Simply the best caching plugin I’ve come across so far.

Implementation

I didn’t do too much out of the ordinary here. I had a few posts that I wanted to keep for future reference, but I didn’t want to publish theme here, so I tried using the PDF24 Article To PDF plugin to create PDF documents of the posts. It worked great, but it left out all the code blocks, so I ended up backing them up manually. I thought about using the Development Theme Test plugin to test the new theme on the old WordPress installation, but in the end I decided to just start from scratch. So from there all I had to do was install WordPress (3.0 RC) in a subdirectory (see Installing WordPress in a Subdirectory), upload the theme, add content, and set the new installation to take over for the old one.

If you have any questions about the process, feel free to contact me or post a comment below.

Sometimes when using WordPress you want to include a non-Wordpress page in your main navigation while still maintaining the simplicity of the wp_list_pages() function. I know there are plugins that do this type of thing, but many of them are just overkill. I just needed one non-Wordpress page on my menu, so here’s what I did. First, I created a page from within WordPress and gave it a heading but left the body blank. My page was called “Purchase” but you can name it whatever you’d like. This is the name that will show up in your navigation menu. Then I went to the header.php file of my theme and added this at the top:

<?php
if(is_page('purchase')){
header("HTTP/1.1 301 Moved Permanently");
header("Status: 301 Moved Permanently");
header("Location: http://www.example.com/");
header("Connection: close");
exit(0); // Optional, prevents any accidental output
}
?>

<?php
if(is_page('purchase')){
header("Location: http://www.example.com/");
header("Connection: close");
exit(0); // Optional, prevents any accidental output
}
?>

<meta http-equiv="refresh" content="10;url=http://www.example.php">

Here’s the changelog:

deleted
- searchform.php
- categories.php
- archive.php
- archives.php

functions.php
- added thumbnail support

single.php
- changed h2 to h1 (single.php)

search.php
- replaced the seachform call with a form

404.php
- replaced the seachform with a widget area

archives.php
- replaced the seachform call with a form

archive.php
- replaced the seachform call with a form

comments.php
- added anchor tag to comments heading to allow links to the comments section (url.com/example.html#comments)
- added <small> tags around allowed tags
- removed double reference to number of comments
- changed ids to match names for comment form
- added label for comment textbox
- removed the “(required)” message from the “Name” and “Mail” labels (Not sure about this decision. Input welcome.)
- Changed “Mail” label to “Email”

all over the place
- added underscores to many ids (.post_meta, .post_navigation #comments_form)
- converted to html5 and included javascript to allow older browsers to render new tags properly
(http://remysharp.com/2009/01/07/html5-enabling-script/)

Sometimes it comes in handy to make the search form on a blog only return results from a single category. It’s actually quite simple.

1. Find the category ID

First we need to find the ID of the category that we want to search. We can find that by going to Posts>Categories and hovering over the category we want to search in the categories list on the right side of the page. When we hover the mouse over a category, we’ll see something like this in the status bar (usually the bottom left corner of the browser):

…/wp-admin/categories.php?action=edit&cat_ID=3

As you can probably see, the 3 at the end is the category ID. That number is all we need to know.

2. Edit the searchform.php file

We just need to find this line in the searchform.php file of the theme:

<form method="get" id="searchForm" action="<?php bloginfo('home'); ?>/">

and add this hidden field immediately after it:

<input type="hidden" name="cat" id="cat" value="3"/>

3. Apply the category ID

Now we need to make sure that we change the value of the hidden field to the category ID we found in step one. For example, if the category we chose had an ID of 12, then the hidden field would look like this:

<input type="hidden" name="cat" id="cat" value="12"/>

It’s that easy! If you have any questions, feel free to post them in the comments section below.

Image by rockmixer

I just posted my first plugin to wordpress.org. It creates an unordered list of the most recent posts by a given author. It can be called both from within a post using a shortcode or from within a theme file. Check out Latest Posts by Author at wordpress.org for more details.

To demonstrate just how easy it is to create a plugin for WordPress, I’m posting the plugin code below.

<?php

/*
Plugin Name: Latest Posts by Author
Plugin URI: http://wordpress.org/#
Description: Displays a list of recent posts by the specified author
Author: Alex Mansfield
Version: 0.6
Author URI: http://alexmansfield.com/
*/

function latest_posts_by_author($array) {
 extract(shortcode_atts(array('author' => 'admin', 'show' => 5, 'excerpt' => 'false'), $array));

 global $wpdb;
 $table = $wpdb->prefix . 'users';
 $result = $wpdb->get_results('SELECT ID FROM '.$table.' WHERE user_login = "'.$author.'"');
 $id = $result[0]->ID;
 $table = $wpdb->prefix . 'posts';
 $result = $wpdb->get_results('SELECT * FROM '.$table.' WHERE post_author = '.$id.' AND post_status = "publish" AND post_type = "post" ORDER BY post_date DESC');
 $i = 0;
 $html = '<ul>';
 foreach ($result as $numpost) {
 $html .= '<li><a href="'.get_permalink($numpost->ID).'">'.$numpost->post_title.'</a>';
 if($excerpt == 'true'){
 $html .= '<p>'.$numpost->post_excerpt.'</p>';
 }
 $html .= '</li>';
 $i++;
 if($i == $show){
 break;
 }
 }
 $html .= '</ul>';

 return $html;
}

add_shortcode('latestbyauthor', 'latest_posts_by_author');

?>

Introduced in WordPress 2.5, shortcodes make it easy to include pieces of code or content in multiple places across your site without having to repeatedly copy and paste. Also, if you need to go back and make adjustments, with shortcodes you don’t need to make the adjustment on every page, you just edit the shortcode source.

For example, just the other day I was creating an order form that had to appear on a number of different pages across the site I was working on. Each form was exactly the same with the exception of the item number. Since shortcodes can be made to accept arguments, I could call the shortcode and pass it the item number to use in the form (for those of you haven’t done any programming, arguments have nothing to do with arguing. Parameters or variables might be a more understandable words). Here’s how easy it was to include the form in a page:

[order item="59336"]

That tells WordPress to go get the code associated with [order] and set the item number to 59336. Now lets take a look at how to actually create the functionality I’ve been describing. It’s actually pretty simple.

Open up your functions.php file and scroll to the bottom. You’ll want to add your code just above the closing PHP tag (?>). Here’s how you would add an order form similar to the one I described earlier. Keep in mind that an order form is just one of hundreds of uses for shortcodes. My purpose is to show you how to create shortcodes, not order forms, so I’m only going to explain the code that relates to the creation of the shortcode. Here’s the code:

function orderform($item_nbr) {
extract(shortcode_atts(array("item" => '0'), $item_nbr));
return <form method="post"><input name="item_number" type="hidden" value="' . $item . '" />
<label for="quantity">Quantity:</label>
<input id="quantity" name="quantity" size="8" type="text" />
</div>
<div><input id="submit" type="submit" value="Place Order" /></div>
</form>';
}

Take a look at the first line. It starts the function (function), gives it a name (orderform), and then assigns a name to the variable that holds the shortcode arguments ($item_nbr).

After that, you have to extract the actual value from the item_nbr variable to get the individual arguements. This is accomplished by line 2. The first part (array…) sets up the default values of the array while $item_nbr is the actual list of arguments being passed in by the shortcode.

Next you need to return the form as a string so that it can be displayed in the post. Notice this section of line 3:

' . $item . '

This breaks out of the HTML string and inserts the item number that you passed in with the shortcode. Note that the variable name is “$item” which you set along with the default value when you extracted the array in line 2.

That’s it for the writing the function. Now you just need to let WordPress know about it. Just after the function, still in the functions.php file, add this line:

add_shortcode('order', 'orderform');

The first argument (‘order’) is the keyword for use in the shortcode. The second argument is the name of the function (‘orderform’). So once again, all you have to do to include the form inside a post is use this short piece of code:

[order item="59336"]

Feel free to play around with the code and let me know if you have any questions.