You can view examples of what the plugin does by checking out the sidebar of any Envato Marketplace blog and look at the Popular Files section. A quick note, the code for those sections is in the functions.php and it is not currently using this new plugin, but they are basically the same code just less option oriented since we only need them to use one API set and not pull from multiple ones.

EDIT: I added it to my sidebar so you can see it right here in action.

Installation

• Upload the envato-marketplace-itmes folder to the /wp-content/plugins/ directory
• Activate the plugin through the Plugins menu in WordPress
• Anywhere on your blog you would like to see the thumbnail gallery add the following code to you theme files (sidebar.php recommended).

1
2
3
4
5

<?php 
if (function_exists('envato_marketplace_items')) { 
  envato_marketplace_items(); 
} 
?>

Download File

• Envato Marketplace Items

Donations

• Make a donation and help keep the awesomeness flowing.

Disclaimer

SimplePie, Oh Yeah!

Yes, we are using the amazing SimplePie feed parser to aggregate feeds and give you fresh daily links, images, and even twitter updates with the ability to paginate all the content independently and at the same time. By “at the same time” I mean you can paginate one section and it will not loose the place of the other section. Just a little added bonus I thought might be good to have. Also, I opted to not use the WordPress plugin for SimplePie due to it’s restrictive feel, I needed to do some very customized code and the plugin was getting in the way.

I have to say that this was by far the most complex and interesting use of SimplePie I have ever created. Normally you would not use SimplePie to pull twitter updates because the RSS output is void of any links but with a little PHP string manipulation everything is working perfectly (I hope) and the main thing is we can paginate the updates; I’ve yet to see a JavaScript version that can paginate twitter forward and back.

Snapshot

Some Final Words

Well, I hope you enjoy the new site and I am very interested to see if the new larger design is going to be a hit or not. Also, to clarify only 8% of the users who visit Creattica Daily have a screen that is not 1200px or above. So, this was the perfect place to test out this kind of design.

After many months of hard work, Collis Ta’eed (design), Mathias Meyer (Rails), and I have reached the final stages in pre-launch testing for the new Freelance Switch. Within a week or two we will have thoroughly tested the staging site to account for what I’m hoping is almost all bugs. The site is the mashup of three different applications and a seriously cool plugin. Below I’ll let you in on what technologies we used to build this very awesome web site.

Blog & Plugin

For the blog and most of the sites regular content (i.e. contact, about, etc.) I built a WordPress theme that is extremely custom and sexy. In addition to the WordPress theme there are a number of custom & downloaded plugins but only one that really is worth mentioning, an improved version of the Community Links plugin you see at Psd.tuts+ or any of the other tuts+ sites. The plugin works in a similar fashion as the old one but allows the user to upload an image and associate a category with the link. Now everything will be categories and have a thumbnail next to it, nice right?

Forum

Here we used BBpress and a custom theme I coded to match the blog. However, I also had to re-create many of the functions that BBpress comes with to change the output because the theme was not going to show content in a tabular style so I had to un-table the forum. A bit of extra work but well worth it in the end.

Job Board & Freelance Directory

The very talented Mathias Meyer build the backend of this amazing Rails app, my job was to skin it. In the end the old job board got a new makeover and had a directory of freelancer added to it. Some amazing stuff, the addition of the directory is going to be huge in my opinion, but I’ll let you guys be the judge.

All Together

In the end, the Rails app and forum are bridged together so they will share user info between the two databases. As well, the search feature in the header is something I really enjoyed creating. You can choose from a drop down list of different section that you want to submit your search to and the form will will return the proper output based on your query. Basically, you can choose to search between the blog, forum, resources, jobs, directory, and podcasts. Anyhow, the site should be live very soon and ready for feedback and blissful enjoyment. This is really just a teaser to whet your appetite, so hold out cause the real thing is coming shortly to a computer screen near you.

A quick history reveals that Web standards are the brainchild of the World Wide Web Consortium (W3C), which was founded by Sir Timothy John Berners-Lee, who has also been credited with inventing the internet. That guy seems to be getting around. Anyhow, the idea behind standardization is to make it possible for all of us to be building off the same set of blueprints in a way. For example, if you know what the standard is for how to write HTML, XHTML or CSS then you can write code that will be both valid and superior to the old bloated circa 1996 style of nested tables (you know who you are) and helps ensure your site is accessible to the largest possible audience. Some points I want to touch on below encompass just a few of the things that make standards great from a self serving standpoint. If you want to know some of the reasons standards will help you, and in the process your audience, read on.

