Our developers cannot get enough of WordPress. So it was only logical that we would return to WordCamp Orlando for another weekend of Wordpress fun! Here’s a recap of some of the sessions we attended this year:
Building Blocks: Atomic Design in a Gutenberg World
Michelle Schulp @marktimemedia
Michelle Schulp hosted a great session on the process of atomic design in web development, which one of our developers, Ryan, absolutely loves.
Atomic design is a metaphoric way of relating molecular biology with web development processes. Atomic web development starts with the smallest building block of an element. In biology, the smallest elements are atoms. In development, the smallest elements are single HTML elements, such as paragraphs or images. When you build atoms together, they form molecules. A molecule is a combination of atoms, or in this case, HTML elements. An example of this would be a paragraph with a link inside of it. When molecules form together, you get an organism, or in this case, a full template layout full of elements that are created with those molecule and atom elements!
Michelle also gave great advice on extending the ideal content management experience to make it accessible, balanced, consistent, dynamic, extensible and flexible.
Then, she delved into a great in-depth tutorial on the yet-to-be-released WordPress integration of the Gutenberg editor, which can be used as a tool to build sites atomically.
The Wonderful World of Actions and Filters
Joshua Nederveld @jhned
There are currently over 2,000 hooks built into WordPress core, and they are used to either add or modify the content on your Wordpress site. These hooks provide great functionality to extend your Wordpress build. Joshua covered the basics of WordPress hooks and focused on the abilities of the most popular actions and hooks.
First, he spoke about actions. Actions are similar to inspection points that add to your page at specific intervals of time.
Common Wordpress actions are:
- wp_head — loads your header content like CSS styles and meta tags onto your site.
- wp_footer — loads footer content like sitewide scripts that load at the end of the page.
- wp_init — used to register new custom post types. Custom post types allow you to add custom content above and beyond simple WordPress pages and posts.
- after_body_open — allows you to add content right after the opening body tag, which is exactly where Google Analytics tags should be placed, so this becomes a helpful action for our digital analysts to use when implementing GA scripts on our sites.
Joshua then gave details on WordPress filters. Unlike actions, filters do not add content to your page, but rather modify the content on your page.
Common filters are:
- body_class — generates classes for the type of class you are on. For example, if you are on the front page of your website, it adds a ‘front-page’ class that allows you to select that single page in CSS and style it.
- the_title() — loads page titles.
- the_content() — loads page content like paragraphs from the content editor.
Joshua also spoke about great supporting functions to use with these hooks, such as remove_filter and remove_action which remove filters and actions on certain pages that our developers definitely love implementing on our WordPress sites. One of our developers even got to share some knowledge with other attendees during a post-talk Q&A that helped others figure out exactly which hooks are running on your site. View Joshua’s full presentation here.
Advanced Forms Made Easy with Gravity Forms
Travis Lopes @travislopes
Travis spoke on creating a contact form that actually converts. Our content developers plan and optimize forms to provide a solid UX on our site builds, so it was great to hear that our lead generating tactics are being promoted in the field by other Wordpress users. Travis promoted conditional logic when developing contact forms and ensuring that they’re as custom as needed.
He also gave great tips on how to further enhance the workflow and response process of form submittals above and beyond the development process. He spoke about integrating Slack, our DZ-preferred internal communication tool, with website contact forms. His tip was to trigger slack notifications for support staff when a form has been submitted. This provides a faster notification trigger to staff than traditional form submittal email notifications that may get lost inside of busy email inboxes.
Building WordPress Themes with Advanced Custom Fields (ACF)
Tessa Kriesel @tessak22
Tessa Kriesel is a developer outreach manager at Pantheon, which is our preferred hosting partner here at DZ. She spoke about Advanced Custom Fields (ACF), one of our favorite WordPress plugins. ACF allows you to create custom fields that you can attach to custom post types to create your very own post types. This is how we create custom content types like blog posts, case studies, team member listings and more for our sites. She went through the process of creating a single ACF field group with custom fields and loading it on a WordPress site.
Developing for Gutenberg
Micah Wood @wpscholar
To make a new custom block for the Gutenberg editor, he explained the basic components that are needed, such as a name in the form of ‘namespace/block-name’. You can also insert an optional description and icon. To make the block easier to search, add a category and some keywords for other users to find it in the editor’s search bar.
With all the blocks available to use in the editor (including the default blocks, plugin-created blocks and custom blocks developed by developers), Micah suggested using a slash for searching for blocks. The slash will allow you to search for blocks by keywords, such as a “/t” to display all text-based content blocks like paragraphs and headings. The slash search method also shows results for blocks generated by plugins that were built with keywords.
Our development team definitely enjoyed the technical portions of this talk, as we are currently prepping for Gutenberg’s very near implementation date and have been trying a variety of ACF and Gutenberg methods of adding dynamic content.
We had a great time at this year’s WordCamp Orlando (just look at those faces!) and are definitely looking forward to attending next year.
Hearing about growth-driven design for the first time? Learn more about the three pillars of GDD and how this methodology can help you solve your greatest marketing challenges.