Speaking Out in the Wild

Written by

The WordPress community represents a special ecosystem of bloggers, small businesses, developers, designers, authors, artists, you name it. Whenever possible, I try to take some time to meet some members of this eclectic group and give back to the community that has sustained my career for the better part of the last decade.

I wanted to use this post to highlight some of the community events WPHelp.co has had the privilege of speaking at in the last couple years and just generally the ways that you as a site owner can start to access the WordPress community.

WordCamps

WordCamps are 2-4 day events that feature speakers and workshops for local WordPress communities to partake in and learn from. On behalf of WPHelp.co, I put together a presentation on modern standards in responsive web design called “Death of the Media Query”.

This talk explored the use of Flexbox, CSS Grid and the calc() rule to create truly fluid design that responds to different device sizes without the need for superfluous breakpoints (media queries) and the jolts in design they can cause. I’ve embedded the slides at the end of this post if you want to take a look.

This presentation was given at WordCamps in Seattle, Montreal and Orange County.

In Montreal they offered sessions in French and English, and had a yoga teacher on site to get participants minds and bodies ready for a day of education and socializing.

In Seattle, we met Claudia Cuento from Pressable and learned about a new hosting company run by former members of the WordPress.com team. We also met Zac Gordon and were inspired to enroll in his online JavaScript for WordPress course. In Orange County, we got to give a presentation with a nifty wireless microphone and heavy duty camera focused. You can checkout the talk below:


WPCampus

We were also invited to give our talk on responsive design practices at WPCampus. WPCampus is a virtual and in person event that focuses on WordPress in Higher Education and Web Accessibility. It is an amazing and highly relevant event.

WPCampus was brought to my attention by one of the organizers Rachel Cherry, a software engineer who used to work at Disney but no works independently focusing on Accessibility. She also wrote a plugin that helps webmasters identify accessibility issues on their sites called wa11y, you can see a demo of that plugin here.

MeetUps

MeetUp.com is an easy way to learn about what sort of WordPress groups meet in your area. Some of the groups specialize in specific realms of WordPress — for example, there is a WooCommerce specific MeetUp in Los Angeles while other MeetUps are for a general audience. Some are even endorsed by WordPress.

If you find yourself in the Pasadena area please stop by the Pasadena WordPress MeetUp. I frequently attend and occasionally host the monthly WordPress General MeetUp which serves as a Q&A for WordPress beginners, in addition to the monthly WordPress Developer MeetUp.

Get out There

In summary, I wanted to celebrate the opportunities we have had to meet and bond with the WordPress community and hopefully inspire you to come out to an event!

Theme Developer’s Toolkit: Part 3

Written by

This is Part 3 in a series of posts that try to answer the question:

What are some good resources for someone who wanted to learn more about WordPress theme development?

I encourage you to checkout Part 1 & Part 2 in this series if you have not yet: Theme Developer’s Toolkit: Part 1 and Theme Developer’s Toolkit: Part 2.

In Part 1, we learned how a WordPress theme combines a few template files together to create a single page in WordPress. In Part 2, we learned about utilizing the WordPress Template Hierarchy to communicate with WordPress about which template we want to use for specific pages. Now we are going to discuss the WordPress Loop. More specifically, we will look at a tool that every WordPress Theme Developer will find super handy: Generate WP’s WP_Query Generator.

What is a database query?

Consider a blog that has 100 posts. Each of those posts is stored in the site’s database. Scary?! No, not so scary.

When WordPress wants to display a feed of blog posts, it will go to the database and perform a query. In this case it will say, “Hey, database may I please have all the posts.”

When WordPress wants to display all blog posts in the category Tutorials, it will go to the database and perform a query. In this case it will say, “Hey, database may I please have all the posts in the category Tutorials”.

So, a database query is simple a question of the database to retrieve content of a specific type. In a WordPress template we often perform queries in order to display content. In the first example, where we want to see all blog posts, we would likely be forming a query like this for the blog template. In the second example, where we want to display only posts from a specific category, we would likely be forming this query on a category archive or perhaps if we wanted to feature a specific blog category on our home page.

What is the WordPress Loop?

The WordPress Loop is what you do after the query has gathered up the content we are looking for. Let’s take our first example of a blog website that has 100 posts. We want to display all those posts on our blog page.

Rather than code that we want to display the title of blog post 1, the featured image of blog post 1 and an excerpt from blog post 1… and then do the same for blog posts 2 – 100, we use what is called the WordPress Loop.

The WordPress Loop allows us to say while we have these 100 blog posts, go through them one at a time and perform these actions for each post. In this case the “actions” we want performed are to display the title, the featured image and an excerpt.