1. Search Engine Exposure

One of the most important reason to use standards is search traffic. Search engines such as Google actually rank valid code higher than invalid crappy code. I don’t know about you, but to me that’s a pretty big deal. Especially if your main source of income is your freelance job and the referrals that search traffic might bring your way. Research shows that the leaner and cleaner your code is written the better search engines can index the content inside the site and start sending you traffic. However, if you are using a lot of images for text, then you really should be using the alt and title tag to the fullest to counteract the negative effects that can have on your rank. Seriously, let people know what they are seeing, if for some reason they’re not seeing it. It’s so important to not have a broken image, but if you must, make it accessible.

2. You Become Elite

Anyone who has worked hard for something in their life knows that if you follow directions and practice you’ll eventually become better at whatever it is you’re trying to do. The same thing is true when you follow web standards; you become a better web developer. Don’t hold yourself back by trying to learn everything on your own. Follow some guidelines and you’ll thank yourself later when you run into some obscure bug that only effects a certain browser because the nested <ul> tag is out of place. Trust me, I’ve been there. If you can learn to spot the waldo in a sea of red you’re on your way to becoming a pro.

3. Your Impact on the Virtual World is Positive

Karma isn’t just some guy named Earl running around making up for all the bad things he’s done? It also about you or me just being a good citizen and the internet is no different, there are good and bad citizens all over the place. Bottom line, don’t be a jackass and plague the internet with crappy code, it’s just good Karma to do the right thing. And to tell you the truth, I feel a great sense of accomplishment when the Markup Validation returns green! I feel like I did something good for the internet and instantly want to strike my Captain Morgan pose. Anyhow, I’ve learned that good things happen to people who continually do good things. Standards are good, so do it for your rent and some new shit. God knows you need another pair of shoes.

4. It’s marketable

Telling people you follow web standards is a selling point, and it makes you sound cool LOL. But really, if you know what you are doing and walk and talk like a pro chances are people will take what you say with some serious thought. It’s a fact that web standards are going to teach you how to be better at what you do and therefore make you more money. So you can buy shit! Or blow it on Computers like me. Really what it boils down to is you need to be able to write clean well thought out code or you will not make it very far in this business for very long.

In summary, use good clean code and get paid cold hard cash dollars for being such an elite web ninja! Seriously though, standards are awesome and you should try to adopt as many as you can. Granted, it is unrealistic to think you will use them all because it would be super difficult to abide by every rule, but it’s reasonable to assume you can create valid code all the time. And… sales pitch finished.

I use this function on my site and pretty much on every other site I’ve ever built. However, the only different is this new code is leaner and will test many levels deep. A very handy tool for the custom type themes that seem to be popping up in the wake of what I am calling a WordPress feeding frenzy. The popularity of this platform has been growing exponentially and who can blame it, I absolutely love working with WordPress.

Anyhow, this is the first plugin I have submitted to be hosted in the Directory, mostly I just wanted to test out committing a plugin to the directory and this seemed like a logical place to start. If you’re interested in what was changed here is the code. Also, you can update the old functions code with this much better code.

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

/**
 * The parameter can contain the page ID, or page name
 *
 * @since 1.0
 * @uses $post
 * @uses $wpdb
 *
 * @param mixed $page either int or string
 * @return bool
 */
if (!function_exists('is_page_or_ancestor')) {
  function is_page_or_ancestor($page = '') 
  { 
    global $post, $wpdb;
 
    // If is not numeric get page ID
    if (!is_numeric($page)) {
      $page = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_name = '".$page."' AND post_type = 'page'");
    }
 
    // Recursive search through page hierarchy
    if ( is_page($page) || ( is_array($post->ancestors) && in_array($page, $post->ancestors) ) ) {
      return true;
    }
    return false;
  }
}

Sample Usage

1
2
3
4
5

if (is_page_or_ancestor('about')) { 
    DISPLAY SOMETHING
} else {
    DISPLAY SOMETHING DIFFERENT
}

Download File

• Version 1.1

Donations

• Make a donation and help keep the awesomeness flowing.

