Hey! I'm a WordPress Designer & Developer that loves writing too. Combine them all and you have a killer combination for articles. I love good practices, good grammar and beautiful websites.

Follow
Harley:
Twitter Google +

Harley's website

Make WordPress Emails Pretty and Responsive With WPMUDEV’s New Plugin!

By default, WordPress’s emails are pretty ugly. No logo, header, or footer or any styling at all really.

Wouldn’t it be nice to add your own branding to it? Make it look like an email someone actually wants to read — instead of looking like a dog’s breakfast of text. Not only that, but you want to make it easy for everyone that reads email on their mobiles, not to have to zoom in and scroll both horizontal and vertical to read!

emails-featured-image

Read more »

WordPress.tv Needs You!

WordPress.tv has long been a great community resource for all WordPress related video.

That goes for screencasts, tutorials, guides, WordCamp presentations, and much more. At long last, they’ve turned to the community for help.

Yep! Now anybody can submit their WordPress screencasts, videos, interviews, reports, reviews and videocasts to WordPress.tv for the whole community learn and thrive from.

As with any good content aggregator, they’ve got some strict guidelines for quality control, but I think it’s a good thing.

featured-wordpress.tv

Read more »

The Best Social Integration Plugins For WordPress Reviewed

There are over 350 WordPress plugins tagged “Share” in the WordPress plugin directory. But most of them, let’s be honest, fall short, with the exception of a handful of excellent winners.

I’d say there are three facets to social integration: Engagement, Self Promotion, and Viral Value. Whilst you can force none of these, there are definitely great tools out there to make it as easy as possible for you and your readers to make noise about your site on social networks.

Without further ado, I present to you the mighty five of WordPress social integration.

iStock_000019619103Small

Read more »

How To Build Your Own WordPress Contact Form and Why

I’m a massive fan of building stuff from the ground up. There are loads of plugins around for everything you could ever wish for in a WordPress blog, but I feel both rewarded and secure when I build features from scratch.

Why bother? Most of the time I don’t want to mess around with a plugin’s UI, or the plugin does way more than I actually want it to do. Without hacking the core files, plugins can be very rigid with what you’re allowed to do.

feature-image

Read more »

Set Up A Killer WordPress Test Environment Locally using MAMP on OSX

