1 of 46

Building excellent web experiences

with

Advanced Custom Fields and Visual Composer

Stanislav Khromov�WordCamp Norrköping 2014

2 of 46

About me

Stanislav Khromov

Web developer at IDG Sweden

3 of 46

This talk

  • Setting up a good workflow for:� Custom Post Types� Custom Fields� Custom Shortcodes
  • Providing a good experience for content publishers
  • Case study - event sites

4 of 46

Meet the cast

WordPress Core features

  • Post Types
  • Custom fields
  • Shortcodes

[gallery]

[gallery ids="729,732,731"]

5 of 46

Meet the cast

Plugins

  • Custom Post Type UI
  • Advanced Custom Fields
  • MinQueue
  • Visual Composer

6 of 46

Custom Post Types - Goals

What do we want?

​

  • Visual interface for creating a CPT
  • No configuration in the database!
  • Separate CPT configuration into different files
  • Autoloading

7 of 46

Custom Post Types - Example

Interface for creating a custom post type i Custom Post Types UI.

​

Don’t forget the Advanced Options!

8 of 46

Custom Post Types - Exporting

CPT UI lets us export to code!

But where do we put this code and how do we organize it?

9 of 46

Custom Post Types - A plugin

Our CPT Plugin

  • Each CPT in a separate file
  • Plugin handles loading of the CPT:s�
  • Basic folder structure:

​

​

10 of 46

Custom Post Types - custom-cpt.php

Problem:�Post types will be loaded twice. (Once from code, once from database.)

11 of 46

Custom Post Types - custom-cpt.php

Solution:

Add a config variable to wp-config.php and load conditionally.

12 of 46

Custom Post Types - custom-cpt.php

Improved Custom CPT plugin:

13 of 46

Thought process

Create CPT (Visual)

Configure CPT (Visual)

Export to

PHP file

Commit to version control

14 of 46

What did we accomplish?

  • Visual interface for creating a CPT
  • No configuration in the database!
  • Separate CPT configuration into different files
  • Autoloading

​

Result = A good workflow for working with Custom Post Types

15 of 46

Moving on to

Custom Fields

16 of 46

Custom Fields

What do we want?

​

  • Visual interface for creating fields
  • No configuration in the database!
  • Separate field configuration into logical groups
  • Autoloading

​

17 of 46

Custom Fields - Example

Advanced Custom Fields provides an interface for creating custom fields that are grouped into Field Groups - collection of fields that can be attached onto a post type.

18 of 46

Custom Fields - Exporting

ACF lets us export field groups!

19 of 46

Custom Fields - Plugin

You know the drill.

Same basic idea as the CPT plugin!

20 of 46

Thought process

Create field groups and fields (Visual)

Configure field groups

and fields (Visual)

Export to

PHP file

Commit to version control

21 of 46

What did we accomplish?

  • Visual interface for creating fields
  • No configuration in the database!
  • Separate field configuration into logical groups
  • Autoloading

​

Result = A good workflow for working with fields

22 of 46

Moving on to

[shortcodes]

23 of 46

Shortcodes

What do we want?

  • Separate shortcodes into portable �packages.
  • Handle dependencies (CSS, Javascript, Images, PHP libraries)
  • Internationalization
  • Autoloading

24 of 46

A typical shortcode

  • Main shortcode logic
  • Templates
  • Resources�CSS (Regular + Responsive)�JavaScript�Images
  • Dependencies

25 of 46

Custom Shortcodes plugin

26 of 46

Custom Shortcodes plugin

27 of 46

A typical shortcode

28 of 46

A typical shortcode - CSS

+ media queries in separate file

29 of 46

Custom Shortcodes plugin

  • More autoloaders!

Load libraries on plugins_loaded�Load shortcodes on after_setup_theme

Load CSS/JS on wp_enqueue_scripts

​

​

30 of 46

Shortcodes

What did we accomplish?

  • Separate shortcodes into portable �packages.
  • Handle dependencies (CSS, Javascript, Images, PHP libraries)
  • Internationalization
  • Autoloading

31 of 46

32 of 46

Performance

  • OpCode cache solves issues with including files
  • MinQueue integration lets us concatenate all CSS and JS into one file.

http://wordpress.org/plugins/minqueue/

33 of 46

Let’s talk

user experience

34 of 46

Visual Content Builders

  • More user friendly than shortcodes
  • Enhance content publisher flexibility
  • Each shortcode becomes a “block” in the visual editor

35 of 46

Before and after

36 of 46

Demo

view gif

37 of 46

Integrating a shortcode is easy!

Documentation of parameters available at:

http://kb.wpbakery.com/index.php?title=Vc_map

From regular shortcode to Visual Composer block in a few rows of code!

38 of 46

Integrating a shortcode is easy!

But where do we put this code?

39 of 46

Our shortcode plugin!

  • Since Visual Composer is based around shortcodes, let’s use our Shortcodes plugin for this.

40 of 46

Thought process

  • Data that belongs to our custom post type is stored in custom fields on the custom post type.
  • Data that controls how blocks are displayed on the frontend is put into the block configuration.

41 of 46

Case Study

42 of 46

IDG Event Sites

  • Unify event site creation into a single platform
  • Enable full flexibility for content publishers
  • Enable easy maintenance

​

​

43 of 46

End results

  • 3 custom post types
  • 12 custom field groups
  • 21 shortcodes
  • Completely block-based

​

​

44 of 46

Demo!

http://computersweden.event.idg.se

​

45 of 46

Open source!

  • Source code for CPT, Custom Fields and Shortcodes loader plugins available on GitHub with examples from this talk!�

https://github.com/khromov/wp-custom-cpt

https://github.com/khromov/wp-custom-fields

https://github.com/khromov/wp-custom-shortcodes

​

​

​

​

46 of 46

Thank you!

Questions?