Galleries

WordPress is getting more robust with every release, yet for some reason, there’s still no great way to do Galleries natively. Fear not, we have found that Nextgen and CataBlog will do the job well enough!

Worpress and Search Engine Optimization

When it comes to SEO, there are absolutely no open source platforms that I’ve seen that do as superb of a job providing tools and automating the process. Keys to wordpress SEO include meta control, monitoring, links and social networking. Here are the best tools for the job:

WordPress Stats Plugin

The WP Stats is actually two essential plugins, one by the creators of WP and the other as a dashboard tool to take analytics through the roof. The WP stats plugin lets you monitor social traffic, alexa, compete, and far more — all enabled and monitored without leaving your admin!

WordPress SEO by Yoast

For years, i used the All in one SEO plugin, and even gave headspace a shot but Yoast knocked them both out of the water for me. The yoast plugin boasts some great tools to help you generate meta content, plus looks and works the way a good WP plugin should.

SEO Smart Links

Internal site links are a huge usability and SEO boost, and nothing helps you build these links better than this plugin. I usually dump in a keyword list that I’ve built with Google’s Keyword tool and over time I aim to write articles and link them to those keywords.

Worpress SEO requires a Sitemap

Don’t let the name fool you, Google SEO sitemap covers all the major search engines and notifies them automatically whenever you publish new content. Don’t skip this one, a sitemap is a must in helping a search engine index your site, and is even more crucial for frequent bloggers.

Faster page loads in WordPress

We all want more cache don’t we? WP Super Cache speeds up your site significantly making your pages load faster, which is favorable for both man and machine! Follow that with Smush.it, Database Optimization and Minification and you’re looking at a 20-30% faster site on average (estimated from personal use and client sites).

Get Social with WordPress

Social networking is huge and most blogs completely fail to engage their audience (guilty), part of the problem is obviously content but the other part is often the tools and approach. If your website is large and well known (or has the capacity to be) why not extend WordPress with BuddyPress and launch your own social network? Or keep it simple and drop in Socialize widgets and Disqus Comments so that your users can engage using existing social platforms.

WordPress Utilities you can’t Live Without

There are a TON of utilities that I would love to talk about, but for brevity I will only mention Scissors and WP DB Backup. Scissors lets you crop and rotate media which is something I hope wordpress will include in its core. WP Backup makes a data backup for you automatically and emails it to you, allowing you to have a backup outside of your host.

I hope these plugins help, and if you feel I missed one that HAS to be on the list, just mention it in the comments below and I’ll argue about it a bit

What is Zen Coding?

From a general perspective Zen Coding is simply the practice of making lightweight and reusable code to allow for peaceful coding and debugging (that’s my definition anyways). There has been a movement in the front-end development community towards finding new ways to use CSS with semantic markup in order to produce the desired layouts and styles. Now Sergey Chikuyonok has taken that to a whole new level. He’s reversed the idea of Zen Coding using HTML markup to generate CSS Selectors and allowed us to create our markup from using CSS Selectors. This might seem confusing, so lets look at some code:

Plain and simply put, the Zen Coding plugin (supported on multiple text editors) translates code like this:

div#header>ul.nav>li*5

into this:

<div id="header">
	<ul class="nav">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

.. and yet, this is still nothing folks! Dive in deeper over at Smashing Mag

View Demo or Download

Lansing Web and Technology

If you are a web design or web development firm in Lansing, MI then talk to me personally about an even better version of this application. I’m offering it only to Lansing Web Design Companies because I believe in giving the Lansing Area a competitive advantage when it comes to technology. Feel free to contact me at the email in my header.

Download the YUI Compression AppleScript

The AppleScript Source:

on run
	tell application "Finder"
		set this_item to choose file with prompt "Choose CSS or JS file:"
		set dir to the selection as alias
	end tell
	set mypath to posix_path(this_item)
	set dirpath to posix_path(dir)
 
	runCompression(mypath, dirpath)
end run
 