For the majority of articles I write, I begin with a fresh install of WordPress. It’s the best way to ensure control when you have people following along and doing exactly what you do.It would be very tedious if for each article I wrote, I had to create an entirely new WordPress instance. That would require a fresh database, the most recent version of WordPress, a new user, etc.The answer, of course, is WordPress Multisite. (Btw, check out our Multisite guides here.)If you’re testing loads of CSS, you’re going to need a Windows virtual machine set up as well! Cross browser compatibility is essential, so it’s handy to have Windows versions of Chrome, Explorer, Firefox and so on at your fingertips.The coolest part about MAMP (Mac, Apache, MySQL and PHP) is that you can basically have your own local server running (duh!) with custom domain names. These domain names aren’t accessible to the rest of the world, but when you’re constantly looking at WordPress, it’s kinda nice to not see the default “localhost:8888″ as your URL for everything. This server CAN, however, be visited by your local Windows setup.The End ResultAt the end of this article, you’ll have a nice WordPress MS site in which you can create multiple blogs (with multiple themes to test). You’ll also have a Windows Virtual Machine in which you can check out the aforementioned sites in Internet Explorer (god forbid!), and so on.The CatchMAMP has a free version, and a PRO version. For this tutorial, we’ll be using the paid version. You can use the free version if you wish, there’s just a little extra set up to go through (which I’ll point you in the right direction to later).For Windows testing, we’ll be using VMWare Fusion. I love VMWare Fusion for its “Unity” feature- you can seamlessly have Windows windows (har har) in your OSX setup. I like this, because I really don’t like the Windows UI and hate looking at it. But that’s just me!Both of these are paid apps. But, if like myself you’re constantly testing and creating multiple WordPress themes, they are two invaluable tools to have.Setting up a MAMP ServerMAMP is the easy part. Thanks to MAMP PRO, setting up a multisite installation is a breeze. We can even set it up under a custom domain. WordPress.ms seems fitting.Setting the Correct PortsOnce you’ve installed MAMP PRO, fire it up and you’ll be presented with the welcome screen- close that for now, and jump back to the MAMP PRO app.You’ll see that Apache and MySQL are using some strange ports- 8888 and 8889 respectively. In order for our Windows box to reach our site properly (and for custom domain names to resolve correctly), we need to change these to the default Apache and MySQL ports. They are 80, and 3306.OSX comes with a version of PHP pre-installed that’s pretty difficult to get set up. Since we’re using MAMP though, there’s no need for it. That does mean, however, we need to turn OFF internet sharing in System Preferences. Fire it up, and make sure it’s not active.Set Up the ServerCool. Now we’ve done that, you’re going to want to select the “Hosts” tab in the top left of MAMP PRO, and click the “+” symbol on the hosts list to the left.Here is where we set up our brand new WordPress server. You need to set 3 things here: The Server Name (URL), Disk Location (where the files reside) and an Alias (URLs). We’re going to use the domain name “wordpress.ms” as our domain, since a quick trip to wordpress.ms will show you it doesn’t conflict with any actual live sites.I’ve set the root directory to be ~/Sites/wordpress.ms. You can make it whatever you want, but I think it’s nice mapping file directories to URLs.As good practice, I always make sure the Server Name mimics the first alias. Hit “Apply,” and it will ask you to restart the servers. Do so. You may be prompted to enter your password.If you jump to your favorite browser now and visit wordpress.ms, you should be presented with the default MAMP screen. Great!If you can’t afford the PRO version of MAMP and still want to use domain names, there’s a great tutorial about it you should definitely read up on.Next Comes the DatabaseAs with any website, you need a database to accompany the WordPress website. If you head back to MAMP and select the server tab (next to the hosts tab), then the MySQL sub-tab, you’ll see a button to launch PHPMyAdmin. That’s where we’ll create our database.Once PHPMyAdmin launches, you want to go to the databases tab and enter a new database name. Call it whatever you like, wordpressms will do.By default MAMP PRO sets your MySQL username and password as root and root. Easy enough! We use that when we’re setting up WordPress, but first we need to download it!WordPress SetupThis section focusses on setting up and installing WordPress MS, so if you know how to do this, feel free to skip to the next section.Head over to WordPress.org and download the latest release of WordPress. Unzip it, and drop it into the directory we set earlier- if you’re following my steps, it should be in ~/Sites/wordpress.ms (~ is your home directory!).If you refresh your wordpress.ms site in your browser, you’ll be presented with the usual set up blog page. Enter details as usual, but make sure you specify port :3306 when you set the database host! This is essential, otherwise your site will not work.The details following are up to you- call your site what you wish, whether it be “WordPress.ms” or “WordPress Tests” or “WordPress Development.”All goes well, you’ll be told by WordPress that WordPress has been installed and you should login!Multisite Once logged in, it’s time to activate multisite.Open wp-config.php in our new install, and on line 82 (just below the WP_DEBUG constant definition), paste the following.If you refresh your browser while logged in, there will be a new menu item within the Tools section called “Network Setup.”One this page, you’ll be asked to do a little extra set up regarding your blog. You want to make sure the websites are set up under sub-directories, and once again call it whatever you like.Upon clicking continue, you’ll be prompted to add some more code to your wp-config.php file (which you should add below the WP_ALLOW_MULTISITE constant we entered just before).And to completely re-write your .htaccess to allow multiple blogsYou’ll then have to log in again after WordPress has properly calibrated itself for Multisite use.Once logged in again, you’ve now got access to the Network Admin! This is great news. For all Mac purposes, you’ve got a brilliant WordPress testing ground set up for all your clients/themes/projects!I’ve been using this set up for years, and its yet to fail me. I can have an unlimited number of test sites, using only one database and one set of WordPress code. It also means when new versions of WordPress are released, you’ve only got to update once- and it replicates across all sites.Facing The Dragon (Windows)We had to get here at somepoint *sigh*, but having a Windows box is an essential tool for any front end developer. You’ve gotta know how any site you work on behaves on IE as a start, and having Windows versions of other major vendors is a huge plus too.I’m not going to go in-depth on how to install it, as plenty of people have talked about it before.I am however, going to show you how to set up your new Windows box to access your MAMP multisite.Once you’re set up, its a simple act of finding out your Host’s IP address (mac) and making your Windows box’s host file point to MAMP under a url.If you’ve done this procedure before on your Mac, the process is nearly identical. MSDOS has some strange commands though, so I’ve run through it below to get it set up correctly.Finding Your IP AddressTo find your Mac’s IP address, it’s as simple as running a command in Terminal. If you’re not familiar with Terminal.app, it’s basically a console that runs commands directly to your computer. Old School!The command you’re after is ifconfig -a. This will list all IP ports you have running, and their address as well.When you install VMWare Fusion, a new port is opened up, which is the link between your Mac and your new Virtual Machine. After running the ifconfig function, you should see a port called vmnet# (the hash will be a number). Grab the IP Address that is listed next to “inet.” If you’re struggling to find it, refer to the image below.Either write this down, or copy it somewhere for later use. We use it in the Windows box’s /etc/hosts file to point to MAMP.Taming The DragonWindows’s command line tool is nowhere near as nice, easy to use, or user friendly as Terminal.app. Fortunately, you can find your /etc/hosts file in C:Windowssystem32driversetchosts. You may have to right click on it, and select “Open as an Administrator.” This is the equivalent of sudo when in Terminal.At the bottom of the file, you want to paste the IP address you just found, and then space, and then wordpress.ms:This step is similar to setting up wordpress.ms in MAMP, except MAMP automatically edits /etc/hosts for us.Save and close this. There’s one last step. Remember I said MSDOS is gross? We need to fire it up now, to flush the Domain Name Servers, or basically reload the hosts file for browsing.The command for this is ipconfig /flushdns.Once you’ve done this, open up Internet Explorer, and try hitting your wordpress.ms URL!Boom! Instant access to MAMP’s multisite.The ability to do this is invaluable. You’ve basically got an environment where you can test code in every and any browser. It would be worth installing all major browsers on your new Windows machine, so you can check all of them too (though we all know it’s mainly IE6 and 7 you’d want this for ;) ). That’s all there is to it!Too easy, right? You can now browse your sites in any browser you wish. Even compare them side by side! Having this set up has been really handy to me when testing bugs in websites when a client screams, “BUT IT DOESN’T WORK IN INTERNET EXPLORER!” No, really? Save the world and update your browser!Feel free to ask any questions in the comments below!

