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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/////////////////////////////////////////////////////////////////////////////////
// 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?

Posted in tutorial | Tagged , , , , , , , , , , , , , , , , , , , , , , | Comments closed

Android App Development Keystore for Beginners

Getting into some mobile app development for Android and I was unprepared for the keystore file that is required to be included in the apk file. Using PhoneGap Build to compile my app the interface requires a keystore file uploaded.
Screen Shot 2013-02-05 at 1.55.07 PM
After some digging on google it seems that the most common way to create a keystore file is by using some Java IDE like Eclipse, but the whole reason I was using build phonegap was because I didn’t want to fool with one of those. I finally pieced together what I needed with a few posts and wanted to put it all together to help at least myself in the future.
phonegap keystore upload alias
Luckily with a mac apparently you can do this with terminal! Following a couple tutorials, I managed to create a proper file, and going through a few steps to set the expiration or validity and the alias.

To create a keystore on mac OSX, first, open terminal. We’ll type keytool and then there are some commands to type and our keystore file will be created. -genkey (generates the key), -v turns on verbose mode so full details will be output, -keystore tells it what to name the actual file (it actually saves to the root directory, I’m sure there’s a way to specify location somewhere) and you type the filename (including the .keystore file extension). Once you enter this in you are prompted to fill out your name and company name and info like city, state and country. Then it verifies everything and you must type ‘yes’. Then it will prompt twice for a password, remember this it is how you will update/rebuild your app.

1
keytool -genkey -v -keystore file_name.keystore

This got me going but I had to do some back and forth to know some other requirements specifically for android marketplace and working with PhoneGap. PhoneGap Build was asking for the alias when I uploaded the keystore file to build my project, but I hadn’t set one. I had no idea what it would be and after trying my name and company and even filename I had to do some more digging. We can in fact set the alias name when I create the key with the -alias command. It doesn’t matter what this is, you just have to remember it. I think of it like the username to my previously entered password. The default is set to mykey, so you don’t really need to set it. This got me through the Build process with PhoneGap, and then I set up my app on the android marketplace (after paying the $25 license fee). Once I uploaded my first apk file I was getting errors regarding the keystore again. The marketplace was telling me that the validity was not large enough. The validity (or expiration) of the key by default is set to 90 days, but the marketplace requires at least 10000 days… quite a difference, no? So to set validity we add the -validity command followed by the value of 10000. Once i did this round I re-uploaded the keystore to PhoneGap, rebuilt the app and resubmitted to the Android Marketplace and it was accepted! Wow.

1
keytool -genkey -alias alias_name -validity 10000 -v -keystore file_name.keystore

terminal creating a keystore file for android apk

I hope that helped someone. I’m surprised that the PhoneGap doesn’t aleviate some of the pain in this process. Since the whole point of using Build PhoneGap is so that I don’t have to set up an IDE or get complicated. A simple online keystore gen process would go a long way, and better yet if they automated it somehow!

Did I miss any steps? Are there better ways to do this? (I sure hope so) Share a comment.

Also, check out the app I made from web technologies html, css and javascript with the help of PhoneGap. It’s a quiz that tests and teaches users facial recognition of leaders at church. It’s called LDSQuiz and shows images of modern day prophets and apostles and asks you to identify them by name.

Reference links that helped me:

Posted in blog | Tagged , , , , , , , , , , , | Comments closed

Set Default Terms for your Custom Taxonomies

Custom Taxonomy Default Term(s) for when it’s left blank

After looking through the WP codex and various plugins, I couldn’t find anywhere to set a custom taxonomy default term. WordPress has allowed us to create custom taxonomies for a while. Before we only had categories and tags hard coded in core. One feature from those days that didn’t seem to make it to the custom taxonomies of today is the possibility to select a default taxonomy term if none are selected. Did you know about this feature? Odds are you did, even if you didn’t realize it. Have you ever seen that ‘uncategorized’ category? That was the default category added for any content that didn’t have a specific category and was left, well, uncategorized.
uncategorized-default-post-category
An annoying feature if you weren’t expecting it, but nice to have if you took the moment to actually set up your default properly. I was working on a project recently with custom post types and custom taxonomies and suddenly needed this feature, but it didn’t seem to exist, so a few google’s later I found this nice snippet from Micheal Fields. Adopting the hook and adding some to allow for custom post types I wanted to share it here for my own safe keeping as well as the benefit of the community.

