WordCamp Asheville 2017 Speaker – Intro To Web Development and Modular Web for WordPress

Posted on May 10, 2017 by Evan Mullins

I’m pleased to share that I’ll be speaking at WordCamp Asheville, not once, but twice! I’m presenting an Intro to Web Development for beginners as well as a lightning talk about Modular Web practices for WordPress.

My first talk will be the same as the one I presented at WordCamp Raleigh, but after having presented the content once and taken questions and discussing things with attendees, I hope it will be even better and more helpful. Overall the feedback was very grateful and the audience seemed to have learned a good bit. There were even a few people that came up to me to say it was the best presentation they had seen at the conference. So I am happy to present it again. Here’s the abstracts for each presentation:

So you wanna dev? Join the team!

WP Dev/tools for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs, themes, child themes, the loop, inspect element, hooks, APIs, CLI, agile, bootstrap, SEO, slack… etc. We’ll discuss the language and various acronyms and buzzwords used by devs in this crash course introduction to the developer’s world. Overview of primary development processes and terms and what software is needed to play the game. We’ll cover what you need to go from zero to developer and hopefully how to have fun on the way.

Takeaways:

Learn to speak dev
Get familiar with concepts (and acronyms) you’ll need to dev
Learn about tools that will help you

Modular Web for WordPress (Lightning)

WordPress the CMS, meets the Modular Web. We need to stop thinking about a website as a collection of pages and templates, but as a set of modules and a system to manage them. Modules, like Legos, are interchangeable and can be combined fairly quickly to create an infinite number of results all while both showing variety and remaining consistent. With this modular paradigm shift, our workflows improve, our websites improve and our very well-being improves. Let’s explore how to use WordPress to manage site content using modules. We’ll see what this does for our development process and programming as well for our content management via the admin. We’ll discuss how to build and maintain a module library, and use it for every site you build. These principles have been immensely helpful in each team or project where I’ve put them into practice, so we’ll even take a look at a few examples and point out where to learn more.

Takeaways:

Learn the basics of Modular design for web
Understand the advantages to building sites modularly
See how to do it with WordPress

The second talk will be one I submitted as a full talk, but was asked to present it as a lightning talk. It will be tricky to squeeze everything into 15 minutes, but I’ll do my best. Developing modularly is something that I am passionate about. I think a lot of sites use WordPress as a CMS, and forget the system part of that. We should use the CMS to help us build flexible systems that are flexible. I’ve been preaching this idea of “Building Systems not Pages” for a long time and hope to inspire others to work smarter. There is a lot to cover, but having only a few minutes to do it in will force me to present the main and most important points only. I’m excited for the challenge!

Tickets are on sale now, so if you’re in the area, I hope to see you at WordCamp Asheville 2017. It will be the best $40 you spend!

WordCamp Raleigh 2017 Speaker – WordPress Devevlopment for Beginners

Posted on March 29, 2017April 3, 2017 by Evan Mullins

~~Although the schedule is not yet out~~(The schedule is here), I’m happy to announce that this year I’ll be speaking at WordCamp Raleigh 2017 . I’m preparing an intro to Web Development for WordPress users talk. We’ll cover all the crazy acronyms people forget to ask what they mean and help (I hope) attendees at least test the waters in the development pool. There’s a learning curve which some would say is increasing with all the complexities in the Web world these days. This will be my second trip speaking at WC Raleigh, since speaking last year as well as WordCamp Raleigh 2016. I’m excited to see some familiar faces.

So you wanna dev? Join the team!

WP Dev/tools for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs, themes, child themes, the loop, hooks, APIs, CLI, agile, bootstrap, SEO, slack… etc.

We’ll discuss the language of programming and various acronyms and buzzwords used by devs in this crash course introduction to the developer’s world. The session will be an overview of primary development processes and terms as well as what software is needed to play the game. We’ll cover what you need to go from zero to developer and hopefully how to have fun on the way.

Why do I want to talk about this?

I know what it feels like to be drinking from the firehose. I remember all too well how mystical the development world looked from the outside. I studied Art throughout high school and college. While I have a Fine Art degree from UGA, I was always interested in technology as well, but more along the lines of what I could do with Photoshop. I wasn’t (and still am not) into building computers or fortran coding or spending much time in my terminal. I was studying digital media art and computer animation and ended up taking a web design for artists course – and it changed my life.

I was introduced to HTML& CSS, WordPress blog, and ActionScript in Flash. I enjoyed the flash days and that experimentation really helped spark my interest in programming. I continued to update my WordPress site and learned a lot programming just from wanting to make my own site better. Then eventually, until I was took the plunge into development full-time.

I still remember feeling elated when I loaded up a project in the browser to see it live. Also when I finally understood for loops and the other weird symbols and keywords in programming. It’s great how you can build something and moments later, have it online and accessible to the whole (connected) world. A lot has happened to/in web development and there is a much larger more complex puzzle to sort out when getting started today vs a decade ago. It really is like learning a new language, along with a whole way of thinking. I am hoping to help guide you through it .

Get your ticket

Last year, at WordCamp Raleigh 2016, I presented in the developer track discussing the WP REST API. This year it will be interesting to present to the non-developer attendees and see if I can bring any into the fold. So, go get a ticket for this year! I’ll see you there!

