WordPress Core Contributor and my WordPress Story

As I updated a WordPress site today (the new 5.0 version just shipped) I was proud to see my name in the list of core contributors! I’m listed as a core contributor in versions 4.9 as well as 5.0! I didn’t get around to sharing the news last year, but seeing my name in the credits as I upgraded today I realized I should share my WordPress story.

My name in lights ^

My WordPress Story

I share because as an aspiring developer over a decade ago, I fell into WordPress quite accidentally. I was studying in art school at the University of Georgia and creating my own interdiscipline degree with art, technology and animation. I happened to sign up for a Web design for Artists course to create a portfolio site because I was friends with the teacher. We learned flash and stepped into WordPress for blogging. I learned some coding from flash as well as the basics of HTML and CSS to customize the look of my kubric2 blog. The more I learned about coding online, the more I just ate it up!

I loved the immediacy of it all, in contrast to the long time required in my animation classes. For animation you must develop the story, the characters, do the modeling, and rigging and textures and lighting and keyframes etc etc etc, and then you have to let the computer render the animation to see the final. One of my final animation projects for a full semester project was literally half a minute long and it was a rendered movie file that I couldn’t even email because it was so large! It was a motion capture video and was still rather jumpy, but was pretty exciting stuff at the time.

In contrast, in my website class, my final project was viewable anywhere in the world and I could change the look on the fly. I even uploaded my animation so that others could view it online. I was excited for the new world of the internet! It was also interactive! You can do more than just watch it, you actually engage with it and touch (click) it and explore it. Though it can have some movement like animation, it’s a more simple type of movement.

Under pressure to support my pregnant wife, I found a job as a web designer and learned more about javascript and php on the clock. I’m happy that years later, I’m still using WordPress to build sites and grow my skills. WordPress has helped me make sense of web development and grow my career to support a growing family. I’m still extremely grateful and even fascinated by the open source community surrounding the software. I’m humbled to be included in the names of contributors. If I can do it, so can you. Keep working at it and chase your dreams.

My (small) Contributions

Last year, for 4.9, I was able to fix a bug I found in the media library where clicking on the edge of an image failed to select it. It was minor, but I found it annoying, so I created a ticket and after tinkering a while on it figured out how to submit a patch. I discussed the patch with some others and at WordCamp spoke with a committer who pushed it through!

I got involved with the early development with Gutenberg (the new block editor) on github. I figured out how to submit the pull request via github and participated in the wordpress slack discussions. That was a long time ago, but finally with the release of 5.0 Gutenberg is now included. That is until I got too busy to continue and then when I was about to pick it back up, I changed jobs. I know they have been small contributions, but I’m proud nonetheless. I have a goal to continue my contributions and perhaps even up the amount of code I’m able to share.  I feel like I’ve come a long way since those early years, as well as WordPress has come a long way.

My github handle in lights ^

Modifying Your Theme’s Design – Learning CSS: Atlanta WordPress Users Group Presentation

Here’s my presentation for the Atlanta WordPress Users Group to continuing their discussion on theming. The meetup gives you a first hand look at modifying your Theme’s look and feel. We’ll be showing you how to make typical changes to existing themes. We will not be showing you how to create your own theme from scratch, though we will have a meetup later in the year to do that.

During this meetup we discussed:

• What is CSS and why do we use it?

• What are ‘typical’ modifications to themes and how to make them

• Using ‘inspect element’ and/or ‘firebug’ to find and test

• Correct way to change Fonts

• Simple color theory and design

Here’s the slide deck for the presentation

The presentation overviews the internet, teaches us how to spell HTML and other web programming “languages” that come together to form a WordPress website, like HTML, CSS & PHP. We even discussed web development tools like FTP clients and which text editors to use. We went over what makes up a wordpress theme and then the concept of child themes. Discussed the process of creating your own child theme with just a couple files and that you can create a child theme for any theme out there. We demoed how to view source and dissect any website, but more importantly, how to inspect elements on your site and live-edit the css for any element. Then to write these CSS rules to our theme to lock in the edits in your child theme.

If you have any further questions that you would specifically like reviewed, leave them in the comments below and I’ll respond.

We created a child theme for twentysixteen

We created our own child theme and discussed the benefit to creating a child theme over other ways to modify a WP theme. Our twentysixteen child theme did wonders for the look:

Screenshot 2016-03-10 08.32.56

We explored the code to create our own WordPress child theme

Here are the code snippets for review


<?php
function theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

view raw

functions.php

hosted with ❤ by GitHub


