Side Projects

Between normal day to day work, maintaining a house, spending time with the family and pets, exercise, relaxing, and enjoying life…there is not too much time for fun side projects these days. I have been trying to complete a few really cool things over the last few months without much luck…but I think March will be a big release month. I have some cool WordPress plugins, templates, and an interesting little project in the works – so assuming I can get some time…look out! Stay tuned…

Jappler Recommends: Shutter Reloaded

I had been looking around for some alternative lightbox like plugins (for photos) and came across the super lightweight option: Shutter Reloaded. The script is super lightweight (10k), does not require any other libraries, and works perfectly without having to add any additional code. If you are looking for a nice little lightbox like plugin – check it out!

Out With the Old, In With the New

As you might have noticed – I took a week off from blogging in order to focus on something else – cleaning up Jappler.com. Over the past few months I have learned so much more about WordPress, web site optimization, and what I really used this web site for – so I decided I needed to take some time to redo this site.

From a design perspective, I decided to darken the colors quite a bit in order to remove some of the drabness of the old design. I also added a background pattern to give some depth, and also added in some new pictures in the header that represent changes/additions in my life over the last few years. I love working with greys – so I added more grey elements. I also simplified the layout and got rid of a number of image based elements to keep everything minimal.

From a UI perspective, I decided to focus on the content I have created over the past 4-5 years instead of a few static pages here and there. I moved all of the blog content into the main navigation so it is easier to find/navigate. I also used Jappler Menus in combination with the WordPress function to list all categories/sub-categories.

From a functional perspective, I started from scratch with this new version. I created a number of custom functions that make presenting content a lot easier. I dropped the YUI library and went with all jQuery based AJAX functionality. The code is leaner, faster, and easy to modify for any future needs. The comments are now using WordPress’s threaded comment functionality, and a number of other WordPress 2.7 additions. I also went through and got rid of almost 50% of my old plugins (replaced the functionality with custom functions, WordPress built in functionality – or completely removed unused plugins.

From an optimization perspective, this site uses far less javascript, CSS, and images and will load much faster than the previous site. I also increased the use of title tags, alt tags, and other easy tricks to help with search engine optimization.

All in all – this was something fun that I enjoyed and look forward to adding even more new design/functional elements in the future.

Show One Post/Page in WordPress

If you want to have a content area somewhere on your site that shows content from a post or page – and you want to do this with using the simplest of code (no loop, no query_posts, etc), check out the function get_post. The get_post function allows you to simply get one post’s title, content, category, etc by simply adding a few lines (see the example in the documentation) of code to your site. I have used this on a number of client’s sites as well as recently on my company site for the company profile. Keep it simple!

Quick CSS for WordPress Images (Updated)

A week or so ago, I posted some information on how to quickly style your WordPress images. After recently updating my company’s web site (SDAC Inc. – I noticed if you used captions, my custom CSS would not work. Here is some CSS that will work with and without image captions:

.alignright, .aligncenter, .alignleft {padding:4px;background:#ecece2;border:1px solid #c7c7bb;}
.alignright {float:right;margin-left:5px;}
.alignleft, .alignnone {float:left;margin-right:5px;}
.aligncenter {display: block;margin-left: auto;margin-right: auto;}

The difference? I used img.align.. which worked if you did not use captions, but if you use caption, there is an outer div class called align… The more generic CSS posted here takes care of both issues.

Quick CSS for WordPress Images

If you install WordPress and use the media uploader to manage your images in your posts – you can easily style your images quickly by adding the following code to your theme’s stylesheet.

img.alignright, img.aligncenter, img.alignleft {padding:4px;background:#efefef;border-color: #aaa #ccc #ddd #bbb;border-style: solid;border-width: 1px;}
img.alignright {float:right;margin-left:5px;}
img.alignleft, img.alignnone {float:left;margin-right:5px;}
img.aligncenter {display: block;margin-left: auto;margin-right: auto;}

This code will set up your images to float appropriately, as well as give a nice border as seen below.

Christmas in DC

Note* This information is now updated: Updated CSS

Find and Replace With phpMyAdmin (or using SQL)

Ever need to find and replace something in your WordPress database? (perhaps you changed domain names and have the old domain name or folder structure hard coded into some of your posts) You can easily update your database by using phpMyAdmin or by using the following code in any SQL interface:

UPDATE wp_posts SET post_content = replace(post_content,"http://olddomain.com/blog","newdomain.com/"); 

The first part of the command says “update the database table wp_posts” (where your content is stored). The later part of the command says “use the field “post_content” (where all your actual post content is stored” and then find “http://olddomain.com/blog” and replace it with “http://newdomain.com”. You can find anything (not limited to domain name) and replace it with anything as well. This is a great time saver!

Jappler Recommends: Lightview Plus WordPress Plugin

I recently switched from using a gallery WordPress plugin called fGallery to something that is more elegant and updated: NextGen Gallery During this transition, I found a really cool lightbox-ish plugin called Lightview Plus which is more polished than your typical lightbox plugin.

Example:

You do not have to add in extra code to get the images to show up in the lightview – it automatically takes care of everything for you.

Post Revision Coming Soon to WordPress!

I subscribe to the WordPress Development Updates Feed and this morning I got a nice morning surprise: “Post revisioning is in trunk”. This means you will be soon able to create a post, publish it, make a revision, and then keep the old version as well as the new version so you could compare them at a later date. This is one reason I often push clients to Drupal if this is something they need, but to have this in WordPress – this is great news. Great work guys!