Disclaimer

For example, the cat_is_ancestor_of() function comes in really handy and does a lot of the heavy lifting for this simple but very powerful function. I use this very function to build complex category based navigation and test for active states and use the appropriate CSS in the change we’re actually in one of the categories we’re testing for. If you have question feel free to ask by commenting below and enjoy mastering WordPress!

The Function

1
2
3
4
5
6
7
8
9

// If is category or subcategory of $cat_id
if (!function_exists('is_category_or_sub')) {
	function is_category_or_sub($cat_id = 0) {
	    foreach (get_the_category() as $cat) {
	    	if ($cat_id == $cat->cat_ID || cat_is_ancestor_of($cat_id, $cat)) return true;
	    }
	    return false;
	}
}

Sample Usage

1
2
3
4
5

if (is_category_or_sub(1)) { 
    DISPLAY SOMETHING
} else {
    DISPLAY SOMETHING DIFFERENT
}

Donations

• Make a donation and help keep the awesomeness flowing.

Disclaimer

The code behind this WordPress web site is very custom to say the least and I took every chance to build upon my personal WordPress functions library. Some of the code behind the site I will be sharing in a few articles over the next few weeks. But to give you an idea of what powers this site is a short list of features I have cooked up. But before I go to far into this I have to say that I removed probably 20 or so pages if you’ve been here before and are wondering, basically the whole services section was removed because most people, based on my analytics, only want to see the portfolio section anyhow. As well, I’m trying to focus mostly on WordPress based projects for a while. Not to say I will automatically turn something down it’s just what I excel at. WordPress themes, plugins, and functions with some sexy designs for good measure. Moving on.

The XHTML/CSS

100% valid, if you find a page that doesn’t validate please I encourage you to let me know. I am a big stickler for valid semantic code and do my best in client projects but you can’t always control what people do after you build the thing. So for that very reason I make damn sure my site is valid. I always write my code in XHTML 1.0 Strict. It’s very important to me that you separate the content from the presentation and only use tables for tabular content. However, you will find that I use some CSS3 that will not validate but I keep it in a file names invalid.css which is basically the rounded borders you see scattered around the site.

The WordPress

In the functions.php file for this WordPress theme you’d find some serious hidden gems. I have for example, a function that queries my portfolio page and finds all of it’s children and allows me to dynamically pull information from them and display it back as a gallery of thumbnail images, titles and a short descriptions for each child. In addition to never having to update my portfolio page because it’s completely dynamic, I can also use the same code to show the last two projects in my portfolio on the home page. Basically, it drastically reduces the amount of work needed to maintain a portfolio web site without turning my pages into blog posts like many of the other themes you find on the internet. I think it’s important to separate your blog posts from your pages. It’s just seems unnatural to me to try and fool your blog into being two things at the same time., but that’s just my opinion.

Another great feature that I wrote a while back and refined into what it is now, is the ability to know if you are on a certain page or any of it’s children, including grandchildren. With that, you can do some pretty sweet conditional stuff like show only certain scripts on a set of pages or maybe a different sidebar than regular pages have. Also, I did the same thing for categories. The functions are: is_category_or_sub() and is_page_or_sub() and work just like their WordPress counterparts is_page() and is_category(), but just with the added ability to check if it’s a child, as well. Something that I think WordPress is seriously lacking and should consider adding to the core.

There is tons of things I could go into that make up this theme and it’s very custom little bits but I’ll save some for a tutorial or two very shortly. If you want to see the is_page_or_sub(); functions I wrote about that the other day.

The JavaScript

Oh yes, I use a lot of custom written JavaScript piggy backed on the fantastic jQuery library. It’s such an awesome library that you would have to be blind not to see how fantastic it is. Anyhow, The forms are AJAX driven with a custom tooltips script that displays a little extra info to direct my users and help to make the form data a little more meaningful. And the form will work with JavaScript turned off, which is extremely important if you want to make sure people can contact you regardless of if they want to be anti awesome or not.

A feature that I’m really proud to have on my site is on the home page. It’s not blindingly noticeable but if you click one of the three large images in the header they rotate in both right and left directions. A very sweet effect if I say so myself. Subtle, but if for some reason you get the feeling to click one of those images you’re not disappointing.

