I’m searching for a multimedia plugin that:

• uses HTML5 and Flash fallback,
• is easy to skin via CSS,
• can play audio, video, or combination of both within the same playlist
• can have multiple playlists on the same page,
• inserts Javascript correctly and doesn’t repeat the Javascript for each instance of the player or shortcode being used.

Bonus Features:

• a multimedia player widget
• iTunes and Amazon integrations

In short, why hasn’t anyone port the entire jPlayer script to WordPress? There’s a WordPress plugin that uses jPlayer called MP3-jPlayer, but it’s WAY more complicated than it should be to use it.

Instead of just complaining, I’m putting up a $50 bounty to whoever creates this jPlayer plugin for WordPress and release it to the public for free. You get paid to create a plugin that’s going to make you instantly popular.

This bounty is good for one plugin only. If there are multiple submissions, I’ll pay the best one. Sorry second place finishers!

I realize $50 isn’t much for a good plugin author to invest two to three hours so if anyone wants to pool money with me, you’re welcome to!

A mobile friendly blog theme that comes with built in breadcrumbs, pagination, single post stylsheet capability, Jigoshop e-commerce plugin integration, and simplicity. You simply upload, install, and start using this theme, no complicated theme settings to configure.

I hope this second solo theme release is re-assuring that DevPress is here to stay. This and the Dotos theme make it two minimalistic themes in a row now. I’m going to change up the design style in the next theme and it’s coming soon.

By the way, this new theme is free. Go to Good’s download page.

Introducing Dotos, a mobile-friendly photo-blog theme with native support for Jigoshop. View the live demo. This is the first theme designed and coded by me after the recent DevPress change of ownership.

I wanted to release Dotos a week ago, but due to taking time off (my birthday) and a sidebar bug I had to hold on to it for several more days.

Anyway, back to Dotos, it features a fullscreen template that automatically adjusts your images to any browser size. Although focused on photos, it comes with an optional sidebar (and hidden two-column layout based on whether the sidebar is active). Finally, like I mentioned above, Dotos supports Jigoshop out of the box. Everything about this theme is simple, smart, and mobile friendly. Best of all, it’s free.

I hope you like what I’ve done with this theme. More themes are coming soon.

Features Coming Soon to Dotos:

If you recognize what I mocked up for Dotos below, I agree. It is awesome.

After months of inconsistent collaboration, DevPress is left with one remaining co-founder, me — Tung Do. Justin Tadlock, Patrick Daly, and Ptah Dunbar are going to pursue personal projects.

To some, this isn’t surprising. DevPress managed to release high quality products and tease the community of buzz-worthy ideas, but what we needed most was consistency. If success is 80% just simply showing up well then we failed. I was gone for a month during my wedding and vacation in July. Ptah was in an accident in August. (Luckily, he’s back to smiling and coding with one pirate eye.) Patrick recently took a sabbatical due to personal reasons. Justin Tadlock was the only one to take breaks without any noticeable time off.

Bootstrapping a business is hard enough. Try doing it with an all-star team of equal share and no one personally responsible for anything then you might end up just like us. Although we continue to provide support at the forums, development and product release wise, DevPress has been inactive for a month. Experiencing roadblock after roadblock without any consistency for DevPress to establish itself, I think it’s safe to say the entire team is just burned out at this point.

I’m sure we’ll have time to reflect on what went wrong. But instead of dwelling on so much wasted potential, I’ve asked the guys to trust DevPress in my hands and they’ve agreed.

Moving Forward

Before you freak out, DevPress will continue. The club is still there, but will be focused on themes until further notice; my specialties are themes and tutorials, not plugins. Surely, I cannot replace Justin, Patrick, and Ptah by myself, but I’m not looking for new team members.

I’m just going to do the best I can as a one man team. When it makes sense to get help, I’ll get help. From this experience, I’m reminded having all-star team doesn’t always equal a win.