To Code Custom Taxonomy Default Terms

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
28
/**
 * Define default terms for custom taxonomies in WordPress 3.0.1
 *
 * @author    Michael Fields     http://wordpress.mfields.org/
 * @props     John P. Bloch      http://www.johnpbloch.com/
 * @props     Evan Mulins        http://circlecube.com/
 *
 * @since     2010-09-13
 * @alter     2013-01-31
 *
 * @license   GPLv2
 */

function mfields_set_default_object_terms( $post_id, $post ) {
    if ( 'publish' === $post->post_status && $post->post_type === 'your_custom_post_type' ) {
        $defaults = array(
            'your_taxonomy_id' => array( 'your_term_slug' )
            //'your_taxonomy_id' => array( 'your_term_slug', 'your_term_slug' )
            );
        $taxonomies = get_object_taxonomies( $post->post_type );
        foreach ( (array) $taxonomies as $taxonomy ) {
            $terms = wp_get_post_terms( $post_id, $taxonomy );
            if ( empty( $terms ) && array_key_exists( $taxonomy, $defaults ) ) {
                wp_set_object_terms( $post_id, $defaults[$taxonomy], $taxonomy );
            }
        }
    }
}
add_action( 'save_post', 'mfields_set_default_object_terms', 100, 2 );

This code hooks to ‘save_post’ and fires when the post is saved. It will check the post status and only execute if the post status is set to publish. My addition will also check the post type against your custom post type. Then it sets the default for any taxonomy that you want to set a default for. Either a single term or multiple terms can be set as the default taxonomy term. If you want multiple default terms then you just use a comma separated list. This hook will then load the existing taxonomies and if they are not yet set on the post it will set them to your designated default(s). It’s nice and flexible as you can have multiple taxonomy defaults set quickly in the defaults array. Thanks Michael!

Set Default Terms for your Custom Taxonomies via Michael Fields » Set Default Terms for your Custom Taxonomies.

Posted in tutorial | Tagged , , , , , , , , , , | Comments closed

Style Tiles

Style Tiles are about designing a system or guide to style a website rather than full comps and mockups. They really come in handy when talking about Responsive Web Design since it frees the designer from having to think about different layouts (as much, it should already be addressed in the wireframe stage). The designer can then focus on thinking about styling the elements and setting rules for a system that will be followed throughout the rest of the site. I really like the thought that style tiles are for when mood boards are too vague and design comps are too precise. Though, It really makes me think about designing a style guide rather than designing a webpage. Then the developers building the website can follow the guide dictated by these style tiles and make simple future-friendly/object oriented/SMACSS/modular css (or sass/less if you prefer). This also leans towards the late trend of moving more of the web design process into the browser.

Ethan Marcotte refers to static comps during the responsive design process as a “catalog of assumptions” Style Tiles are the perfect complement to that catalog, whether it be in place of comps or to reinforce visual themes. Style Tiles don’t imply dimensions nor device; only that the design will be digital.

In addition to Style Tiles, “Component Style Guides” can help with carrying a particular style through specific functionality without designing full web “pages.” These guides are very helpful for responsive designs across a wide number of devices and for implementing design systems for a CMS platform.

Develop a design system rather than designing fixed-width pages.

via Style Tiles.

I’m constantly excited by the web design industry because as it is such a young field, we are still making up the rules and discovering as a community what process are best. At the same time, the technology driving the field is changing so fast that just when we start to settle into a routine it all gets shook up and flipped on it’s head.

How do you see style tiles benefiting your process? Have you used style tiles in a project?

Posted in blog | Tagged , , , , , | Comments closed

Working out a Math Problem | BIT-101

I love how math creeps into design, programming and other problem solving.

