Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordCamp Bristol 2019 - WordPress custom theme building

641 views

Published on

An overview of how we build custom, bespoke WordPress themes - from techniques to file structures and automation - this is an insight into how we develop (profitable!) bespoke custom WordPress themes.

Published in: Internet
  • Be the first to comment

WordCamp Bristol 2019 - WordPress custom theme building

  1. 1. Jonny Allbut / Head of Digital Custom theme building structures & techniques to save your sanity!
  2. 2. Handover and assets • Work with your creative - you’re a team! • Establish scope of front-end early • Keep on-board as project evolves • Don’t start coding until creative all signed off • Colour palettes & image/vector assets • Image sizes @wearewider wider.co.uk
  3. 3. Colour palette @wearewider wider.co.uk #1580ba RGB: 21/128/186 .col-tertiary-3 #2f505a RGB: 47/80/90 .col-secondary-dark #0b97ae RGB: 11/151/174 .col-secondary-mid #6fe5e9 RGB: 111/229/233 .col-secondary #738a8d RGB: 115/138/141 .col-primary-light #31b7bc RGB: 49/183/188 .col-primary-dark #63ceca RGB: 99/206/202 .col-primary Tymly Web Colour Palette v1.3 #e4e4e4 RGB: 228/228/228 .col-mid #fff RGB: 255/255/255 .col-lightest #f1f1f1 RGB: 241/241/241 .col-light #323232 RGB: 50/50/50 .col-dark #000 RGB: 0/0/0 .col-darkest
  4. 4. How we build sites • Theme framework (parent theme) with child theme • Supporting bespoke plugins • EXTREMELY limited 3rd party plugins • Carefully selected applicable third-party JS • Our own front-end JS UI library • Our own ‘theme toolbox’ plugin: • Navigation • Content output and formatting • Taxonomy • Navigation/menus @wearewider wider.co.uk
  5. 5. Initialising the project • Alfred for automation • Checklist built into starter stack • Text strings to replace • Initial graphics to generate • Notes on initial setup • Pitfalls and other tasks not to forget • Go-live checklist @wearewider wider.co.uk
  6. 6. TIP: Keeping it local add_action( 'after_setup_theme', 'mywfx_environment', 1 ); function mywfx_environment() { $live = array( 'https://wider-vanilla2.com', 'https://approval.wider.co.uk/vanilla2' ); $this_env = get_home_url( 1 ); $this_env = ( in_array( $this_env, $live ) ) ? 'live' : 'dev'; define( 'MY_WFX_ENV', $this_env ); } @wearewider wider.co.uk
  7. 7. Graphic assets • Version control editable asset files (really!) • Nucleo custom web fonts + our own override CSS • CSS to the rescue! • Version strings break cache:
 $theme_v = wp_get_theme()->get( 'Version' ); @wearewider wider.co.uk
  8. 8. TIP: Custom image sizes for editors add_filter( 'image_size_names_choose', ‘mywfx_editor_custom_images' ); function mywfx_editor_custom_images( $args ) { $exclude = array( 'portrait-med-tn', 'landscape-tiny' ); $images = array(); global $_wp_additional_image_sizes; if ( !empty($_wp_additional_image_sizes) ) { foreach ( $_wp_additional_image_sizes as $key => $value ) { if ( !in_array($key,$exclude) ) { $images[ $key ] = ucwords( str_replace( '-', ' ', $key ) ); } } return array_merge( $args, $images ); } } @wearewider wider.co.uk
  9. 9. File structure @wearewider wider.co.uk assets acf blocks config css editable-assets favicons fonts forms images js functions admin functions-data.php functions-head.php functions-media.php functions-navigation.php functions-query.php functions-scripts.php functions-supporting.php functions-template-parts.php functions-wp-config.php functions-third-party.php functions-wonderflux.php assets functions parts footer-content.php functions.php header-content.php loop-content-archive.php loop-content-archive-news.php loop-content-no-search-results.php loop-content.php sidebar-content.php screenshot.png style.css checklist.txt theme
  10. 10. Configuration files @wearewider wider.co.uk theme > assets > config colour-palettes.php contacts.php plugin-config.php post-types.php taxonomies.php
  11. 11. Template parts @wearewider wider.co.uk part-content-posts-latest.php part-content-service-funnels.php part-content-side-image.php part-content-standard.php part-content-video.php part-footer-contact-leads.php part-nav-primary.php part-nav-secondary.php theme > parts part-archive-filters.php part-content-accordions.php part-content-bg-img-feature.php part-content-contact-leads.php part-content-form.php part-content-image.php part-content-map.php part-content-carousel.php part-content-multi-column.php
  12. 12. Main functions @wearewider wider.co.uk theme > functions functions-scripts.php functions-supporting.php functions-template-parts.php functions-theme-config.php functions-third-party.php functions-wonderflux.php admin functions-data.php functions-head.php functions-media.php functions-menus.php functions-query.php
  13. 13. Admin functions @wearewider wider.co.uk theme > functions > admin functions-admin-bar-menu.php functions-admin.php functions-content-saving.php functions-text-support.php functions-wp-admin-lists.php functions-wp-editor.php functions-wp-user.php
  14. 14. TIP: Escaping more complex content wp_kses( $text, wfx_allowed_simple_tags( ‘text’ ) )
 $arr = array ( 'span' => array( 'class'=>array(), ‘id'=>array() ), 'br' => array() ); • wp_kses_post( $data ) • wp_kses_post_deep( $data ) • wp_filter_nohtml_kses( $data ) @wearewider wider.co.uk
  15. 15. Outputting content • Build output at top of file, keep output section clean • Consider building an output array • Escape EVERYTHING… never trust any user content! • Escape output at latest point possible • Use built-in output functions like: • esc_html() • esc_attr() • Remember _e variants too - esc_html_e() @wearewider wider.co.uk
  16. 16. TIP: Output array example $query_args = array( ‘post_type' => strtolower( $type ), ‘posts_per_page' => 4, ‘orderby' => 'date' ); $output = array(); $the_query = new WP_Query( $query_args ); if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); $this_id = get_the_ID(); $output[$this_id][‘terms'] = mywfx_get_all_terms( $this_id, 'news-topic', false ); $output[$this_id]['image'] = wfx_get_image( ‘id=img_archive&size=archive&field=post_meta’ ); $output[$this_id]['title'] = get_the_title(); $output[$this_id]['excerpt'] = wfx_excerpt( 'limit=17&excerpt_end=...&echo=N' ); $output[$this_id]['link'] = get_the_permalink(); $output[$this_id]['date'] = mywfx_clean_date_output( get_the_date(), ‘date_short' ); endwhile; endif; wp_reset_postdata(); @wearewider wider.co.uk
  17. 17. Avoiding pitfalls • Don’t repeat yourself (DRY) • Don’t over-engineer • Don’t re-invent the wheel, does WordPress do it already? • Have a great debug function - see wfx_debug() • Don’t be scared of space - write legible code! • Refactor as you go, or mark as todo task • Test early, test often • Be conscious of optimisation, but leave mostly until end • Have 2 or more monitors… have a ‘crap’ colour setting! @wearewider wider.co.uk
  18. 18. Our Tools of the trade • Development • MampPro for local server • Espresso for editing CSS • Nucleo for icon font generation (Fontello wasn’t bad either!) • Sublime/Atom for coding • Sequel Pro for MySQL databases • Supporting • Alfred for automation • Tower for Version control/GIT • DeployHQ for auto-deployment to dev and live servers • Testing • Browser Stack for testing 
 different browsers • WAVE and Siteimprove for accessibility checks • Web Developer for various tasks (validation/colour checks/turning off JS/CSS etc) • Optimisation • Codekit for minification/checking • ImageOptim for image compression @wearewider wider.co.uk
  19. 19. wider-co.uk / @wearewider Custom theme building structures & techniques to save your sanity!

×