Author Archives: Frankie Jarrett

How to connect Apple TV to a hotel Wi-Fi network

Whenever my wife and I take an extended vacation I always bring along our Apple TV.

At the end of a long day filled with adventure and fun it’s nice to just snuggle up together and watch your favorite show on Netflix or rent a new release comedy.

I’ve found that hotel television is still so primitive and annoying. The on-demand movie rentals are limited and very pricey, the regular programming is usually in standard definition, and you’re forced to channel surf without a guide. Ain’t nobody got time for that!

When I book a hotel I always make sure there is free Wi-Fi and that they say there are “flat screens” in every room, this tells me that there must be an HDMI input on it somewhere.

Ah, but my Apple TV doesn’t have a browser! So when the hotel Wi-Fi splash screen pops up asking for confirmation that I “Agree to their terms of use” or to enter some sort of special login, I can’t.

It seems we’re left with no choice but to do some friendly hacking to circumvent this annoying speed bump! :-)

How It Works

This is a little networking 101 here, but I’ll explain it briefly in case you are really a beginner.

Every device that connects to the Internet has a unique mac address, or media access control address. It’s basically a serial number for your hardware and it tells the network who you are.

No, it has nothing to do with “Mac” computers built by Apple. If you’re still unsure what I’m talking about, please go and read this article first.

The hotel network works by validating your mac address and putting it on a whitelist so it can connect automatically in the near future.

The only problem is, you need a browser to do this, and Apple TV doesn’t come with a browser (so far).

How We’re Going to Get Around It

So here’s what we’re going to do.

First, we’re going to trick the hotel network to think that our Apple TV’s mac address is actually our computer’s mac address.

Then, we will use our computer to complete the browser authentication/checkbox/button/whatever they need so this address can be whitelisted.

Finally, we will change the mac address on our computer back to the original, and then reconnect both our computer and the Apple TV back onto the network.

Spoofing Your Mac Address

Note: These steps assume you are using OS X, sorry PC folks.

  1. Disconnect your computer and Apple TV from the hotel Wi-Fi.

  2. Open up your Terminal

  3. Get your current mac address using: ifconfig en1 | grep ether

  4. It will look something like this: 03:a1:04:d5:00:12. Save it somewhere safe, we’ll need it again later.

  5. Write down your Apple TV’s mac address, which you can find under Settings > General > Network > Wi-Fi Address

  6. Now we will spoof our computer’s mac address to be the one we just wrote down from Apple TV: sudo ifconfig en1 ether 28:cf:xx:xx:xx:xx

  7. Sanity check that our mac address has indeed changed: ifconfig en1 | grep ether

  8. Connect your computer to the Wi-Fi, open a browser window and complete whatever authentication it needs to connect.

  9. Disconnect your computer from the Wi-Fi.

  10. Repeat steps 6 & 7 to change your computer’s mac address back to the original one we saved in step 4.

  11. Reconnect both your computer and Apple TV to the hotel Wi-Fi.

And we’re in business!

Most networks will keep this mac address whitelisted for 24 hours or so. After it expires you’ll need to do this whole process again.

This may not be perfect for every situation, but it’s always worked for me. If it helped you, please leave me a comment!

WordPress challenge: Building a web app from scratch

For the past 7 years I’ve been building websites, themes and plugins for WordPress. It’s really fun, and I love it.

But there are some avenues that I have yet to explore. The biggest one is building a web application using WordPress.

I’m happily employed over at X-Team working full-time on Stream, so I’m really just looking to create another passive income stream for my family. This is not urgent in any way, and if I’m being totally honest with myself, I’m probably just looking to scratch the proverbial entrepreneurial itch I have after selling a business I was running on the side last month.

If I’m going to start a new project, and there is not a strict time table, why not try something new? It will give me a chance to learn some new technologies I’ve not used before, like Backbone.js, and build something that I think is cool.

So, what do you mean by “web app”? Isn’t that just a website?

It’s true, there is some ambiguity here. And while there is a lot of crossover, there are also some key differences I think of when determining whether or not a project should be considered a web application or a website.

Website Web Application
Focus is primarily on content Focus is primarily on interaction with the user
User accounts are usually not necessary User accounts are almost always necessary
Content scope is usually global for all users Content scope is usually private for the current user only
People using it are generally thought of as “visitors” People using it are generally thought of as “users”
There is usually no data API other than content feeds in RSS or JSON formats Robust API’s can usually be provided so data can be accessed programmatically
Sometimes feature responsive design for mobile and desktop views Generally much more focus on cross-platform integration, such as native mobile apps