I had some fun playing with Keith’s code (as usual). I’m always impressed with how he’ll see a problem and eventually at least figure out how to solve it using math/trig/physics. It’s a breath of fresh air and it almost makes me wish I was a math teacher and I could whip the example out whenever a student says ‘how is math useful’. I use it and even enjoy using math in my work to solve problems and it what bits I paid attention to in school still really help me.

Anyways, Keith was trying to figure out how to have a ring of a certain number of exactly touching circles around one central circle of a predetermined size. Sounds like a perfect bonus question from trig, right?
Here’s his post: Working out a Math Problem | BIT-101. And then his follow-up post where he gets to what I was expecting in some nice renderings showing how he’s using this simple pattern to make some really interesting designs.

I commented that I liked his problem solving procedure and was interested to see it animated! I love how math creeps into design like this. So I toyed a bit with animating the form. Check out my jsbin at http://jsbin.com/icahul/132/edit.

Posted in blog | Tagged , , , , , , , , , , | Comments closed

Adding Viewport Meta Tag via WordPress Theme Functions

Add the viewport meta tag with a WordPress hook via your theme’s functions file to allow responsive web design and mobile-friendly themes

meta-viewport-thumbWith all the responsive web design activity over the past few years, I hope that any theme or site we work on we’re able to make responsive to some extent. An important part of making a web site responsive is adding a viewport meta tag to your html. Without explicitly stating our viewport, the mobile browsers will scale down the website to fit into their ‘viewport’. This is a good thing, since if it was a full website and the browser didn’t scale it down, you’d only see the top left corner, or some small section of the site. This viewport was introduced by apple for iOS and has spread to most mobile devices since. There are viewport properties or parameters we can set with this meta tag such as width and scale and can even use some device aware variables (like ‘device-width’) to set these values.

A WordPress Meta Viewport Hook

I usually end up using the following hook to add a viewport meta tag to my head in wordpress. I set the viewport width to match the width of the device. Then I set the initial scale to 1. Some go and set the maximum-scale to 1 as well. This would prevent users from zooming in on your site. I advocate that we should allow users to zoom if they wish since it is a gesture they may be used to and may still need (no matter how nice your RWD is, they may need/want to see it bigger). RWD is about giving the user a better layout for whatever device they are on, not restricting how they view it.

1
2
3
4
5
6
7
8
9
/////////////////////////////////////////////////////////////////////////////////
// Add viewport meta tag to head
//
function viewport_meta() {
    ?>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <?php
}
add_filter('wp_head', 'viewport_meta');

There are plugins that will do the same, but if you are building (or editing) a theme, this should really belong in your theme along with all your responsive css. It’s as easy as this.

And that reminds me, I haven’t (yet) done this on this site because I still haven’t found the time to make my sorry site responsive. Believe me, it’s on my list, says the barefoot cobbler’s children.

Posted in tutorial | Tagged , , , , , , , , , , , , , , , , , | Comments closed

3 Plugins that Improved My Workflow in 2012 – WP Daily

I’ve guest authored a post on wpdaily.co: 3 Plugins that Improved My Workflow in 2012.

The post describes the 3 plugins that I used during the past year which transformed my workflow (in good ways). They are BackupBuddy, Gravity Forms and Advanced Custom Fields.

Have any comments? Favorite Plugins? Please, jump over to the post on wpdaily.co and add to the discussion!

Posted in blog | Tagged , , , , , , , , , , , , | Comments closed

3 Plugins that Improved My Workflow in 2012

True developers strive to be DRY (Don’t Repeat Yourself) in code as well as workflow and process. Previously, I somehow ended up doing in many of my projects things that plugins could also do.

It’s great to code your own sometimes and if you have specific needs that aren’t addressed by something out there already then sometimes it’s required. I think there is a lot to be said for the state of the plugin community lately. There are plugins to offer solutions many needs beyond what WP core was built to handle.

I’ve found that many times plugins are better then rolling my own solution. Not because I’m a horrible developer (I hope not at least), but because there is real power in numbers.

First off, plugins benefit form the community or users and developers involved in making them work and making them popular. Choose plugins that have a good base of users so when the author or WordPress ships updates, there are many people reporting/testing compatibility issues.