feature-image

Read more »

DIY Truly Responsive Images on Your WordPress Website

Responsive Web Design is all the craze at the moment. Watching websites cascade into different layouts as you resize the browser can even be mesmerising.

But there’s one facet of RWD that still remains a (properly) unsolved problem. Responsive Images.

Download the source files (twentytwelve child theme).

If you simply use CSS’s max-width: 100%; attribute, mobile sites will still be downloading full size images. That’s an issue, because if your desktop site has images 920px wide, the mobile version will still be downloading this massive image, making loading time slow.

Enter Picturefill

featured-image

Read more »

Choosing the Best Custom Fonts Plugin for WordPress

Today I’m going to review four WordPress plugins that can help you get custom fonts set up easily on your blog.

Custom fonts have swept the web, starting with Flash & Javascript based solutions such as sIFR and Cufon. Next came @font-face and high quality hosting services such as Google Web Fonts, Typekit and Fonts.com.

Whichever you choose, you’re eventually going to have to install it on your website, and if you don’t want to take the path of installing it yourself, there are a plethora of plugins that can help you.

featured

Read more »

Build an App With WordPress – The compulsory todo list

Matt Mullenweg’s State Of The Word was very insightful into what was to come of WordPress in 2012. One thing he mentioned would be big, is be WordPress powering apps.

With that in mind, there aren’t many posts around that teach you how to make an app. I thought I’d start with the compulsory “How to make a to-do list app using WordPress!” It even works across all platforms- that’s right. Mobile, Tablet and Desktop!

preview-image

Read more »