The WordPress challenge: Build a web application using WordPress in my spare time.

God knows I don’t have a lot of spare time. But that actually makes this experiment the most exciting to me. I can only build this in my free time, with very little investment. It will force the product to be simple, and really force me to exercise the lean methodologies I aspire to use on every project.

I do have an idea of what I want to build, in fact, I’ve already started. I will reveal the details of what it is later. For now, I want to outline the high-level details about what I’m trying to accomplish with my web application from a business perspective as well as the technology that I’ll use to build it.

It feels a little strange just posting all of this behind-the-scenes information here, but that’s part of the experiment.

Technology

  • WordPress Multisite as the backend infrastructure
  • Backbone.js and jQuery for the application layer
  • Leverage custom post types and taxonomies for the application content
  • Users register their organization as a new “blog” giving them their own account in a subdomain
  • Users can add various team members to their account as regular WP Users
  • Payment processing via Stripe
  • Transactional emails and notifications via SendGrid
  • Provide a JSON REST API for the geeks
  • Hosted on SiteGround GoGeek to start, will migrate to SiteGround Cloud hosting after beta which can be easily scaled as the user base grows
  • Wildcard SSL cert, so all accounts on the network will only be accessible over HTTPS
  • Hashcash.io for bot SPAM and brute force prevention

Business Model

  • 30-day free trials
  • Monthly recurring subscriptions
  • Four pricing tiers, including a Free plan option
  • No content provided, customers must enter in their own data
  • No direct customer support via phone, email, forums or social media
  • Tutorials and Help FAQ’s provided to cover the basics

Blogging The Progress

This will be more like a personal diary of my adventure, or a git log summary mashup, if you will. I’ll be doing posts here about the progress of the project on a random basis, probably weekly.

Hopefully it will encourage others who are curious about building web applications with WordPress, and demonstrate in a simple way how I’m going about it.

Stay tuned!

Parting ways with ChurchThemes.net and looking ahead toward a brighter future

New ChurchThemes.net

Three years ago, in July 2011, I started a theme shop. It was an era where many people in smaller niches were yet to be discovered by developers as a force to be reckoned with. The “The Long Tail” principal hadn’t yet sunk in, at least not enough for churches to have viable WordPress theme options available to them.

Churches were being grossly under-served in every WordPress theme marketplace. The most common option for them was to customize their favorite “photography” or “design agency” theme, somehow seeing past page after page of irrelevant stock imagery and the thousands of “shortcodes” they wouldn’t be using. Sprinkle in a few plugins, and say a prayer – maybe, just maybe, this would work.

Thanks to the encouragement I received from friends and family (and a few discouragements too) I launched ChurchThemes.net in an effort to bring robust WordPress theme options to churches and fulfill my dream of seeing churches launch full-featured websites, that would typically cost thousands of dollars, for less than $100.

The past three years have been a massive learning experience for me. Dealing with issues like pricing, upgrades, support, competitors, backwards compatibility – the list goes on. I’ve enjoyed so many experiences, both failures and successes, because of starting this business.

But the entrepreneur in me just can’t be satisfied with one business. Late last year my friends at X-Team and I began prototyping the product now known as Stream. And it’s taking off like a rocket in the WordPress community.

So this year we decided to undertake even more ambitious plans to establish Stream as the de facto standard in WordPress activity tracking. And now we’re well on our way to achieving it. And I can’t even mention another secret personal project I’ve been working on! Needless to say, the time has come to part ways with ChurchThemes.net.

Today, I’m happy to say that Lift has acquired ChurchThemes.net and will be ushering in a new chapter for the business and its customers. I cannot say enough about the Lift co-founders Chris Wallace and Brad Miller. These guys not only have insane WordPress theme chops, they have a deep-rooted passion to see churches succeed.

Churches are no longer under-served in WordPress theme marketplaces, but there are plenty of innovative challenges just waiting for someone to spearhead and break open new possibilities, just as ChurchThemes.net did in the very beginning. I am confident that the guys at Lift are going to blow the roof off of the industry and define the future for churches using WordPress.

It’s a bittersweet moment for me as I officially part ways with ChurchThemes.net. But its future has never been brighter, and for that, I am very thankful.

Read the full press release

WordCamp KC: Version Control Using Git

Version control is a must for any professional web developer, frontend or backend. I had the privelege of speaking this year at WordCamp KC on the topic of Version Control Using Git.

There are many ways to setup Git, but in my talk, the aim was to cover the simplest approach possible so folks could get set up quickly.