There is a community of people thinking about how to solve recurring needs and many minds working together on something are smarter than one. This is how I’ve come to terms with paying for plugins for an open source and free platform.

It’s worth the expense in the time I save on projects. (Disclaimer: However, I don’t think we should be using a screwdriver as a hammer simply because we can make it work. If you end up hacking plugins to get what you need out of it, then you may be better off building your own.)

This past year, I resorted to using plugins for a lot of the basic functionality I found myself using over and over again on many sites. I’ve been pleasantly impressed. Here are my top 3 plugins of the year:

1. BackupBuddy

BackupBuddy by iThemes. Backuping up a site is pretty much essential for anyone who does web work professionally. Not only for security but also for moving sites.

As a developer I’m constantly moving a site from a dev environment to a production environment and vice versa. It was the bain of existence at times, because with WP, moving the site is more than just copying files via ftp. It includes the database and config files and settings in the database too.

BackupBuddy, has helped this become a fairly simple process that lets me export the whole site (database and all) into a zip file and then I can easily place the site on a new domain or environment.

backupbuddy screenshot

Screenshot of starting the migration/import process with backupbuddy. You do a complete backup, load this php file onto your new site and follow the prompts. They’ve made it surprisingly painless.

The huge win for me is that I’m spending less time managing databases and more time building websites. Although I generally tend towards open solutions, this one has been worth the money spent many times over. (Even when they had an update that broke my database, it still saved me time in the end).

I mainly use this tool to schedule and automate my backups and save them remote locations either weekly or daily and to move my site between dev and production environments for testing and deploying.

2. GravityForms

Gravity Forms by RocketGenius. Forms are a part of every website I’ve built lately. I used to use CF7 and still am a big fan, but I ended up trying this form plugin out once and have been very impressed with the UX and UI. It has many features and is tastefully integrated into WordPress.

Some of my favorite features are that it saves the form submissions into my database and I can send complex notifications about the submission. It also has many field types built in. so if I need to capture someones email and shipping address, there are fields that will validate as such automatically!

True, I could write my own script to do this, but why spend unneeded hours to reinvent the wheel, and test the wheel and maintain the wheel.

gravityforms screenshots

Here is the back end of gravity forms. This is where you set up or edit your form. Notice the fields you can select from the right to add to any form as fast as you can drag and drop.

There are many many plugins offered to enhance the gravity form as well, you can integrate easily with MailChimp, Paypal and WordPress itself (for creating user accounts or even content).

I’ve used gravity forms as a simple contact form, as a job application form, as a donate form, newsletter signup form and more. It’s nice to be able to rely on one plugin for all this. The support forum has always been helpful as well.

3. Advanced Custom Fields

Best for last in my list is Advanced Custom Fields by Australian, Elliot Codon. The plugin site lists many add-on plugins that extend the functionality. Hopefully you’ve heard of custom fields in WordPress already, and if not, they are extra data about the post (or whatever type of content you create with custom post types).

You can add an external link, a price, an address or anything you can think of. This isn’t too hard to do in a theme or plugin on your own and has been documented and tutorial-ized many times explaining how to create fields and saving them to the database and grabbing them from the databse… but it does get tedious.

And then there are all the different types of data you may want to store that you end up having to reprogram every time. Text and numeric values are simple enough, but what about a date, an address, an image or a relationship.

ACF screenshot

Here’s the interface when adding custom fields. You can easily choose the type of data you need and there are multiple options to configure to your situation.

This plugin makes it not only easy, but fun to create custom fields. It adds easy functions for php to grab the data you need at the template level and the UI is entirely seamless with WP. There are many options for conditionally including or requiring the custom fields in the post edit screen etc.

I think this plugin truly transforms WordPress into an open minded CMS with style. Mad props for it not being added to the list of premium plugins (although some add-ons are for sale). I’d vote for this being added to WP Core and won’t likely work on another custom field project without it.

Progress