on posix_path(mac_path)
	set mac_path to (mac_path as text)
	set root to (offset of ":" in mac_path)
	set rootdisk to (characters 1 thru (root - 1) of mac_path)
	tell application "Finder"
		if (disk (rootdisk as string) is the startup disk) then
			set unixpath to "/" & (characters (root + 1) thru end of mac_path)
		else
			set unixpath to "/Volumes:" & mac_path
		end if
	end tell
	set chars to every character of unixpath
	repeat with i from 2 to length of chars
		if item i of chars as text is equal to "/" then
			set item i of chars to ":"
		else if item i of chars as text is equal to ":" then
			set item i of chars to "/"
		else if item i of chars as text is equal to "'" then
			set item i of chars to "\\'"
		else if item i of chars as text is equal to "\"" then
			set item i of chars to "\\" & "\""
		else if item i of chars as text is equal to "*" then
			set item i of chars to "\\*"
		else if item i of chars as text is equal to "?" then
			set item i of chars to "\\?"
		else if item i of chars as text is equal to " " then
			set item i of chars to "\\ "
		else if item i of chars as text is equal to "\\" then
			set item i of chars to "\\\\"
		end if
	end repeat
	return every item of chars as string
end posix_path
 
on runCompression(mypath, dirpath)
	tell application "Terminal"
		do shell script "java -jar " & dirpath & "yuicompressor-2.4.2.jar " & mypath & " -o " & mypath & ".min.js"
	end tell
end runCompression

If you like this YUI Compression AppleScript please do share that with me, as praise is my sole motivation for producing scripts for others. I’ve only skimmed the surface of applescript, but with so few scripts out there that meet the needs that I have, I’m sure I could quickly make some other web developer tools for Mac as well.

What are Custom Fields?

Custom fields are a predefined function within the WP system. All you have to do is pass a parameter to the function to receive data back. Though there is great documentation for custom fields in the WordPress Codex, to a new coder, this documentation can be overwhelming. Instead, let’s breakdown and look at a very specific piece of the function..

So hypothetically, let’s say you want a thumbnail in the beginning each post on your homepage (take a look at my homepage to see the layout I’m referring to). Thumbnails and images are important for blogs to break up the content and add visual appeal. For quite a while I’ve been going into each of my posts, uploading an image and floating it left, and then taking that image and intro text and putting it into the excerpt box. This method, while functional, is a three step process that slows down my blogging time. So to speed up the process I can use custom fields and the RSS limit function to display the same results automatically without having to do it manually each time.

In my blog post, I create a new custom field called “imagethumb”. After defining the imagethumb “key” once, I can then use that custom field on each blog post by selecting it from the dropdown field, and all I have to do is specify a value (location) of the image. So the custom field should display as:

Name: imagethumb
Value: http://yourimage.url

Then I need to edit my index.php file and add the thumbnail to the post loop and set two modes for posts with or without images.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<?
// Start the post loop
while (have_posts()) : the_post();
?>
<div class="date">
  <span class="day"><? the_time('j'); ?></span>
  <span class="month"><? the_time('M'); ?></span>
  <span class="year"><? the_time('Y'); ?></span>
</div>
 
<h1>Title Goes Here</h1>
 
<p class="postmetadata">
  <? the_tags('Tags: ', ', ', '<br />'); ?>
  Posted in <?php the_category(', ') ?> |
  <? edit_post_link('Edit', '', ' | '); ?>
  <? comments_popup_link('No Comments;', '1 Comment', '% Comments'); ?>
</p>
 
<div class="entry">
<?
// Get custom field by passing the parameter to get_post_custom_values() function
$values = get_post_custom_values("image");
 
// If custom field is set, format the image with the content
if (isset($values[0])) {
?>
  <img class="alignleft" src="<? bloginfo('url'); ?>/<?=$values[0];?>" />
  <p class="alignleft"><? the_content_rss('', TRUE, '', 100); ?></p>
<?
}
 
// if not set, pull in the excerpt instead
else {
?>
  <p><? the_excerpt(); ?></p>
<?
}
 
// end loop
endwhile;
?>

You can go one step further in the automation process and use a cropping script to automatically crop the image to the desired size. All you’ll need is timthumb and to set the parameters you want on the image

Parameters
----------------------
w: width
h: height
zc: zoom crop (0 or 1)
q: quality (default is 75 and max is 100)
 
example:
<img src="<? bloginfo('url'); ?>/timthumb.php?src=<?=$values[0];?>&w=300&h=200&zc=1" />