Now that we understand the concept behind a query and the WordPress Loop, let’s take a quick peek at the tool we are featuring in this installment of the WordPress Theme Developer’s Toolkit.

Tool: WP_Query Generator by GenerateWP

GenerateWP offers a tool on their website called the WP_Query Generator. When we code a query for WordPress to ask the database we have to format it a special way and make sure we are communicating correctly the type of information we want returned. The WP_Query Generator tool allows you to fill in fields that describe the information you are looking for, in return it provides a formatted query that you can use in your WordPress templates.

Whether you use this tool to creates your queries for you or you simply play around with some values to see what is possible with a database query — I think it is a useful tool in working towards understanding WordPress Theme Development.

The code found below was generated by WP_Query Generator after I went to the “Type & Status” tab and entered in “post” under the label Post Type. I also went to the pagination tab and entered in the value “-1” under the label Posts Per Page (-1 means return all posts).

The code below shows how we setup our array of query arguments, which we are setting equal to a variable called $args. We then perform our query by using the WordPress function WP_Query(). Lastly, we have asked the WP_Query Generator to include a loop which we would use to perform the same action on each individual post (show it’s title, etc.).


// WP_Query arguments
$args = array(
'post_type' => array( 'post' ),
'posts_per_page' => '-1',
);

// The Query
$query = new WP_Query( $args );

// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
// show the title, the featured image and the excerpt
}
} else {
// no posts found
}

// Restore original Post Data
wp_reset_postdata();

Lessons from Teaching Coding

Written by

A few years back a colleague of mine asked me if I was interested in teaching some coding workshops at DCTV, a New York based non-profit that has been providing education and low-cost film equipment for nearly five decades. I jumped at the opportunity, did a few interviews — eventually leaving me standing in front of my first class, a room of adults just off work for the evening ready to learn how to code.

The first course I taught was an introduction to HTML/CSS. Over a three year period we rolled out “Build Your First Website”, “HTML/CSS 2”, “Introduction to JavaScript” and “Introduction to WordPress”. As I am sure any teacher would tell you, it is one thing to understand something yourself but to be able to break it down into sequential steps to help someone else understand the material is a unique challenge all its own.

Here are my biggest takeaways from teaching coding classes:
1. Breaking a skill like coding into its fundamental pieces will profoundly improve your understanding.

A teacher I once had required our class to build an object oriented application using the coding language Ruby. He provided the class with incredible detail that outlined every aspect of what we were to build.

Once our projects were complete, he introduced to Ruby on Rails. An exact replica of the project what we had just spun our wheels desperately trying to create. Once the initial frustration past, it was clear everyone understood Ruby on Rails with an intimate detail because we had worked through its building blocks.

2. In a similar vein teaching these courses made me dramatically better at WordPress theme development (Link to theme development tool kit) and troubleshooter. To build a theme you have to combine a collection of WordPress puzzle pieces.

For example, to make a single page you need header.php, page.php and footer.php. As their names suggest they visually stack on top of each other to build a single page you see when visiting the frontend of a site.

This is an abstraction of a static, hard coded webpage. Teaching these courses pulled me out of the WordPress paradigm and reminded me to consider the whole of what I was creating. With this renewed perspective my ability to template and troubleshoot where in the file schema an issue originates was refined.

3. Lesson number three: Teaching is super fun! I highly recommend any of my fellow hardworking computer types to mix this into their professional development.

4. Met some cool people, like Shayna

It was actually during these evening courses that I met our Support Engineer Shayna. She was a star student in my “Build Your First Website” course. She ended up attending all of the courses I taught at DCTV and at the end I asked her if she would like a job. We have worked together now for the last four years. I didn’t realize during all those courses that she was also gifted at data architecture.

Theme Developer’s Toolkit: Part 2

Written by

This is Part 2 of a series of posts that try to answer the question:

What are some good resources for someone who wanted to learn more about WordPress theme development?

I encourage you to checkout Part 1 in this series if you have not yet: Theme Developer’s Toolkit: Part 1.

In Part II we will be discussing a tool that every WordPress Theme Developer will find super handy.

Tool: The WordPress Template Hierarchy

A WordPress theme consists of a number of templates. They are reusable on a number of pages and posts. For example, the template page.php is the template that most of a site’s pages will use. The slightly less obviously named single.php is the template that all our blog posts will use.

A template will provide the types of content featured and layout of that content. A template is powerful and reusable though because the content will change for each page using that template.

So for example, let’s say the page.php template might layout all pages to have its title at the top and centered. Below that title the template might be built to show copy on the left and one featured image on the right.