In summation I love the new site and am extremely happy to roll it out for everyone to critique and hopefully enjoy. I hope you love it as much as I do and if you don’t, well that’s just OK, I can live with that.

Well, that whole notion hit a speed bump with their newest line of MacBooks. The mid-range MacBook (as opposed to the MacBook Pro or the white base model) is missing a Firewire port. Firewire, or IEEE 1394, is a faster way to transfer data between computers or peripherals. USB 2.0 does perform most of the same functions at a slightly lower speed than Firewire 400. However, until about two years ago, nearly all consumer level camcorders were Firewire only, and not USB.

As this realization began to sink among consumers, outrage emerged across the blogosphere and among shoestring-budget creatives. For the family wanting to edit their home video, they would now have to decide whether to upgrade to the MacBook Pro, a $700 jump; downgrade to the white 13-inch Macbook, which has less drive space and less upgradability; or buy a new camcorder that has USB 2.0 connectivity, an extra couple hundred dollars out of pocket.

Admittedly, times do change, and technology with it, but this particular shift was neither smooth nor were consumers really prepped for the transition. It just happened, which left Apple fending off complaints left and right.

In the end, Apple CEO Steve Jobs just laid it out there: “Actually, all of the new HD camcorders of the past few years use USB 2.” And some argue that the MacBook is not what should be used to edit video, mix down multi-track audio, and do other niche tasks usually performed by professionals. The MacBook is a consumer model laptop, and the MacBook Pro is just what it says it is: a professional model laptop meant to handle projects that utilize Firewire peripherals.

Understood. I just think consumers and creatives could have been given some advance notice. Better yet, people shouldn’t have to decide if they need to buy a new peripheral because their $1300 MacBook doesn’t support it. And yes, I get that it’s not a MacBook Pro, but I do have a POS Dell & HP laptop that both have firewire and even the cheaper white base model has it. Don’t get me wrong, I love Mac and is why I own a Mac Pro, but I just think everyone should have access to firewire speeds. Who knows, they might fix this and maybe they might start selling iMacs with non glossy super reflective screens again; I’d go buy one tomorrow if that were the case. Until then I’ll just have to be satisfied with my Mac Pro (very) and the new MacBook Pro I plan on buying in the near future (awesome).

This is pretty much the same function as is_page(), it lets you pass in a page ID or slug, your choice, but the only real difference is that it goes beyond a single page and looks for a family relationship. The function will return true for all children and grandchildren of the page id or slug you pass in. For example, you want to show two different sidebars, one for normal content and one for the portfolio section. You would use this function to do that. First, copy and paste this code into your functions.php and then take a look at the usage example below.

EDIT:
You can get an updated version if this function and as a plugin if you got to here.

The Function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//If is page or subpage of $my_page, works with both ID or name.
if (!function_exists('is_page_or_sub')) {
    function is_page_or_sub($my_page) {
        global $post, $wpdb;
	$grand_parent = $wpdb->get_var("SELECT post_parent FROM $wpdb->posts WHERE ID = '".$post->post_parent."' AND post_type = 'page'");
	// If you pass in a string, get the page ID of $my_page to use below
	if (is_numeric($my_page)==false) {
            $my_page = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_name = '".$my_page."' AND post_type = 'page'");
	}
	// If this is $my_page or the child or grandchild of $my_page return true 
	if ( is_page($my_page) || $post->post_parent == $my_page || $grand_parent == $my_page ) {
	    return true;
	} 
	// Else return false
        return false;
    }
}

Sample Usage

1
2
3
4
5

if (is_page_or_sub('portfolio')) { 
    DISPLAY PORTFOLIO SIDEBAR
} else {
    DISPLAY REGULAR SIDEBAR
}

If you have any question feel free to comment below. Have fun taking over the internet one WordPress blog at a time.

Donations

• Make a donation and help keep the awesomeness flowing.

Disclaimer

Now when you sign up for the plus program you only pay $9 per month for access to all three of the available sites that participate in supplying the plus program with content. Or you can get three months at a time for only $22. The best thing is that the price isn’t going to change when they add more sites to the mix. So when Ae, Audio, or even the Flash sites start adding content to the plus program you will just get even more for your money. Awesome!

Anyhow, go check out the dashboard and if you have any question on how I built it, feel free to ask or just comment that it’s awesome and you freakin love it!