Advanced Custom Fields: Set a Custom Color Picker Palette

The ACF color picker is awesome. It uses the built-into-wordpress Iris plugin from Automattic.  Iris (wpColorPicker) is really flexible and allows for lots of customization.
Iris Color Picker
By default, Iris spits out a color palette at the bottom of the picker for quick selection. If you’re working with a client that has an established set of brand colors that they’d like to maintain throughout their sites, you can add a custom color palette to the Iris color picker very easily.

Continue reading “Advanced Custom Fields: Set a Custom Color Picker Palette”

CW Image Optimizer Running on CentOS 5.9 / i386

If you have your own dedicated server, this tip might be useful for you. Today I was researching some image optimization techniques for WordPress. I tried WP-Smush.it, but it wouldn’t play nice with my server. Following a support thread from the developer, I was directed to the CW Image Optimizer plugin. The plugin requires a Linux library called littleutils. If this sounds at all useful to you, see the quick tip after the jump.

If you have your own dedicated server, this tip might be useful for you. Today I was researching some image optimization techniques for WordPress. I tried WP-Smush.it, but it wouldn’t play nice with my server. Following a support thread from the developer, I was directed to the CW Image Optimizer plugin. The plugin requires a Linux library called littleutils. If this sounds at all useful to you, see the quick tip after the jump.

Continue reading “CW Image Optimizer Running on CentOS 5.9 / i386”

Quick Tip: WP Import upload_max_filesize error

Familiar with this error when trying to import WordPress XML files?
The uploaded file exceeds the upload_max_filesize directive in php.ini.
You need to adjust your php.ini configuration. Here’s how.

It was a quick fix for me. If your using MAMP, php.ini is located at MAMP/conf/php5.3/php.ini – open it up in a text editor. You need to find this line:

upload_max_filesize = 200 MB

And make the following change:

upload_max_filesize = 200M

WordPress $post Object Reference

WordPress global $post object quick reference.

stdClass Object (
	[ID] => 82
	[post_author] => 1
	[post_date] => 2011-03-01 06:18:15
	[post_date_gmt] => 2011-03-01 06:18:15
	[post_content] => This is the description.
	[post_title] => Equivalent of the_title();
	[post_excerpt] => Equivalent o the_excerpt();
	[post_status] => inherit
	[comment_status] => open
	[ping_status] => open
	[post_password] =>
	[post_name] => um-hi-eeeeee
	[to_ping] =>
	[pinged] =>
	[post_modified] => 2011-03-01 06:18:15
	[post_modified_gmt] => 2011-03-01 06:18:15
	[post_content_filtered] =>
	[post_parent] => 0
	[guid] => http://www.example.com/wp-content/uploads/example.jpg
	[menu_order] => 0
	[post_type] => attachment
	[post_mime_type] => image/jpeg
	[comment_count] => 0
	[filter] => raw
)

Site is in shambles

It seems every couple months I get completely fed up with this website and vow to redesign and refactor it. Well, it’s happening again. I think this is the third rendition of the site, and while it looks half decent, there’s really no structure at all. That’s got to change. Until I decide what I really want out of the site, I’ve installed Twenty Ten (which I am loving) to tide me over. Couldn’t deal with the old theme any more. Anyways, read on to see some of my thoughts for the next sagalbot.com update.

Continue reading “Site is in shambles”

Installing, Migrating and Securing WordPress

Completion Time: 1 hour
Skill Level: Advanced
Prerequisites: Basic understanding of the WordPress framework and phpMyAdmin, a live server or MAMP/WAMP.

In this tutorial I will walk you through the steps of migrating WordPress from one folder to another on your server. You will learn how to backup your WordPress database, and the proper steps to take in order to relocate WordPress with as little downtime as possible. We’ll also take a look at different methods of further securing and organizing your WordPress installation. Let’s get started.

Continue reading “Installing, Migrating and Securing WordPress”

Stuff You Should Be Using

I suppose this is a bit of a web roundup. I have a bunch of resources that I use quite frequently for web design. These really help to boost my productivity and creativity. Here they are, in no particular order.

CSS3 Gradient Generator

This one is really cool. CSS3 gradients are awesome and you should be using them. This generator covers all the bases pretty well. It generates the syntax for both Mozilla and Webkit, and even creates a tile-able .png that you can download for the likes of Internet Explorer. This generator stands out with it’s awesome backwards compatibility. Until CSS3 gradients have a standardized syntax, this tool is essential. Who wants to memorize 2 separate syntax’s that will be out of date within the next five years? Not me. Make life a little easier and use the generator.

CSS3 Please