This tutorial-style post is meant to provide more detail on how to start using Git on your local environment.

The slides used for this presentation can be seen at: http://www.slideshare.net/fjarrett/wordcamp-kc-2014-version-control-using-git

Basic Tools To Get Started

This article assumes you are using a POSIX-compatible operating system, like Mac OS X or Linux.

If you are a Mac user, this is all you will need to download and install.

  1. OS X Mavericks – Found in the Mac App Store
  2. XcodeGit is included! Also found in the Mac App Store
  3. iTerm2 – A free and feature-rich alternative to the default Terminal on OS X

Basic CLI Commands

Using your terminal might seem intimidating, but don’t let the fear of leaving your mouse behind deter you from giving it a try!

You can become a terminal power user today simply by memorizing a half-dozen commands:

  1. Change directories: cd wp-content/themes
  2. Shortcut to your home directory: cd ~
  3. Go up one directory: cd ..
  4. List: ls or ls -la
  5. Create a file: touch filename.txt
  6. Edit a file: nano filename.txt
  7. Clean up our terminal view: clear

Basic Git Commands

Git is extremely powerful. There are a multitude of commands and options within commands that can take you a while to learn.

But that doesn’t mean you can’t start using Git today!

All you really need to know are a few commands and you can start making Git commits to a remote repository and enjoying the power of version control on all of your projects.

  1. Copy a repo from GitHub.com to your computer: git clone git@the_url_dot_git
  2. See your changed files: git status
  3. Queue up files: git add -A
  4. Make a commit: git commit -m ‘Fixed a broken footer link’
  5. Push our commits to GitHub.com: git push
  6. Pull down the latest from GitHub.com: git pull
  7. Switch branches: git checkout branchname

Customizing Your Bash Profile

There is a hidden file on your Mac inside your user “home” directory named .bash_profile.

Before Terminal loads your shell environment, the .bash_profile is loaded (or “sourced”). Inside this file, you can have custom preferences for the way you want your command line interface to look and operate – like changing your terminal prompt, the colors of your text, adding aliases (shortcuts) to commands and functions you use most often, and more.

Here’s a quick tutorial on how to customize this file:

  1. Navigate to your home directory: cd ~
  2. List hidden files to see if the .bash_profile already exists: ls -ld .*
  3. If it does exist go to the next step, if it does not exist, then create it: touch .bash_profile
  4. Open up the file for editing: nano .bash_profile
  5. After entering your customizations, save the file: Ctrl + x then y
  6. Now we now need to “source” it in the terminal: source .bash_profile
  7. Quit and restart your terminal.

Here’s a gist of my .bash_profile file to get you started: https://gist.github.com/fjarrett/d089fbcfe0a8c22ca8a3

Setting Your Global Git Config

GitHub uses the email address you set in your local Git configuration to associate commits with your GitHub account.

GitHub has an easy tutorial on how to add your email to the global Git config on our computer.

Configuring SSH

SSH stands for “Secure Shell” and it’s the preferred way to securely transmit commits to and from your computer and the remote repo.

  1. Generate an SSH key on your computer
  2. Add your SSH key to your GitHub account profile

Clone a repo onto our computer using SSH

The first thing to do is create a new public repo on your GitHub.com account. Also be sure to give it a “README” file by default.

After your repo is created, it will have it’s very own URL which can be used to clone this repo to your computer.

GitHub has a simple example of how to do this, however, instead of using HTTPS, you’ll want to use SSH.

Commit and push changes back to GitHub.com

Now that you have a repo from GitHub cloned onto your computer, you can start adding files to it locally, committing those files and pushing them back to GitHub.

  1. Create a new file, like: style.css
  2. Put something in this file and save it
  3. In terminal, do: git status
  4. Now we’re going to “queue up” our change: git add -A
  5. Now we can commit this file: git commit -m 'My first commit!'
  6. Now we can “push” this commit to our remote repo at GitHub: git push
  7. Go to your repo at GitHub.com and see your new file has been added!

Next Steps

Now that you’ve jumped into the shallow end of Git, you’ll want to continue learning and exploring all of its amazing possibilities, such as, ignoring files, viewing diffs and stats, merging, tagging, stashing, rebasing, and more!

Here are a few helpful links to continue your Git learning:

How to ignore files – This is an important next step to learn about if you don’t want everything in your project to be under version control.

GitRef.org – Consider this your “Git Bible” for learning more about Git commands.

git ready – Don’t let the punny name fool you. This site has excellent “how-to” style tutorials on using Git.

