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.

1. Jonny Allbut / Head of Digital
Custom theme building
structures & techniques
to save your sanity!

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. 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. 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. 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. 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. 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. 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. 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. Configuration files
@wearewider
wider.co.uk
theme > assets > config
colour-palettes.php
contacts.php
plugin-config.php
post-types.php
taxonomies.php

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. 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. 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. 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. 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. 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. 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. 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. wider-co.uk / @wearewider
Custom theme building
structures & techniques
to save your sanity!