This one just popped up and I had to add it to this list. It basically provides a testing grounds for your CSS3 stuff, providing you with the syntax for lots of powerful CSS3 stuff across nearly all browsers. It even includes generated code for IE’s filter property.

PrimerCSS

For any large scale project, involving lots of id’s and classes, this tool is great. Write your XHTML as you normally would, and when you are finished, paste it into the box. The app basically goes through your XHTML and finds all your id’s and classes and creates a sort of ‘base’ CSS file for you. All of your id’s and classes are in this file with no attached styles. Cool stuff.

Modernizr

For those of you looking to achieve pixel perfect design within the browser, while using cutting edge CSS3 and HTML5 techniques, this one is for you. Modernizr is a 4kb javascript library that checks your current browser for available features. It does this in a unique way that allows you to basically use if statements within your CSS, allowing for easy cross-browser compatibility.

CSS3 Tools

This one deserves a spot on the list but I feel that there are some serious quirks with this set of tools that really need to be refined. That being said, it still provides some really useful code. The site has a series of CSS3 tools that can generate radial and linear gradients, text shadows, box shadows, text strokes, and even 3D transformations.

Zen Coding

This is the ultimate XHTML writing plugin. I won’t go into the details, but this will cut your writing time significantly. If that sounds at all appealing to you, watch the video, and download the plugin.

Coda

If this list were in any sort of order, this app would certainly be at the top! Coda is by far my favorite editor and utilizes one window simplicity and packs powerful features. It has an awesome preview feature that uses the Webkit and Mozilla engines to preview content and is very accurate. It’s also got a full blown CSS Editor that I didn’t use at first, but for simple pages, this will save you some serious time. The CSS it spits out is well written. The list of features goes on. Panic makes some great software, Transmit is also worth checking out if you are looking for a solid FTP client.

That’s it for now. If you find these tools useful, leave a comment and let me know!

Introduction to jQuery

Well, I figured it’s time I started adding some posts to the blog. We’re starting off with one of my favorite subjects, jQuery.

For this and the posts to follow, I highly recommend you run Firefox, with the Firebug plugin installed.

If you have no programming experience whatsoever, I recommend starting out without the help of a framework, like jQuery. Learning the basics first will help you in the long run. For those of you familiar with actionscript, you are going to like jQuery, or even Javascript in general. The syntax is very similar. We’ll start off with the basics.

First of all, jQuery is a scripting framework. Frameworks are basically a library of code, that add additional functionality and changes the way you can write your code, typically increasing efficiency. In order to write jQuery, you need to include the library in the head section of any page that you will be using it on. The most efficient way to do so is by utilizing Google Code’s hosted version of jQuery, by adding the following line to the head section of your html or php page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

This is best practice for a number of reasons. jQuery is a lightweight library, but hosting the library on your own page can add another 30k or so to your document size. Linking to google’s copy of the library isn’t going to prevent this, but chances are that a visitor has previously visited a site with the same google link on a different site. That means that the library is already stored in the visitors cache, and they won’t have to load it. This can take some strain off your server and potentially speed up your site.

You also need to know how to comment in jQuery.

/* CSS style multi-line commenting */
//single line commenting

Pretty simple stuff. In many scripting situations, you need a script to run when the browser has loaded the page. This will take place after all server side languages have completed its tasks. In jQuery, this is known as the ready event, and looks like this:

 $(document).ready(function(){    // Your code here  }); 

Now that you know how to link to the library, and set the script up with the ready event, you are ready to try out some simple scripting. We’ll start really simple. Create a new XHTML page and set up some basic page structure. Add in the jquery link in the head section and set up some opening script tags.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>jQuery Fun!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" >
      //script goes here
</script>
</head>
<body>
<p>My first jQuery script!</p>
</body>
</html>

Now in your <script type=”text/javascript” ></script> tags, add the following:

<script type="text/javascript" >
$(function(){
      //document is ready.. do some stuff
      $('p').hide().fadeIn(5000);
});
</script>

Congrats. You just wrote your first script with jQuery. You’ll notice our document.ready function looks different. This is the shorthand method for writing the event listener. This is really simple stuff, basically you are adding an event listener for when the document is loaded. When this happens the script will run, your paragraphs are first hidden, and then fade in super slow. The speed is changed with the 5000 between the brackets. This number is in milliseconds, so it takes 5 seconds for our paragraphs to fade in. One of the best parts of jQuery is it’s powerful use of CSS selectors. You use these selectors to find elements within the DOM to modify. We have barely scratched the surface of what jQuery can do.

That’s it for this entry, I hope you’ve learned something about jQuery. In the next one we’ll get into more useful event listeners and maybe some simple animations.

If you’ve got suggestions on a future tut, leave a comment!