Instead of empty promises of bringing the awesome back to DevPress. I will move DevPress forward step-by-step. Any activity is better than inactivity. And you don’t have to wait for long. I’ll release a new theme before the end of next week. I like to stay fairly active and that’s good news for DevPress theme users (free and paid).

From now on, everyday, you can assume a theme is being worked on and it’s inching its way out the door to be released on DevPress.com. The quality will be on par if not better than what you see in the free and commercial themes market.

My First Act

If you haven’t noticed, my first act as owner of DevPress already happened. I redesigned and optimized DevPress for mobile users. You can now use the site, download themes, and get support while you’re on the go unlike before when DevPress was strictly built for desktops and large laptops. There are always a few kinks here and there with websites involving multiple management systems like what DevPress utilize so I’m sure the redesign transition will take another week to complete.

A Peak Into DevPress’s Future

Here’s the light at the end of the tunnel and I’ll be brief to let your imagination take over. All future DevPress themes with e-commerce capabilities will be mobile friendly and Jigoshop is my chosen platform/plugin to build e-commerce themes on. I’ve also been exploring bbPress and BuddyPress among other established plugins. My goal is create responsive, powerful themes with portable content, deep integration for popular plugins, and close-to-zero theme settings; I hate theme settings.

Taking over DevPress as a one man team is NOT another one of my self-challenges, in which I’d fail publicly and miserably. DevPress is a business with paying customers and my goal is to make DevPress customers/users very happy starting next week. For now, thank you for supporting me and I’m as bummed as you are to lose three DevPress co-founders.

Its harsh, I know, but its true. Google didn’t dominate the Internet because they found decent search results. They’ve built an empire upon sophisticated algorithms that help us find extremely specific things amongst the trillions of possible pages.

WordPress publishes the content. Let’s let Google find it.

Note that Google CSE will only search pages they have indexed. Meaning, if you setup your site today then the Google bot may not have crawled it and made your pages available for search.

Setup your search engine

1. The first step to using a Google CSE is to use your Google account to create the search engine. Go to http://www.google.com/cse/ and once you are logged in, click “Create a Custom Search Engine”.

2. Next, name your search engine, provide a description and then add the domains you would like to search (your WordPress site’s domain and any others you’d like to include).

3. Click “Next”.

4. On the “Try it out” page you can just click “Next” again.

5. At this point you’re given code to paste into your site. Ignore this code and click on the “Change the look and feel” link.

6. Choose the “Two page” layout.

7. Click “Save & get code”.

Copy & paste code to your site

1. Where it asks you to provide the search results URL, use your sites domain: http://example.com

2. Where it asks you to provide the query parameter, use the letter s. s is the query that WordPress uses to search the database.

3. Copy the search form code it gives you and paste it into searchform.php (or create this file if you don’t have one) in your theme. Replace the contents of this file.

