Plugin: Easy Embed

Written on July 29, 2010 at 11:30 am, by alexmansfield

The WordPress editor doesn’t always play nice with HTML (especially if you switch back and forth between the Visual and HTML editor). This problem has bugged me for a while, and I finally sat down and built a simple plugin to solve it. There are other solutions out there, but I find this meth0d to be the easiest to use. After installing the plugin, all that is required is to create a custom field (you can name it anything), place your code in the new custom field. This could be HTML, video embed codes, Paypal forms, etc. Then place the following shortcode into your post where you want your special code to go:

[easyembed field="name-of-custom-field"]

I’ve submitted this plugin for inclusion in the WordPress plugin directory and I’m waiting for  a response. In the mean time, here is the code that makes it work.

<?php

/*
Plugin Name: Easy Embed
Plugin URI: http://wordpress.org/#
Description: Allows the embedding of any code and protects it from being modified by the WordPress editor
Author: Alex Mansfield
Version: 1.0
Author URI: http://alexmansfield.com/
*/

function am_easy_embed($array) {
extract(shortcode_atts(array('field' => 'custom'), $array));
global $post;
$html = get_post_meta($post->ID, $field, true);
return $html;
}
add_shortcode('easyembed', 'am_easy_embed');

?>

Sanitary Theme 0.3

Written on July 28, 2010 at 11:31 pm, by alexmansfield

I’ve made a number of improvements since version 0.2. Although I’m sure there are plenty more improvements that could be made, I figure it’s about time I released update. Below is the changelog.

Download Sanitary 0.3

--- 0.3 ---

functions.php

- improved thumbnail support

- added custom menu support

- added contants to prevent repetitive function calls (get_bloginfo etc.)

header.php

- added body_class() support (and removed IDs from content divs)

- added custom menu support

