Add Links to Twitter Mentions, Hashtags, and URLs with PHP

This gem helped me out today as I was working with the Twitter API to create a custom WordPress widget. I was about to do exactly this and was not looking forward to it, luckily I did a quick search and found this webtips post. Thanks!

If you’re using the Twitter v1.1 API to fetch a user’s statuses from their timeline, then you’ve likely come across the fact that user mentions, hashtags, and urls do not have links in the “text” node of the JSON response the API returns. There is no element to follow the link, and there are no links to follow to check out a mention or hashtag on Twitter site. This can easily be overcome using PHP and parsing some of the data in the JSON response and wrapping the entities in the desired elements.

Source: Add Links to Twitter Mentions, Hashtags, and URLs with PHP

Presenting at WordCamp Atlanta – Child Themes

The presentation? Your firstborn child theme. Child themes 101+2.

I’m speaking at wordcamp atlanta this afternoon about themes and child themes. I’ll update this post with post-presentation notes.

Learn how to mod themes the right way. Using child themes you won’t loose your edits when there’s a theme update. (101) We’ll go over the advantages and how to set up a child theme. (102) Plus we’ll cover some tricks to make the process a bit easier.

Slides on slideshare

Presentation video via

Add Parent Page Slug and Parent Template to WordPress Body Class

Add CSS body classes for the parent page on all child pages and the parent page template on of a WordPress site with this body_class filter. Ever need to style all child pages of a parent page in the same way or have you wanted to access every child page of a parent page via css selectors for styling? What about selecting all pages that are descendants of a page which is using a specific template?

body_classes_htmlBuilding large websites gets complicated, even in WordPress. Large sites usually mean there are many subpages and sections to the website that may need to be styled similarly. I’ve found it helpful to add a page’s parent page slug to the body class to allow me to alter or target the page or group of pages via css. By default the themes I’ve used have been generous in adding classes to the html body element for easy css selection rules. Things like the post slug, page template, logged in status, page vs post (or custom post type), post id, author… you get the idea. While half the time I don’t need half of this and the other half the time I find myself needing more.

Place this code into your functions.php file and your html body element will have a couple additional classes if they apply. It will have a class delineating the slug for the parent page on all child pages as well as a class delineating the template used by the parent page. This lets me apply styles to a whole sibling-section of a site pretty easily by just targeting the parent-slug on the body. Also adding the template of the parent in case I needed to use that.

post_parent_classesWalking through the code here we’re filtering the body_class function is how we are able to add this. We name our own function and give it a $classes parameter. Then throughout our function we can add classes to this $classes array and they will be output with the rest of the body classes. We need to hook into WordPress at the body_class function with add_filter and specify the hook and specify our own function to be called. In this case we grab the page properties of post_parent and the template of that parent. First set the post variable to reference the global scope, and then check to see if the post is a page with is_page. Then if the post object has a value for the parent (post_parent) we add the parent’s name to the classes array. Then we get the _wp_page_template meta data from the parent to find the template it’s using (if there is no template specified, then it returns default). This is added to our classes if it exists and then we return the classes array to the original body_class WP core function.