4. Copy the search results code it gives you and paste it into search.php (or create this file if you don’t have one) in your theme. Only replace the loop (everything between the if ( have_posts() ) : and endif;. Your loop may start and finish a little differently than that.

Seriously, that’s it

Now anywhere you had a search form you should be able to enter a term, hit Enter and be taken to your search page with relevant results. Use the WordPress Search widget to place a search box anywhere on your site.

Some extra goodies though …

Check the “Include Google Analytics Site Search tracking code” box. Then go edit your Google Analytics profile and specify the search paramenter (remember … s).

Because you’re using the WordPress search query you are actually doing a WordPress database search behind the scenes, but because we replaced the loop with the new code we don’t see any results. The DevPress search page actually uses Google’s search and WordPress’ search. In the sidebar of our search results page we break search results out into specific categories just to give a bit more information and context so results.

After looking at what other WordPress development groups or companies have created in this niche and what the typical restaurant website looks like, I found that most WordPress themes made for restaurant websites are almost the exact opposite of what customers need.

What restaurant owners actually need for their sites is a static front page featuring an introduction area and some contact information. It’s definitely not sliding images of food, a calendar for reservation, and/or the latest blog posts.

For other groups/companies, that’s the problem with selling a theme at a high price. You feel like you have to over-deliver all the times even when it’s totally unnecessary, even when it gets in the way of people using your theme.

DevPress has a different philosophy. We roll out the most important features first then keep on adding features — necessary or most useful ones. And at every step of the way, we do our best to keep the overall product easy to use and your content portable. If we have to lock you into one of our products in order to implement a certain feature, for sure, you’re not going to see that feature in a DevPress theme.

Our method is different. That’s why we price our themes club differently.

My decision to run a local website using the real domain is crucial here. As opposed to using http://localexample/ we’ll utilize http://example.com locally where example.com is also the live domain. Many tutorials suggest setting up WP networks locally using subdirectories, but if you’re going to use subdomains in production why would you do something different locally? So the purpose behind this technique is to replicate a production website on a local machine without exception.

Editing your hosts file for subdomains

This is a snippet from the first post on how to edit your hosts file, and its still very pertinent for what we need to achieve:

Use your real domain

One of the most annoying things about local development is that most tutorials have you setup http://localyourdomin/. That means when its time for production you have to find and replace all occurrences of that in your database and files. Lots of room for error there. So let’s just use your real domain: http://example.com (obviously, replace all instances of example.com with your domain).

1. Edit your HOSTS file

In Windows, use Notepad to open C:\Windows\System32\drivers\etc (be sure to “Run as administrator”) . Mac instructions.

Add to the bottom of the file:

# 127.0.0.1 example.com #local
# 123.4.5.6 example.com #production

• The # (pound sign) denotes a comment. So everything following the pound sign is ignored. So this example won’t change anything once you add it to the file.
• 127.0.0.1 is the IP address of your machine. Replace 123.4.5.6 with the IP address of your remote server (the one your website is hosted on).
• #local and #production are just comments to signify which server goes where.

Now, if you un-comment the local server when you try going to example.com your browser will look to your local machine.

NOTE: You can get browser extensions to quickly switch between hosts. Since I do most of my development in Firefox I use HostAdmin.

Use what we did above to create a new line in your hosts file and simply add:

127.0.0.1 aaa.example.com
127.0.0.1 bbb.example.com
127.0.0.1 ccc.example.com

Repeat this for each subdomain on your network for which you’d like to view locally.

Modify Apache for local subdomain access

Copying from the original post, a single domain needs to be added to Apache for it to recognize your domain as a website:

Your computer now knows that example.com is hosted on your machine, but your server needs to know where your local website is located. Open up httpd.conf (varies depending on which software you installed, but in WAMP its in C:\wamp\bin\apache\Apache2.2.17\conf). Add to the bottom of the file:

<VirtualHost 127.0.0.1>
 ServerName example.com
 DocumentRoot "C:/wamp/www/example_com"
 ServerAdmin you@example.com

<Directory C:/wamp/www/example_com>
 Order Allow,Deny
 Allow from all
 </Directory>
 </VirtualHost>

Since subdomains in WordPress are actually virtual (i.e. no physical directory exists for the subdomain) the subdomains in the Apache file need only to point to the same location as the parent site.

In the Apache configuration file, httpd.conf, we need to add a ServerAlias line that specifies which subdomains should resolve at a specific physical location. Since our VirtualHost is using the same DocumentRoot as our subdomains we just need to add our ServerAlias line to the same VirtualHost. Take what we have above and modify to look like so:

<VirtualHost 127.0.0.1>
 ServerName example.com
 ServerAlias example.com aaa.example.com bbb example.com ccc.example
 DocumentRoot "C:/wamp/www/example_com"
 ServerAdmin you@example.com

<Directory C:/wamp/www/example_com>
 Order Allow,Deny
 Allow from all
 </Directory>
 </VirtualHost>

The only new line above is: ServerAlias example.com aaa.example.com bbb.example.com ccc.example

Save the file and restart Apache. You can now visit your domain and each specified subdomain locally (comment/uncomment your hosts file as necessary or use the FireFox addon mentioned above).

Let us know how you have your local WordPress network setup or any questions you have.

Ten people (including my mom, dad, and brother) from the states came back to Vietnam to attend. Therefore, I wanted an easygoing, family atmosphere so my family could relax, have fun, and talk with the Wife and I any time they want.

Without any more teasers, here’s how our small, six-table, humble little wedding in Vietnam turned out…

Preparation

Hair and make-up for the bride done in-house by relatives.

My wife had a huge pimple right on the nose… on her wedding day! Fortunately, my cousins did a great job covering it up using very light makeup.

Big cousin Frank helping me with the tux and saying “up-yours” to my peace sign.

The Wedding

Lef to right: mom, brother, wife, me, and dad

Ceremony

Let’s Eat

Miscellaneous

The next time I’d wear a tux will probably be my kid’s wedding.

Excuse the peace sign, we Asians love it because we don’t know what other gang signs to put up! Several bigger weddings took place at the same venue. Each room hosts one wedding. We took the six-table room, but our small sixty-guests wedding partied longer than other weddings so we were last to leave the venue hahahah!

On Vacation

And here’s the everyday normal Small Potato with his wife. We’ve been traveling around Vietnam with family and friends, which means I’ll be on vacation until August 5th, 2011.

Growing old like this doesn’t suck at all…

p.s. – We took 400 something photos at the wedding, but I’m too lazy to post them.

Details

• The club will cost $5.00 per year for all existing and to-be-released themes/plugins. Once your club membership expires, it’s $5.00 to renew.
• We don’t guarantee how many products will be released per year.
• We don’t guarantee support.

Questions and Answers

How many themes and plugins will DevPress release per year? Quality not quantity. For a group of four developers, approximately 12 themes and several plugins per year would be a good guess.

Why no guaranteed support? Other companies charge you for support, not just for products. Support is what we do naturally. No one has to make us do it. We figured charging for themes and plugins is enough. Visit the DevPress forums where we actively answer every support request.

Why not free? I would love to see DevPress move towards a free system someday. However, we all have our day jobs and families to look after. A free based service/community is not an option for us because we don’t have the funding to start up a stress-free work span of six months to a year.

Why $5, not 10, 20, or 70? There’s already a themes club at almost every price range. Other groups and companies price their themes, plugins, and/or club strategically so they can market their products, gain affiliate support, compete for users, or whatever the reason/motivation is. Here’s our motivation:

• ego
• altruism
• love for WordPress
• the need to put food on the table

Charging a premium price means we have to compete with other companies feature for feature to prove we are superior even when certain features aren’t necessary. That’s not what we want because we don’t develop our products like our competitors do.

If it’s necessary, we’d build it. If it isn’t necessary, someone else will build it and make you pay $100 for that shiny extra toy you rarely use. That’s not us.

DevPress is better because it’s simple and it does things the WordPress way. And no, we wouldn’t feel proud of a theme that has 50 to 100 different configurable options. Actually, our themes typically have less than five optional settings per theme. Yet, DevPress themes still manage to come packed with powerful features.

Take the News theme for example. It’s been downloaded more than 70,000 times. Our users love News not just because it’s simple, but because it’s powerful and your site looks better the more you use it. No other companies painstakingly ensure their themes work this way and that is why DevPress is unique.

So why follow the herd and compete when our approach is completely different?

While it may seem like $5.00 is undervaluing our efforts, our goal is not to maximize profit per customer, but to maximize total number of users.

How does this $5.00 price affects future themes and plugins by DevPress? Easy, it doesn’t. Even if we’re releasing themes for free, it has to meet our own standards first and we set our standards pretty high. Regardless of free or commercial, pick any theme by DevPress; it’s one of the best out there.

How are you going to handle existing customers? We will take $5 from each purchase and refund the rest. Existing customers are automatic club members.

Haven’t you learned from the failure of the Wpdesigner $5 themes club? Yes we have. The WPDesigner themes club had one person doing everything. The DevPress Themes and Plugins Club has four people and not just any four.

What if this club idea isn’t successful? DevPress is here to stay regardless of the result. Making themes and plugins is what we do. Even if there’s no money in it, we’d still do it. Getting paid to do what you love to do means having more time to dedicate towards it.

Whichever application you end up using it still only solves some of the problems. So this post will divulge my development environment for some projects. This isn’t the ‘end all, be all’ and it will evolve, but its evolved to this point over years and years and I finally have something I really enjoy.

Table of Contents

1. Local environment
   1. Install Apache, MySQL, & PHP
   2. Configure MySQL
   3. Configure Apache
   4. Install WordPress
2. Code editor
3. Source control
   1. SVN Setup
   2. Checkout locally
   3. Deployment

Local Environment

I used to hate local development. It makes sharing your work so much more difficult, configuring a local server isn’t always easy, and there’s so many things to change once you move to production. Not anymore.

Install Apache, MySQL, and PHP

First of all, for any local development you’ll need WAMP, XAMPP, or MAMP. These set up an environment that allows you to run a website on your machine. I use WAMP on a Windows machine. All of these programs will install Apache, MySQL, and PHP along with some helper applications like phpMyAdmin.

Choose which one you like the most and install.

Configure MySQL

After you’ve installed your server environment you need to create a database for your WordPress site.

Open phpMyAdmin or another bundled database application. From the homepage of phpMyAdmin you’ll be able to easily type the name of a new database and save it.

Configure Apache

There are two steps to allowing your computer to act as the server for a website using a real domain. Our intention is to setup example.com to run off of the local computer (rather than from the internet).

Use your real domain

One of the most annoying things about local development is that most tutorials have you setup http://localyourdomin/. That means when its time for production you have to find and replace all occurrences of that in your database and files. Lots of room for error there. So let’s just use your real domain: http://example.com (obviously, replace all instances of example.com with your domain).


1. Edit your HOSTS file

In Windows, use Notepad to open C:\Windows\System32\drivers\etc (be sure to “Run as administrator”) .

Add to the bottom of the file:

# 127.0.0.1 example.com #local
# 123.4.5.6 example.com #production

• The # (pound sign) denotes a comment. So everything following the pound sign is ignored. So this example won’t change anything once you add it to the file.
• 127.0.0.1 is the IP address of your machine. Replace 123.4.5.6 with the IP address of your remote server (the one your website is hosted on).
• #local and #production are just comments to signify which server goes where.

Now, if you un-comment the local server when you try going to example.com your browser will look to your local machine.

2. Edit Apache’s httpd.conf

Your computer now knows that example.com is hosted on your machine, but your server needs to know where your local website is located.

Open up httpd.conf (varies depending on which software you installed, but in WAMP its in C:\wamp\bin\apache\Apache2.2.17\conf).

Add to the bottom of the file:

<VirtualHost 127.0.0.1>
 ServerName example.com
 DocumentRoot "C:/wamp/www/example_com"
 ServerAdmin you@example.com

<Directory C:/wamp/www/example_com>
 Order Allow,Deny
 Allow from all
 </Directory>
 </VirtualHost>

Save.

Install WordPress

Download the latest version of WordPress, unzip it, and put its contents into C:\wamp\www\example_com.

Go to example.com and you should see the WordPress installation screen. Follow the wizard. The database name is the one you created earlier. The username (by default) is “root” and the password is blank (null).

Code Editor

You may use Notepad to do all of your development. Pat yourself on the back; you’re hardcore. You’re also missing out.

Finding the right software is hard. Some are ugly, featureless, slow, or dead. A couple years ago I found Aptana. Its an IDE, which basically means that it does way more than edit files.

What does an IDE (and specifically Aptana) offer?

• Remote FTP/SFTP file editing. Upload/download of files.
• Code completion: PHP, CSS, HTML and more.
• Real-time error/warning checking against W3C standards.
• Local projects

After you install Aptana you can create a project.

1. Go to “New” → “Project…”
2. Name your project (maybe example.com)
3. Uncheck “Use default location”.
4. Browse to and choose C:\wamp\www\example_com
5. Click Finish

Your project now contains all WordPress core files, themes, and plugins. Use the project explorer to view all of your files

You can also use Aptana to connect to FTP and remotely edit files. A better method may be to edit locally and use Aptana’s synchronization features to push the files live after you’ve tested locally.

Source Control

At this point you don’t need to go any further unless you’re interested in using source control. Everything we’ve done so far is good enough for a local environment and/or remote editing. But you can make things even beefier with source control…

Source control can be confusing and I’m not going to explain everything here. Instead I’m just going to layout how to use various tools to interact with SVN.

For those a little unfamiliar though, here’s some benefits of source control:

• History of changes
• Backup of code
• Teams can work on the same code simultaneously

I use a few different repository systems, but my favorite is Beanstalk. A single feature makes Beanstalk amazing: deployment. More on this in a bit.

SVN setup

Repository structure is important to get right. There’s lots of ways to do it and you probably will need to tailor it to your project’s needs. But imagine you’re developing several themes and plugins. This is the organization I’m using for just that:

/
    /themes/
        /my-theme/
            /branches/
            /tags/
            /trunk/
                index.php
                style.css
    /plugins/
        /my-plugin/
            /branches/
            /tags/
            /trunk/
                my-plugin.php

This organization allows you to add multiple themes and plugins and keep them each separate from each other and allows you to tag a new version of the theme/plugin.

Create that structure in Beanstalk or whichever solution you’re using. Add a theme or plugin directory and put some files in its trunk directory.

Checkout locally

Now we want to checkout our theme/plugin locally and have it sit right inside the local WordPress installation we already setup.

1. Install TortoiseSVN
   1. This allows you to do SVN actions within the Windows file system
2. You’ll need to restart after you install. So tweet this post so you know how to get back to it ;)
3. Navigate to C:\wamp\www\example_com\wp-content\themes
4. Add a new directory with the name of your theme, my-theme
5. Right click my-theme and choose “SVN Checkout…”
6. Enter the URL of your repository
7. Make sure your Checkout directory is the one you right clicked on
8. Click OK