- added divs for centering content areas (#in-header, #main, #in-main)

- added contants as defined in functions.php

- added RSS/Atom auto discovery links

- edited the title tag

- removed "profile" property from head tag for HTML5 compliance

footer.php

- added sticky footer (http://www.cssstickyfooter.com/)

- added divs for centering content areas (#in-footer)

- closed divs opened in header (#main, #in-main)

index.php

- changed post_meta to post-meta to match other class formatting

single.php

- removed link from title

- changed title to <h1>

- changed post_meta to post-meta to match other class formatting

comments.php

- fixed comment box label

- moved to the optional folder for access if needed (not required by the theme)

style.css

- centered content areas (#in-header, #in-main, #in-footer)

- changed header navigation to horizontal

- added styles for sticky footer

all over the place

- added <article> tags

- added post_class()

Outline: the Ignored CSS Property

Written on June 18, 2010 at 6:47 pm, by alexmansfield

Note: Here is another post originally written for my blog over at sackclothstudios.com. However, with the changes I’m making to that site, I figured the post would be of more use here on this site.

Outline is a seldom used and often misunderstood CSS property. An outline is a line that is drawn around an element outside of it’s border. By definition, it takes up no space. Sounds impossible, right? In reality, it does take up space (you can see it!) however, that space is not added to the width of the element like a border would be.

Most often, the outline is used to highlight an active link. By default this is a small dotted line that encapsulates the link. To be honest, as a designer I have often found the outline to be a bit ugly. There are some designers who hide the outline entirely (I used to be one of them). However, in Firefox, Internet Explorer and Chrome you can navigate the web using only the keyboard by tabbing through the links on each page. Each link is highlighted by an outline when you reach it. You can hit enter to follow the link. Hiding the outline entirely takes that feature away from users who prefer to use their keyboards. So to prevent the ugly outline while still retaining keyboard navigation we can style the outline using CSS.

This solution is not perfect, due to the lack of support by Internet Explorer (as of version 7). While Internet Explorer uses an outline to highlight links, it does not support styling it will CSS. Firefox, Safari, Opera and Chrome on the other hand, do allow you to specify your own styles.

The outline can be styled with the following properties:

• outline-color
• outline-style
• outline-width
• outline

Outline-color behaves like any other color declaration and also supports the value “invert” which performs a color inversion of the pixels on the screen. This is the default behavior and ensures that the outline will stand out from the background. Outline color can be set like this:

a{outline-color: white;}

Outline-style has the same possible values as the more common property border-style and is set like this:

a{outline-style: dashed;}

Outline-width can be set to thin, medium, thick, or can be specified with a length such as 3px.

a{outline-width: 1px;}

Finally, outline is a shorthand property for setting the previous three properties all at once. For example:

a{outline:2px solid red;}

Keep in mind an outline is the same on all sides. Unlike border, you cannot specify a style for only one side of an outline. To play around with the outline property, visit http://www.w3schools.com/CSS/tryit.asp?filename=trycss_outline

For even more information:

• Don’t remove the outline from links – arjaneising.nl
• Removing the dotted line – csstricks.com
• The outline CSS property – sitepoint.com

Simple PHP Redirect in Wordpress

Written on June 17, 2010 at 2:35 pm, by alexmansfield

Note: This post was originally written for my blog over at sackclothstudios.com. However, with the changes I’m making to that site, I figured the post would be of more use here on this site.

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

One Year

Written on June 1, 2010 at 7:02 am, by alexmansfield

Today marks exactly one year since I started this website. It has been (and I hope it continues to be) a grand experiment in blogging. This past year of blogging definitely didn’t go as planned. First, I started working for Jason Schuller over at press75.com, which has been great! Then I went back to school (which has also been great). Consequently, I didn’t post nearly as often as I had hoped. Running a business and taking an average of 20 credits per semester doesn’t leave so much time for blogging. I hope to have a lighter class load this coming year, so maybe the blog posts will be a little more frequent. Anyway, here are a few of the stats for year number one:

• Blog posts: 30
• Visits: 3,200
• Visitors: 2,800
• Pageviews: 4,500
• Avg. time on the site: 0:53
• Backlinks (as measured by Yahoo): 175
• Google Pagerank: 4

These stats aren’t really that important, but I look forward to comparing them to future years. I also look forward to not comparing them to John O’Nolan, who started just six months before me

Looking back over these stats, I noticed noticed that I posted more often than I would have guessed. I think as time went on and I got busier, my posts became less frequent, so it feels like I hardly posted at all. I think for the coming year I would be happy with a similar number of posts spread out more evenly this time. Finally, I have a few goals for the future that are not directly related to this blog:

• Re-brand Sackcloth Studios (my web design and development business).
• Build the Trusty Press brand.
• Complete another Wordpress plugin.

I have a few other projects up my sleeve, but I’ll just leave it at that for now.

Sanitary Theme 0.2

Written on April 15, 2010 at 11:21 pm, by alexmansfield

It has been 10 months to the day since I released Sanitary 0.1, a clean starting point for developing Wordpress themes. An update is obviously overdue, so even though it will need to be updated again as soon as Wordpress 3.0 comes out, I’m releasing Sanitary 0.2. It is still a work in progress, but as you can see from the changelog, there have been quite a few changes under the hood. The change that I’m most excited about is the move to HTML5, with support for even Internet Explorer (Thanks to Remy Sharp’s HTML5 enabling script). Download Sanitary 0.2

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

Wordpress Single Category Search

Written on September 7, 2009 at 9:39 am, by alexmansfield

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

Wordpress Plugin: Latest Posts by Author

Written on August 11, 2009 at 4:52 pm, by alexmansfield

Update: The plugin has been updated with the option of including post excerpts in version 0.4. See: http://wordpress.org/extend/plugins/latest-posts-by-author/

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.2
Author URI: http://alexmansfield.com/
*/

function latest_posts_by_author($array) {
extract(shortcode_atts(array('author' => 'admin', 'show' => 5), $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="'.$numpost->guid.'">'.$numpost->post_title.'</a></li>';
$i++;
if($i == $show){
break;
}
}
$html .= '</ul>';

return $html;
}

add_shortcode('latestbyauthor', 'latest_posts_by_author');

?>

Menus Hiding Behind Flash

Written on August 6, 2009 at 2:07 pm, by alexmansfield

I ran across an issue today where a drop down menu was dropping behind a flash object rather than in front. It seems to be a pretty common problem, so I thought I’d share the solution.

1. Start with the embed code

To make sure that the drop-down menu appears above the flash object, there’s a single parameter we need to add to the embed code. First of all, here’s what a normal YouTube embed code looks like:

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed
src="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="425" height="344">
</embed>
</object>

2. Add a parameter

We’ll need to add the parameter in two places. First we’ll need to add the following code after the other param fields (or before, it doesn’t really matter).

<param name="wmode" value="transparent">

Next, wmode=”transparent” needs to be added to the actual embed tag like this:

<embed
wmode="transparent"
src="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="425" height="344">
</embed>

That’s it!

So all together, this is how it should look when we’re done:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0" />
<param name="allowfullscreen" value="true" />
<param name="wmode" value="transparent" />
<embed
type="application/x-shockwave-flash"
width="425"
height="344"
src="http://www.youtube.com/v/Z19zFlPah-o&amp;amp;amp;hl=en&amp;amp;amp;fs=1&amp;amp;amp;rel=0"
allowscriptaccess="always"
allowfullscreen="true"
wmode="transparent">
</embed>
</object>

Hope that helps!

Image by Lili Vieira de Carvalho

Adding Custom Wordpress Shortcodes

Written on July 27, 2009 at 12:45 pm, by alexmansfield

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.