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

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.

wordcamp asheville 2017

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!

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

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?

fortran- the original hanging chadI 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.

love actionscriptI 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!

Speaker at WordCamp Orlando – Intro to WordPress Development

I’ll be a WordCamp Speaker in Orlando this year. WordCamp Orlando is October 8th and my speaking time is Saturday afternoon. My presentation topic will be a crash course intro to development for beginners. I’ve given some presentations similar to this at work and have even had pieces of this presentation in parts of other talks I have given, but it will be nice to just focus the whole time on the intro for attendees that feel dev presentations get too deep too quickly.orlando-wordcamp-hero

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

I’ve been a WordCamp Speaker in the past, but it’s been specific to Atlanta. Orlando will be fun and I’m excited about the KidsCamp sessions they have going too!

WordCamp parents can now usher in the next generation of WordPress builders at our first annual KidsCamp! Parents attending WordCamp can bring their junior builders along and enjoy a day of parent-child learning under the tutelage of some of our WordPress Master Builders!

WordCamp Orlando 2016 will be at the UCF Rosen College of Hospitality Management in south Orlando! So get your tickets and bring the kids. I may or may not be stopping in to Harry Potter World while I’m in town. =)

WP Features: Theme or Plugin

Reading my wpdaily.co updates today and saw this post talking about WordPress theme features. Eric explains the debate:

Generally-speaking, the conversations have always circled around features: There are those that believe every feature you could ever imagine should be included like text color, font selector, and more. On the flip-side, there are those that feel WordPress themes should be finite and extra features should only be added when it’s niche specific.

He says the the main problem is theme bloat, but I think it’s more about the lock-in effect some themes have on users. If they customize it or add content via functionality provided by the theme, then if they switch they no longer have access to it (although the content does persist in the database, there’s just no longer an interface to accessing it).

many-theme-options

If users are stuck in your theme because it’s the only way they know how to show their content then it becomes problematic. I’m curious as to how often users are going around changing themes though. Are they changing themes for more/different functionality or for a new look? I find myself changing a theme every couple years or so to update the site, but that’s usually in a whole redesign phase and not just switching around for fun. Should theme switching be more frequent?

I also see it from the user perspective. They just want to purchase/install a theme and be running, they may not have the patience or expertise to 1) find the right plugin 2) install it and set it up, so they’d prefer it be in the theme as a package deal.

Partly, I don’t see it a problem including CPT info in a theme, because that’s where you have to style it anyways, right? Users want their post types, but they also want the templates and styles and functionality/integration with the site that go along with them, and I think a theme is the easiest place to keep all that for the developers as well as the users. Plugin shouldn’t have all the styles for the CPT content and can’t have the template files because then if they switch the theme the styles conflict with the new theme. They may end up having to learn CSS to switch the theme anyways. The users are going to want their data displayed properly as well as it be accessible on their site. So if a new theme would not properly display or integrate the CPT data, then why have it included at all.

Eric does offer some alternative solutions:

Offer a Support License purchase option that allows users to follow tutorials for their own customization.
Offer free downloadable plugins that work exclusively with your premium theme that adds easy functionality.
Offer tiered theme versions–beginner, advanced and developer.

I like the idea of including a plugin to add functionality, but I’d suggest that rather than making it exclusive, make it work with any theme, just make sure your theme supports it (along with other popular plugins).

There is talk about making extra theme functionality ‘opt-out’ for those experienced enough to do so. Set a variable in the functions.php file or even comment out a block of code to remove some customization options to it can be done via a plugin. This, although more work, seems like a good option. Providing the features by plugin makes sense, but asking beginner users to do that extra work seems like unnecessary friction.

Also, it’d be nice if WP had a built in UI for custom post types and custom taxonomies and even custom fields and meta boxes in core. Lay users could then easily create content types and manage data. WordPress would be a tool to create your own custom CMS. Theme developers could create post types as well and then WP would be smart enough to detect data in a CPT table and include the needed UI. Then the users could create/manage content types so if they installed a theme that created a custom post type, since it was now in the database, it would stay even if the theme changed. There are many rabbit holes here, but I feel like I’m onto something and would be excited to see WordPress go this direction.

Thoughts?

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

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.

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

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!

Stats on a Windows 8 Game

The Falling balls app seems to be Keith Peter's "Hello World" in exploring new development arenas. Here he walks us through how his first app is trending on Windows 8.

Embedded Link

Falling Balls Update | BIT-101
At the end of October this year, Falling Balls was released into the Windows 8 Store. After just over a month, I thought it would be interesting to discuss how it is doing, and to answer the question,…

The CSS Vendor Prefix Debacle continues

The Opera Browser will soon be released to support the webkit prefix, which was designed and spec'ed to only be supported for css properties in development by webkit browsers (safari and chrome). Who is to blame? Opera points the finger squarely at webkit for not following standard procedures and at developers who aren't writing according to standards and aren't even including the prefix-free version of properties in their code. I'd be interested in seeing some real data as to how many sites are doing this and what properties they are using. It seems like a horrible practice and I've not met anyone who's fessed up to doing it on production level projects. They should be at least using the non vendor property and are most likely using some sort of starte package, boilerplate, framework or preprocessor or tool that does all the prefixing for them. So where's the data?

Embedded Link

Opera confirms WebKit prefix usage | News | .net magazine
Open web under fire as Opera argues author errors forced its hand