<?php
/**
* The template for displaying the header
*
* Displays all of the head element and everything up until the "site-content" div.
*
* @package WordPress
* @subpackage Twenty_Sixteen
* @since Twenty Sixteen 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="who" content="is your daddy">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php endif; ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<div class="site-inner">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentysixteen' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<div class="site-header-main">
<div class="site-branding">
<?php
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; ?></p>
<?php endif; ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php endif; ?>
</div><!– .site-branding –>
<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
<button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>
<div id="site-header-menu" class="site-header-menu">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!– .main-navigation –>
<?php endif; ?>
<?php if ( has_nav_menu( 'social' ) ) : ?>
<nav id="social-navigation" class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
) );
?>
</nav><!– .social-navigation –>
<?php endif; ?>
</div><!– .site-header-menu –>
<?php endif; ?>
</div><!– .site-header-main –>
<?php if ( get_header_image() ) : ?>
<?php
/**
* Filter the default twentysixteen custom header sizes attribute.
*
* @since Twenty Sixteen 1.0
*
* @param string $custom_header_sizes sizes attribute
* for Custom Header. Default '(max-width: 709px) 85vw,
* (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px'.
*/
$custom_header_sizes = apply_filters( 'twentysixteen_custom_header_sizes', '(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px' );
?>
<div class="header-image">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</div><!– .header-image –>
<?php endif; // End header image check. ?>
</header><!– .site-header –>
<div id="content" class="site-content">

view raw

header.php

hosted with ❤ by GitHub


/*
Theme Name: Child of 2016
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Sixteen Child Theme
Author: Evan Mullins
Author URI: https://circlecube.com
Template: twentysixteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twenty-sixteen-child
*/
.site-branding .site-title a {
color: cyan;
font-size: 4rem;
// border: 1px solid red;
margin: 50px;
padding: 50px;
}
.site-description {
text-indent: -999rem;
background: url(img/logo.png) center center no-repeat transparent;
background-image: url(img/logo.png);
display: block;
width: 500px;
height: 500px;
background-size: contain;
padding:0;
}
.entry-date {
font-size: 10px;
}
.entry-footer,
.entry-footer a {
color: pink;
}
.entry-footer a {
color: pink;
}
a {
color: tomato;
}
a:hover {
color: rgba(130,203,45, .8);
}
a:visited {
color: #00cc33;
}
.widget_meta {
display:none;
}
.widget_recent_comments {
padding: 1rem;
margin: 1rem 0 4rem;
}
.widget_recent_comments .widget-title {
background: black;
color: pink;
padding: 1rem;
}
.site-info .site-title {
font-size: 3rem;
}

view raw

style.css

hosted with ❤ by GitHub

How to Add a class to the WordPress comments submit button

This WordPress feature slipped by me, but since the release of WP 4.1 there is a great and simple new filter that I’ve been watching for a number of years here. Interestingly this ticket was opened 5 years ago today, so some have literally been waiting years! The commentform.php file now has a couple more options available as explained in this changeset.

add_filter( 'comment_form_defaults', 'circlecube_comment_form' );I have been using foundation and bootstrap on sites and have struggled with the best way to add a button class to this button since I wanted it to inherit the frameworks styles for a button. I’ve seen a few ways to go about doing this, like using javascript (ug), or adding an extra button and hiding the original button with css (meh). But now it’s a simple little filter to add to comment_form_defaults.  Just add your desired class value to ‘class_submit’ in the args. I’ve put it into a simple little gist to add a ‘button’ class to my input type equals submit:


function circlecube_comment_form( $args ) {
$args['class_submit'] = 'button'; // since WP 4.1
return $args;
}
add_filter( 'comment_form_defaults', 'circlecube_comment_form' );

view raw

functions.php

hosted with ❤ by GitHub

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 we’re actually interested in—and its conditions.

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

Great article discussing how CSS does in fact contain some login based on your selectors, don’t overcomplicate it. Use as much specificity as you need and no more. I also like the reference to the Inception Rule.

CSS Dig

A chrome extension for analyzing your CSS. Check your properties (and reuse – are they following DRY principles?) and your CSS selectors (and their specificity).

Analyze your CSS in a new way. Consolidate, refactor, and gawk at the 37 shades of blue your site somehow ended up with.

Take a look at all your CSS properties, their frequency and variations. Have too many shades of blue? Inconsistencies often means confusion for your developers and irregularities for your end users.

Are your selectors long? Using lots of IDs? Specificity wars are frustrating and piling on new CSS will only make the situation worse. Find potential problem areas and make a plan to fix.

via CSS Dig.

On Going Responsive (responding to Where to Start)

trent-walton-thumbI needed to write this up about going responsive in response after reading Where to Start (by Trent Walton of Paravel) about getting started with responsive web design. Thanks for sharing your thoughts Trent, I agree whole heartedly. In my experience it is the same. I wanted to share his post and also add my commentary for the parts that I really think Trent is spot on. Some dynamite points.

Longer On-Ramps Have Benefits

