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:

WordCamp Orlando Building Blocks: Atomic Design in a Gutenberg World

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.


WordCamp Orlando The Wonderful World of Actions and Filters

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.


WordCamp Orlando Advanced Forms Made Easy with Gravity Forms

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.


WordCamp Orlando Building WordPress Themes with Advanced Custom Fields (ACF)

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.


WordCamp Orlando Developing for Gutenberg

Developing for Gutenberg

Micah Wood @wpscholar

Micah Wood, a Wordpress core contributor for Gutenberg, spoke on the content management system’s new editor. He spoke about the Gutenberg editor’s variety of content blocks, like images, text and forms to show the best features of the editor’s flexibility. He also noted JavaScript abstraction wrappers like wp.block that allows you to create new blocks above and beyond the ones developed by WordPress. Other speakers at the event also mentioned using blocks developed by others in the community that are open source and reusable.

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.

For those new to the technology behind Gutenberg, he delved into the foundational tools that will be helpful to know before building with Gutenberg. Micah referenced tools such as: node, npm, webpack, and babel, in addition to React testing tools like Jest and Enzyme (because WordPress’ core is built with React). New developers hearing the technology stack Gutenberg uses, don’t fear! Gutenberg blocks can be created with modern JavaScript like ES6 and JSX, but can also be created with simple, vanilla JavaScript. So if you’re not ready for JSX just yet, vanilla JavaScript code will work as well. Micah mentioned to just note that JSX will make the code a lot cleaner.

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.


Designzillas wordcamp orlando 2018

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.

Download FREE E-book

blog author

Author

Leisy Vidal

Digital Designer at Designzillas, Leisy excels at creating designs that are not only beautiful and up to date, but user-focused and strategic—all in record time.

You May Also Like