Taking this example further, if we imagined a site that had a Privacy Policy page and a Terms and Conditions page that were both using the page.php template, the layout would be the same but the content will vary. They are both using the same template and the template provides consistent layout for varied copy.

If we wanted the About page to be a completely different layout than the page.php template we described before, we would need to build a new template. Let’s say in this template we built a special layout to display our awesome team and a hero image with our mission statement on it. In order for WordPress to know to use our new, special About page template and not the page.php template described before we would need to utilize the WordPress Template Hierarchy.

The people at WPSHOUT are apparently brilliant and turned this tool into a website that can be found here: https://wphierarchy.com/.

The WordPress template hierarchy is a tool that demonstrates how WordPress selects which template to use. Near the right hand side of the tool we see a purple box that read page.php. If we trace the line out of page.php two boxes over to the left we see a box that reads “page-$slug.php”. We can ignore the $ here, and focus on the word slug.

In our example, we want a custom template for the About page. If the About page were found at the URL www.example.com/about, than our slug would be “about”. It is the last part of the URL.

So in our theme we would create a file called page-about.php. In this file we could build our special About page template. When loading the About page of the site WordPress would use page-about.php instead of page.php. When viewing the Privacy Page noted earlier WordPress would continue to use the page.php template.

The WordPress Template Hierarchy is a powerful tool for learning how to build WordPress themes. It is also a great reference years into theme development.

If you enjoyed this post please checkout the next installment, Theme Developer’s Toolkit: Part 3.

Theme Developer’s Toolkit: Part 1

Written by

Last week I was at the Pasadena General WordPress MeetUp, which I have the privilege of occasional hosting in place of the very knowledgeable Alex Vasquez. If you find yourself in the area come say hi.

Anyways, this question came up:

What are some good resources for someone who wanted to learn more about WordPress theme development?

A few developers in the room described their personal journeys to theming — many recalled trial and error, others cited specific resources however they were a bit outdated. There was also a shoutout to the WordPress educator extraordinaire Zac Gorden, who I believe is presently pouring his energy into JavaScript for WordPress.

In the vein of tutorials, personally I remember finding this gentleman’s YouTube Channel helpful for my journey.

WordPress Theme Developer’s Toolkit

Despite the thoughtful answers, the question lingered with me for a few days. I started to think about what were the conceptual pieces one would have to put together to wrap their head around WordPress theme development. And more fundamentally, what combination of resources and lessons would setup a future WordPress theme developer.

Lesson: Build a Website using only HTML and CSS

WordPress, Joomla, Drupal and any other Content Management System are all abstractions. WordPress provides a tremendous amount of utility bundled into a package that allows anybody to create a website.

Part of this abstraction is breaking a website into various components. For example a header, page content and a footer all come together to form a single page. In WordPress each of these three components correspond to files you will find in a WordPress theme. The reason they are broken into three files is not so important for this article, what is important is that the three files combine to form a single page.

This abstraction is ultimately beneficial for us when developing sites, however if you do not understand what is being abstracted away it can leave you struggling to connect the dots WordPress is filling in for you. On the other hand, to be able to build a page without the help of WordPress allows you to understand the fundamental structure of a WordPress theme.

If you were to build a one page website using only HTML and CSS you would start from the HTML head tag. That would be followed by the HTML body tag. And at the end of the body tag you would likely place a footer tag. Understanding the barebones of a website gives you perspective when looking at a more complicated file structure like what you would find in a WordPress theme.

If you took this process a couple steps further you would likely want to include a couple images, a CSS file and maybe even load a Google Font. Understanding how and where to reference these additional elements dusts away even more of the abstraction WordPress supplies. Additionally, you will need to store the image files and the CSS file somewhere in your site’s folder. The Google Font you would reference externally. Perhaps this is a little confusing. To quickly visualize this, here is another tutorial that demonstrates what I am describing: https://thehelloworldprogram.com/web-development/creating-files-folder-structure-web-pages/.

In a WordPress site we have all the same components — images, CSS and third party resources (the Google Font). Going from a content manager familiar with the WordPress dashboard to a theme developer who needs to be familiar with the theme file structure is challenging. However, if you go through the process of building a site using simply HTML and CSS, I believe you will find navigating a WordPress theme’s file structure much easier.

If you enjoyed this article, please checkout the next post in this series: Theme Developer’s Toolkit: Part 2.

Ruby Regex Using =~ to Parse Data

Written by

I recently had to parse through a large dataset, millions of lines. When you have to parse at this scale regex should be the word buzzing around in your head.

Regex, or regular expressions, are a tool used throughout programming languages, in Google Analytics, I would guess Microsoft Excel, etc. Regex allows you to declare general rules for how a string should or should not be.