You’ll probably have to enter your SVN credentials as well.

Now you can login to your local WordPress and your theme/plugin will be visible (assuming you have the necessary files).

You can edit files and view the changes locally, then once you’re satisfied with your work you can commit it to the repository.

Deployment

Here’s the fun part (and we’re almost finished). Like I said at the start, it annoys me to have to manually upload and overwrite files via FTP. Its just an extra step and more room for error.

Deployment works like file syncing. Beanstalk keeps a revision record and puts it on each of your servers. This file tells it which other files you’ve made changes to, added, or deleted. Then it scours your server and syncs the files by making it identical to latest revision in your repository.

Using Beanstalk you can automatically deploy all commits to your remote server. I don’t suggest doing this exactly.

Staging server

Use Beanstalk to setup an automatic deployment every time you commit to your staging server. Pushing all of your commits to a staging server makes your latest revisions remotely accessible. This is handy for showing clients or for non-developers to see a working example (i.e. quality assurance, marketing, etc.). Its also a good idea to keep the staging server environment identical (or very similar) to what you’ll be pushing it to on production.

Production server

Finally this is your 100% publicly accessible live website. I use Beanstalk to manually deploy to this environment. Automatic deployment to production may work for you (especially on smaller, less critical sites) but you’ll need to be ready to roll back in the event of any problems.

After staging looks and works perfectly then I use a few clicks of the mouse inside of Beanstalk to manually deploy the latest version. Within seconds I’m confident that all production files are up to date.

Roll back

In the case that something goes horribly wrong, just manually deploy the previous revision. Its so easy!

Show Me Yours

I’d love to know how you have your environments setup. I’m willing and ready to improve mine. Streamlining the process just means I can spend more time paying attention to better code.