In all, it’s been a great year to be working with WordPress and it’s only getting better! I’m excited for the number of plugins that are getting better all the time geared towards easing the process of building sites. Equally exciting is the plugin repository at wordpress.org and the recent updates of being able to write reviews for plugins, I think this is a huge step towards letting the cream of the crop rise to the top allowing users and developers alike to find (and support) the best plugins out there.

What plugins have you found that don’t just save you an hour or add a bit of functionality, but that transform your workflow and help you live the DRY mantra?

Posted in blog | Comments closed

A Practical Guide to HTML & CSS – Learn How to Build Websites

I came across Shay Howe’s website today for the first time and am very impressed with his learn section. He’s created the content for a course (or 2) to learn HTML and CSS. There is a beginner’s guide and then an advanced one is scheduled too. This is great content or curriculum and would be a great boost to anyone interested on the subject. It is very thorough and teaches good practice with bad vs good examples throughout.

learn-html-css
A Practical Guide to HTML & CSS – Learn How to Build Websites
.

http://learn.shayhowe.com/html-css/
http://learn.shayhowe.com/advanced-html-css/

Posted in blog | Tagged , , , , , | Comments closed

Mobile Strategy and the Case Against Apps

Great points about apps and the web in this article.

Apps compete with the web for dominance over where people get their content. Apps as games and tools are perfect, but apps for content are not. Content is best on the web, because the web is built for sharing content. The web is open! The web is consolidated and instant and accessible (meaning that any device/browser/screen size/location/etc can already access the web and you can update it anytime and all users see the update instantaneously). The web is also accessible via the defining url. Meaning that it’s a required standard that all assets and bits of content have an address. You can take this address and share it and return to it easily, apps – not so much. You want to share an experience or idea from an app with a friend (sure, some have a process built in), you first check to see if their device has this app available, they want to go through the steps of finding the app and then installing it (likely having to pay money) and then you send them a link have to explain how to get to where the magic happened.

Newfangled, a web agency I respect for being very smart has a great article about this. It was then moved into the basis for a chapter in their ‘The Strategic Web Designer’ Book. I highly recommend them both!

Planning a Mobile Strategy.

Posted in blog | Tagged , , , , , | Comments closed
  • Recent Posts

    Screenshot 2015-08-03 08.19.16

    Every Browser is the New IE (to me) – daverupert.com

    Maybe one day the Web will be perfect and complete and I will not need to reach for polyfills. However, if that happened I think I’d stop being interested the Web because it would then be a stagnant pond and not a surfable ocean. Source: Every Browser is the New IE (to me) – daverupert.com […]

    Screenshot 2015-07-31 14.15.00

    URL Structure FTW – Pretty and Readable Permalinks

    I noticed that the clearleft.com site has very clever url structure. You can read the urls like a sentence. Like their about section is “/is” and their capabilities is ‘/does’, and their portfolio section is “/made” , so clearleft.com made code for america. Check the urls listed here and you’ll notice that they read like a […]

    promo

    What Is Code? If You Don’t Know, You Need to Read This

    Here’s a great read that may take a while but is a nice trip through programming history through the lens of one who’s been there. The world belongs to people who code. Those who don’t understand will be left behind. Source: What Is Code? If You Don’t Know, You Need to Read This

    Adactio: Journal—Instantiation

    There needs to be a cultural change in how we approach building for the web. Yes, some of the tools we choose are part of the problem, but the bigger problem is that performance still isn’t being recognised as the most important factor in how people feel about websites (and by extension, the web). This […]

    human_time_diff « WordPress Codex

    Determines the difference between two timestamps.The difference is returned in a human readable format such as “1 hour”, “5 mins”, “2 days”. Source: Function Reference/human time diff « WordPress Codex Used this little known, but nice gem today. It’s a core WordPress function that gives human relative time from any other datetime in “U” format. […]

    logo

    Cyclomatic Complexity: Logic in CSS – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

    I recently hit upon a way of thinking that made me realise that CSS does include logic, and the fact that it’s rarely viewed as such is probably also why we end up with such poor CSS at all.I found myself explaining compound selectors to a client as being made up of the subject—the thing […]

css.php