How a String Should or Should Not Be

Let’s take an example here:

So here we have a string that has some (not entirely accurate) information about Saied Abbasi. The string includes 5 spaced ‘words’, or smaller strings within it. Let’s pretend the words correspond to these values:

SA0228 = Saied Abbasi’s initials and his birthday of February 28th
PIS = the zodiac sign Pisces
R1 = Ruby 1 year experience
JS1 = JavaScript 1 year experience
WP4 = WordPress 4 years experience

Imagine you have a millions records like this for different individuals and you want the initials of each individual and know how many years of Ruby experience they have.

You would need to write some logic to move through each complete string. Then you would need the internal ‘words’ in an array. So taking a single line with our string example and creating an array:

If we only care about an individual’s initials we could combine Ruby’s gsub method and some regex — a powerful combination!

So if our dataset is kind enough to always include initials followed by a four digit birthday and we only care about retrieving the initials we could use some code like this using our variable words representing an array of strings:

So here we take our array of words and remove the first word, ‘SA0228’. On the variable word we use gsub with an regular expression. We say if the string includes any characters with the exception of capital letters from A to Z, then replace those outliers with “” — a blank space, which removes them.

This leaves us with just SA which we set equal to a variable initials.

When I write regex I give it a quick test over at Rubular.

Now we want to move through the remaining words and find any that match the letter R followed by one or two digits for years of experience. We could make an explicit little method like this:

Here we do a loop using the each method. This will let us cycle through each word in the words array one at a time. Each time through we take an individual word and we check it against the regular expression R\d.

Breaking down =~
When we run the string “R1” and evaluate it against =~ /(R\d)/ the return value is 0. This corresponds to the first index where our regex expression finds a match. In this case the capital R at index 0. If we ran the expression AR1 =~ /R\d/, the return value would be 1 corresponding to the R at index 1.

For clarification, our regex is checking for a capital R followed by any 0-9 value (\d is a shorthand for any digit value). Within the syntax there is another aspect worth highlighting, when we use =~ we wrap our regex in / slashes — one at the beginning and one at the end. The parenthesis make sure the R value is immediately followed by a digit, while a string like RP1 would not return a integer as the regex would not match.

Another thing to highlight, if we ran JS1 =~ /(R\d)/ the return would be nil. In Ruby the only ‘falsy’ values are false and nil. 0 is a ‘truthy’ value. This is really handy because we can use our =~ regex statements in conditional clauses, like we do above. Pretty cool! For lots of information on true and false values in Ruby and other programming languages check this out.

I use word[0] = ‘0’ as a benchmark tested way of quickly replacing the value at index 0 with ‘0’. This then allows me to easily run .to_i to turn our string of numbers into an integer.

From here we have the initials and the years experience in Ruby. You can imagine when tackling a huge dataset how regex and the =~ evaluator can be extremely powerful.

Contributing to Open Source

Written by

As a quick precursor, every day I have the privilege of using open source software and you do too. Open source refers to an app, software, platform, codebase that shares their source code with the public allowing developers to study and contribute to that code base. Most mainstream coding languages are open source and WordPress itself is an open source project. It is an amazing convention that enables the rate at which web development evolves.

This past weekend I attended a Hacker Hours Meetup event here in NYC.  A group of 20 to 30 developers were presented 5 potential open source projects to make a contribution to. One of the projects was Exercism.io which is an application that provides coding challenges in over 30 programming languages. The tool was actually introduced to me earlier this year and I knew from personal experience that it was pretty great.

Under those circumstances I figured contributing to an application I have used would be a nice way to reciprocate. This was my first open source contribution, other than some minor merges to the Flatiron School’s online learning platform, so I was not expecting to do anything to impactful. As I glanced through the Github repository I saw some reported issues and the documentation around making a contribution.

I was overwhelmed. I spent 20 minutes looking into issues to realize the issue had already been resolved or perhaps was too convoluted for me to tackle. Eventually I saw a report of a broken link — easy enough.

I used a broken link checker tool to see if there were more broken links or if the links resided in a template that was being used for several pages. By the end of it I had made a few pull requests and was happy with my day.

A few days later, a friend I made at the Meetup sent me a screenshot from a blog post by Katrina Owen, who wrote Exercism.io were she thanked me for fixing a bunch of broken links! Having the author of application publicly thank you for your first open source contribution is pretty cool. The full post is here.

There was a hackday in New York, First-Time Open Source Contributor Workshop, and we got some great contributions. Leonardo Castillo submitted a completely new exercise and Saied Abbasi found a bunch of broken links.