Recapping WordCamp Atlanta 2016 – Day 0 – The Dev Workshop

Posted on March 21, 2016March 21, 2016 by Evan Mullins

Just off a busy but enjoyable weekend of WordCamp Atlanta @wordcampatl. I was able to attend the friday developer workshop and the Saturday sessions of the conference. Though I was a speaker at WordCamp Atlanta in 2012 (From Photoshop PSD to WordPress Theme), 2013 (Your firstborn child theme. Child themes 101+2), and 2014 (Custom Post Types or Choose Your Own Adventure), I couldn’t make it in 2015, I wasn’t selected this year as a speaker. However, I was also able to volunteer to help out and to take some photos and staff the Happiness Room. I also volunteered a couple weeks ago to speak at a WordPress meetup group (Modifying Your Theme’s Design – Learning CSS), so I feel like I was able to still give back.

Overall

TLDR; It was a great conference and like always, talking to people was the best part, though there were some great informative and even entertaining sessions I attended.

In summary, I can feel my brain growing. Knowledge and friends gained. Until next time! #wcatl @wordcampatl #wordcamp
— Brad Iroff (@bradiroff) March 20, 2016

Beginner WordPress Development – Workshop

Micah Wood & Aaron Reimann

The workshop was a great way for many to get started with WordPress development. Micah and Aaron went over from the basics of development through child-theming. I stepped up to help others get started, since we were all installing mamp to get a local wordpress install setup. Even with the famous 5 minute install it was taking most people a long time to get setup, though we can blame the wifi for most of the issues I believe. We then cloned Micah’s child theme demo from github into our theme dir and he get started through the demo. Follow along by reading his blog post length commit messages. It was great to help out! I even learned a few tricks about some WordPress hooks, the loop and template hierarchy.

I’ll share one tip many might not have realized when dealing with child themes. The difference between get_template_directory_uri and get_stylesheet_directory_uri.

get_template_directory_uri refers to the parent theme while
get_stylesheet_directory_uri refers to the child theme

I’ll post an update on Day 2 when I’ve had time to digest some more of the great presentations.

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

Posted on August 3, 2015March 21, 2016 by Evan Mullins

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

Dave brings up that as web developers, we’re quick to complain that that shiny new feature doesn’t have enough support to rely on it and that there should be some sort of global consensus or priority of features so that the most important new features are added to browsers and make all our lives easier. That quote at the end hits the nail on the head though, if it were easy and uniform, then we’d collectively get bored. We thrive on solving problems so much it seems we’ve created more problems.

What screens want

Posted on March 17, 2014March 21, 2016 by Evan Mullins

Great read if you haven’t yet read it yet:
Frank Chimero : What screens want : http://frankchimero.com/what-screens-want/

web and interaction design are just as much children of filmmaking as they are of graphic design. Maybe even more so. After all, we both work on screens, and manage time, movement, and most importantly, change.
So what does all of this mean? I think the grain of screens has been there since the beginning. It’s not tied to an aesthetic. Screens don’t care what the horses look like. They just want them to move. They want the horses to change.
Designing for screens is managing that change. To put a finer head on it, the grain of screens is something I call flux—

and more

Movement, change, and animation are a lot more than ways to delight users: they are a functional method for design.
These examples are essentially animated wireframes, but extra detail isn’t needed. Designing how things change and move is enough for us to understand what they are and the relationships between them. You don’t need the heavy-handed metaphor, because the information is baked into the element’s behavior, not its aesthetics.
A designer’s work is not only about how the things look, but also their behaviors in response to interaction, and the adjustments they make between their fixed states. In fact, designing the way elements adapt and morph in the in-between moments is half of your work as a designer. You’re crafting the interstitials.
We’ve been more aware of this interstitial work in the past few years because of responsive design’s popularity and its resistance to fixed states. It’s a step in the right direction, but it has made work crazy frustrating.

Please read the full article: http://frankchimero.com/what-screens-want/

In this ever-changing industry in which we work in

Posted on May 28, 2013March 21, 2016 by Evan Mullins

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 processes 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 flipped on it’s head and we’re reconsidering everything again.

Have humans ever had to change up what they do as fast and often as we do? Our craft exists in a never-ending state of flux. It won’t settle down for a while, if ever.

Sometimes I dream about being able to master something without the ground constantly shifting under my feet. The status quo feels like a warm blanket sometimes; who wouldn’t want their world to act more or less predictably?

via The Pastry Box Project | 7 February 2013, Ben Sauer of Clear Left.

Add Parent Page Slug and Parent Template to WordPress Body Class

Posted on February 8, 2013August 29, 2014 by Evan Mullins

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?

Building 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.

Walking 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’ );
[/cc]

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?

Adding Viewport Meta Tag via WordPress Theme Functions

Posted on January 25, 2013August 29, 2014 by Evan Mullins

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

With 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.

[cc lang=”php”]
/////////////////////////////////////////////////////////////////////////////////
// Add viewport meta tag to head
//
function viewport_meta() {
?>

3 Plugins that Improved My Workflow in 2012

Posted on January 22, 2013March 21, 2016 by Evan Mullins

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?