Was this helpful? See a problem? Please let me know in the comments!

Get an attachment ID by URL in WordPress

We all know you can use wp_get_attachment_url() to return an attachment’s URL by passing in the ID, but what about the reverse scenario?

There are a lot of long-winded examples of how to get an attachment ID by URL floating around the interwebs. Most of them limit results to only returning images or use expensive DB queries. Really, there should be a function for this in core, but there isn’t.

Needless to say, I wasn’t really happy with any of the solutions I found people using, so I decided to take a stab at it.

Below is the most lightweight method I’ve come up with (so far) to get an attachment ID by passing through an attachment URL.

Example usage

Just as an example, this would echo the attachment ID integer of test-image.jpg onto the page:

<?php echo fjarrett_get_attachment_id_by_url( 'http://frankiejarrett.com/wp-content/uploads/2013/05/test-image.jpg' ) ?>

This would echo the same result as above because we are ignoring www usage in the URL being passed through:

<?php echo fjarrett_get_attachment_id_by_url( 'http://www.frankiejarrett.com/wp-content/uploads/2013/05/test-image.jpg' ) ?>

This would echo nothing, because the image doesn’t exist in the WordPress uploads directory:

<?php echo fjarrett_get_attachment_id_by_url( 'http://frankiejarrett.com/foo/test-image.jpg' ) ?>

And finally, this would also echo nothing because the URL of the file is pointing to an external domain:

<?php echo fjarrett_get_attachment_id_by_url( 'http://www.anotherdomain.com/wp-content/uploads/2013/05/test-image.jpg' ) ?>

Conclusion

We managed to fetch an attachment ID in just a few lines of code with no expensive DB queries! Awesome 8-)

Now you can do cool things like turn a URL into an absolute path:

<?php
$url = 'http://frankiejarrett.com/wp-content/uploads/2013/05/test-image.jpg';
$attachment_id = fjarrett_get_attachment_id_by_url( $url );
$path = ( $attachment_id ) ? get_attached_file( $attachment_id ) : null;
echo $path;
?>

For more information about what was used in this function, please see:
http://php.net/manual/en/function.explode.php
http://php.net/manual/en/function.parse-url.php
http://php.net/manual/en/function.str-ireplace.php
http://codex.wordpress.org/Function_Reference/home_url
http://codex.wordpress.org/Determining_Plugin_and_Content_Directories#Constants
http://codex.wordpress.org/Class_Reference/wpdb#SELECT_a_Column

Was this code helpful to you? Let me know in the comments!

Remove specific menu items from the WordPress Admin

Sometimes it’s best – especially when you’re using WordPress as a CMS – to remove those unwanted admin menus that create clutter for clients. They are never going to use them so why confuse their admin experience? For example: if the client isn’t going to blog, why include Posts or Comments in the menu at all?

Just insert this code into the functions.php file of your WordPress theme and *bam!* no more clutter. Please note that we are not going to restrict the Administrator user experience, this will just affect logged in users who can’t manage options.

(Make sure to edit the $restricted array with the items you want to hide, this is just an example so you can see what’s possible) Enjoy!

Add prefixes to WordPress post types when a theme is activated

Recently, I had a real problem on my hands.

I had neglected to prefix the post type names in some of my themes, and as it turns out, so did another popular WordPress plugin. Long story short: this plugin became unusable when running my themes, and this did not make my users very happy.

It became clear that I needed to bust out some ninja moves to overcome this dilema.

The code below is the solution I drafted – maybe it will help you too. It’s a function that runs when the theme is in use, and rewrites the post type names in the database with any prefix you choose.

After the theme is activated the specified post types will be renamed to: fjarrett_acme, fjarrett_foo and fjarrett_bar.

Sadly, there is not yet a hook that will fire only when themes are activated/updated. The after_setup_theme action is a little misleading in that it fires when WordPress sets up the current theme, not when an admin activates and/or updates the current theme.

So, it’s basically firing with every load of WordPress when the theme is active. Someone first made a patch for this 3 years ago and it looks like it’s finally being revisited.

For that reason, this is by no means the most resource-friendly solution, but we are killing the script if the prefixed post type already exists – which requires an additional query – but this is crucial for two reasons:

  1. So we’re not attempting to update the database with every page load – after the original post types are given prefixes the database update will never run again.
  2. So other plugins/themes (like the one I was in conflict with) can be installed later, creating their blasphemous post type names, and we won’t attempt to rewrite them.

Hopefully this is helpful to you and your project in some way. If so, please tell me about it the comments!