I believe Trent is talking about the on-ramp of beginning to create responsive sites. But when I first read the headline about the benefits of a lengthy on-ramp I was thinking about the ‘pre-design’ work that goes into a website. All that work that comes before design and has always been super beneficial to proceed thoughtfully with content strategies, sketching, architecture, wireframes and prototypes. This ‘on-ramp’ stage is even more important in RWD. The time well spent upfront before getting into designs and especially programming really really pays off. Think through all scenarios and purposes and requirements of the site before you hit the ground running. Or else you may get to the finish line realizing you forgot the baton. This is so important concerning responsive from the beginning, when making wireframes for example, we really must think about the available space to render the content.

Design

It’s no longer for prescribing exactly what a site should look like. Instead, it’s used for quick layout exploration and asset creation. As for which view/layout size one should start with, I don’t think it matters. Remember, a single photoshop comp will only express a sliver of the layout potential a fully-flexible responsive site has. It’s impossible to accurately assess a responsive layout in .JPG form.

Yes! Agencies (and clients alike, but I feel that the agencies and developers need to lead the way) need to move past the relic ideal of pixel perfect websites. Not that they should look bad, but they should not all look the same. The nature of the web is to be flexible, right? Let’s embrace progressive enhancements and move on when old browsers don’t see it as nice as current browsers.

CSS

All my values are relative (em, rem, etc.) and based on the 100% 16px base, so I can move code around without losing proportion.

Yes, Again! We need to be relative and fluid all the time. We’ve all picked up some bad habits along the way, but RWD can be seen as a good excuse to remove these.

Breakpoints should always be dictated by our content. Not by `insert popular device of the day`. We should be starting to learn that we shouldn’t rely on any specific device or measurement, because they change all the time. Let’s FORGET device resolutions at the media query stage. These dimensions should be thought out earlier and influence our content strategy. Nothing wrong with using 480 as a breakpoint if it makes sense for your content, but don’t force a square peg into a circle hole. Who knows, next year all these circle holes may become triangles (or spheres) and then we’re stuck shoehorning the square we started with again or starting over. Weird analogy, but I’m just going to let it be.

Regarding Grids, I agree here too. It seems that when using a grid for Responsive Web Design I feel constrained to the grid more than I should. Plus I think it takes the fun out of the process of laying out the content as prescribed. I love the idea of ‘content coreography’ too. It really adds to the sense the required craftsmanship by the developers/designers behind the site well done RWD. It also makes me think of site creators as the directors who layout and present data and lead the story telling of the site.

I’ve said it before, but 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.

Please read Trent’s full article as I’m sure it’s packed with good nuggets for you too.

When making the transition to building responsive websites, the hardest part can be getting started.

I get my fair share of questions about how to choose a direction and chart out the first few steps from industry comrades and potential clients. It can seem daunting, so I thought I’d attempt to sum up a few of my own current thoughts on the matter.

via Where to Start | Trent Walton.

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?

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/

SoFresh! – It makes your CSS yummy.

SOFresh-ssRecently, I stumbled on this tool that has really helped my development process. It keeps my css file(s) current in the browser as I edit and save them. Before this I’d make an edit, save/upload (which I’ve combined into one step with SublimeText) then switch to the browser and refresh the page and/or clear cache to make sure the latest edits are loaded. Then rinse and repeat. But now with this tool I’m able to save my edit and glance at my browser as it auto refreshes the stylesheet once it notices the new file (usually about 1 second) and I see my edit, and continue with my edits. It may seem small but after doing this dozens and perhaps hundreds of times each day you can understand the simplicity of this!

[Before I used a javascript based tool called CSSRefresh which would just automatically reload the css file every second. Which had the same effect, but was a heavy consuming load on the browser as well as on the server. It ended up making the browser go much slower (especially when scrolling) and it crashed it often. Sadly, I was forced to accept the tool as a flop for my workflow.]

SoFresh is a bookmarklet based tool though. It allows you to specify a css file or more to ‘watch’ and then when the file changes on the server it smartly reloads it, saving me the trouble to switch apps reload page and wait and potentially reload while clearing my cache. My refresh and cache shortcut keys are much happier now and I take a breath every time I save an edit.

SoFresh! – It makes your CSS yummy..

Apple "support" with fixed position layouts

This really echo's the reasons why I still have trouble with the 'thoughts on flash' mentality (although, I know flash is irrelevant here). It's similar in that there is this self proclaimed 'support' for html5 (making needing flash irrelevant)… but in real life the devices are far from supporting HTML5. Support to apple and support to developers is a totally different story. Even many simple things that are HTML5 become very difficult in developing for iPhone, iPad or other iOS devices. Here's an example of many issues that result in attempting to use features that iOS claims to "support".

Embedded Link

Issues with position fixed & scrolling on iOS
With the release of iOS 5, fixed positioned layout is said to be supported in MobileSafari. The word supported needs to be taken with a pinch of salt, because there's all kinds of issues which I i…