[cc lang=”php”]
// Body class adding page-parent
function cc_body_class( $classes ) {
global $post;
if ( is_page() ) {
// Has parent / is sub-page
if ( $post->post_parent ) {
# Parent post name/slug
$parent = get_post( $post->post_parent );
$classes[] = ‘parent-slug-‘.$parent->post_name;
// Parent template name
$parent_template = get_post_meta( $parent->ID, ‘_wp_page_template’, true);
if ( !empty($parent_template) )
$classes[] = ‘parent-template-‘.sanitize_html_class( str_replace( ‘.’, ‘-‘, $parent_template ), ” );
return $classes;
add_filter( ‘body_class’, ‘cc_body_class’ );

There are many more classes we can add to the body_class and like I said, sometimes you need more than what’s already provided and sometimes you need nothing. It all depends on the theme you’re using, what it provides and what your specific site and design require. What other classes have you wanted to see here? How have you filtered body_class to fit your site’s needs?

Web vs Mobile – For The User

I agree with this idea from Ryan that the web has big advantages. I am constantly hearing stats and projections that Mobile is taking over. And sure, I agree that I use my phone to browse more sites, but when it comes down to it I’m just casually browsing – not working. I love the post he’s links in the first line: Vibhu Norby has a detailed post on why his startup is pivoting from mobile first to web first.

Vibhu details that he’s done the mobile startup thing and has learned from the complications. He explains that most of these have been solved in the desktop browser already and a lot of it relates to usability.

Another big point is that mobile apps must be installed (actually they must be found, installed, opened and setup), whereas a web app can be as simple as a link- click, and then the user is already using it. Adoption is much easier on the web.

And even another point is updates and testing and whatnot. YOu can do various tests and even update the whole app relatively fast on the web. There is the one version to support – the live one. While with apps, you can’t do much in the arena of testing and updating is sluggish plus it relies on the user to update (some don’t know how to update and even less care).

I think a web app that is mobile friendly wins. You can give mobile users access, but they aren’t stuck on mobile. They can use it anywhere. While so many are talking about responsive design and produce sites that are device agnostic mobile apps are very device centric.

I’m a fan/advocate of future friendly at least, and strive for future proof (although I understand that’s near impossible). I also hold that there is ONE web and mobile myths.

Web versus Native Economics and User Adoption | Ryan Stewart – Mountaineer Coding.

Short Head

Use zipf's short head to tune your website rather than redesign the whole thing. To make a website successful it needs to meet the needs of the users. Find out what those needs are by using the short head philosophy to equate most searched things as the biggest needs of the users. Use personas to segment the audience and make sure you've got each audience covered and all their main needs. Then showcase the content that they need.

Every websites could benefit from this process. Every new site or redesign should start with this research and strategy. It does take time and effort, but it has the biggest return on investment in making an effective website. I still think redesigns are still needed, but slapping a new design on a bad architecture and structure benefits no one, especially the user.

Embedded Link

Stop Redesigning And Start Tuning Your Site Instead | Smashing UX Design
Let’s look at why redesigns happen, and some straightforward and inexpensive ways we might avoid them.

SVG Preloader with Raphael JS

Here's a very creative use of using a newly available technology. Using svg graphics which are very lightweight, for a website preloader. I like the animation used as well.

Embedded Link

Make a stylish preloader with SVG | Tutorial | .net magazine
Many sites neglect users with slow connections. Ian Culshaw explains how to use SVG library Raphaël to create a preloader that’ll hold the users' attention while pages load

TILT your website with CSS

Great bookmarklet to apply a 3D tilt effect to any site. Reminds me a bit of the upcoming firefox inspector 3d view how it shows the DOM structure with nested items at a higher depth. I hope no one ends up using something similar to make the page rock like the ocean: I can't imagine trying to read while getting seasick. Maybe it would be applicable for a game or something…

Embedded Link

CSS Tilt
We're not quite at the stage where we can fly through the Internet in 3D à la Johnny Mnemonic, diving between skyscrapers of data and a

Speaker at WordCamp Atlanta 2012

I’m proud to announce that I’ve been asked to speak at WordCamp Atlanta this year! WordCamp will be held this weekend and hosted at SCAD Atlanta! My session is titled: From PSD to WordPress Theme: Under the skin. Obviously, I’ll be focusing on themes. We’ll look at what they are, what they can do, how to make one and we’ll also go through the process of creating a theme in my presentation. I know that’s a lot, but I’ll do my best to get it all covered in my time. I’m really excited since this is my first speaking gig at a conference (and also a bit nervous). I’ll be sure to post my presentation slides here as well as submit them to the wordcamp site. I even hear they are attempting to record all sessions to post on, so I may have a post with that too. Here’s the official session description:

We’ll cover how to get from photoshop to WordPress. There are many different roads to a theme. We’ll go over a few possibilities and then cover getting from a design in photoshop to an actual WordPress child theme while trying not to reinvent the wheel.

Are there any questions you want covered in the presentation? Ask quick and I’ll do my best to work them in!

UPDATE: Here are my slides for the presentation: WordCamp Presentation Slides: From Photoshop PSD to WordPress Theme!

Hiatus Apologies

I’ve neglected this site lately, 6 months to be exact. Combine busy times, new jobs, summer trips skipping the country and websites are sometimes the first to be neglected.

oh canada

But, I’m planning on being back. I want to shift towards sharing more links and quick tips, partly because reading the internet had become more of a 140 characters ADHD process. I’ll be writing less tutorials in the sense that I’ve been writing, but I’m planning on having much more content, just less demanding on my time. I don’t have time to write a book and no one wants to read it anyways (myself included). We just want to see cool new things and tips and quick solutions to issues. So, I’m going to be sharing a lot more links pointing to cool things and tricks. I’ve shifted from flash animation it seems to more jQuery and CMS programming and less flash. But I don’t mind too much, although I still enjoy flash immensely, many of the same things we once had to rely on plugins to achieve, we can now do with javascript. It’s really the same end result just using different technologies. So expect some snippets and quick examples rather than complete walkthroughs. I’ll focus on all things interactive (as usual) but will include a broader range of things.

On another note, I’ve started a new job (again). I’m now at The Jones Group, downtown Atlanta. The advertising industry wasn’t for me, and I’m happy to be Interactive Director at the Jones Group working on making some really cool & interactive websites! You can bet, I’ll be sharing details of them as they launch (I’ve actually got a backlog waiting already).