Regardless of whether it was busyness or just laziness, I’ve added a lot of projects that have kept me busy over the last year. I did leave some out due to time but the pieces I consider a good representation of how I spent 2011 are here. Now, if I can manage to update this blog more than twice a year I would be golden.

As I was working on an article the other day, I thought it would be pretty sweet to have a few extra Quicktags up in the editor bar. I remember back in the days of WordPress 1.5 and hacking the quicktags.js file. I shudder at the very thought of doing that now. Hacking a core file is not an option and I don’t want to install a plugin. Installing a plugin would mean I would have to install it on every site I do and set it up new each time.

So I set out to see if I could find some information on how to add my own Quicktags using a js file in my theme and my functions.php page. I didn’t have to search too hard to discover some information. I came across this article on scribu.net. Rather than create a plugin, I tweaked the code to reference the js file from my theme. Here is what my code looks like.

First add this to functions.php:

/*
* Setup some custom quicktags in the HTML editor
*/
function my_quicktags() {
	wp_enqueue_script('custom_quicktags', get_bloginfo('template_directory').'/js/custom-quicktags.js', array('quicktags'));
}
add_action('admin_print_scripts', 'my_quicktags');

Then create a file called custom-quicktags.js and place it in your theme directory. I put mine in a subdirectory called “js”. Here is what I added to mine.

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

// preformatted text for including code in a post
edButtons[edButtons.length] =
new edButton('ed_pre'
,'pre'
,'<pre lang="css" line="1">'
,'< /pre >'
,''
);
//definition list
edButtons[edButtons.length] =
new edButton('ed_dl'
,'dl'
,'<dl>\n'
,'</dl>\n\n'
,''
);
// definition list - definition term
edButtons[edButtons.length] =
new edButton('ed_dt'
,'dt'
,'\t<dt>'
,'</dt>\n'
,''
);
// definition list - definition description
edButtons[edButtons.length] =
new edButton('ed_dd'
,'dd'
,'\t<dd>'
,'</dd>\n'
,''
);
// tab character
edButtons[edButtons.length] =
new edButton('ed_tab'
,'tab'
,'\t'
,''
,'',
-1
);

Note the added spaces around the </pre> tag on line 6, didn’t want to close out of the highlighter too early.

The first couple of lines are copied from the quicktags.dev.js file in the WordPress includes directory, just so I remember what each parameter does. The first tag adds a pre tag so I can quickly include highlighted code syntax with the wp-syntax plugin. The next couple add the elements of a definition list with the appropriate tabs and carriage returns. The finally button adds a tab, that way if I’m working on a list and I happen to hit the delete key one too many times I can re-insert the tab character back into the editor so my code stays clean.

That’s all there is to it, upload and open a new Post or Page and you should see the Quicktags.

FadedPictures.com hasn’t seen a real make-over for some time. In fact, the last time I redesigned the site it was running on Joomla! and using SlideShowPro, a Flash based gallery. Much has happened since then; Flash has been declining, some might even say it has died, mobile devices have grown in popularity and become the norm.

For a brief time I took a departure into Ruby on Rails, it was fun, I built a couple sites with it. But ultimately, outside of a custom web application, it was too much to keep up with for a regular site. It’s a great framework and Ruby is a beautiful language, but for what I do here and at Honu Studios it’s a bit much. FadedPictures.com is now powered by WordPress, which has become my default CMS solution these days. I also dabble a bit in Expression Engine from time to time as well.

FadedPictures.com is coded with HTML5, CCS3, it utilizes the jQuery Javascript framework, and the 1140 pixel grid CSS framework.

I’ve recently started using the 1140 CSS Grid framework designed by Andy Taylor and have really become a fan of it. I also just redesigned Honu Studios using it. Previously, (couple weeks ago) I used the BluePrintCSS framework, which is a great framework. In fact, I still utilize the reset code from BluePrint.

The advantage and key difference in the 1140 CSS Grid is that the design is not fixed to 960 pixels or even 1140 pixels. Instead, it’s fluid and through CSS media queries you’re able to restructure the content of your site on the fly. You can see it in action here simply by resizing your browser or viewing it on your phone or iPad.