Modular functionality
Organizing your code to make
WordPress development easier
markweb.ch @mhmli
Mark Howells-Mead
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3234049/5233033066_2a7ea9bd6a_b.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3234052/lego-brick-produce-a-very-dark-brick-ppVEuX-clipart.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3212447/atomic-design-process.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3230477/www.theguardian.com-international_Laptop_with_HiDPI_screen_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3230484/Screen_Shot_2016-11-14_at_23.45.17.png)
Organism
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3230484/Screen_Shot_2016-11-14_at_23.45.17.png)
Molecule
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3230484/Screen_Shot_2016-11-14_at_23.45.17.png)
Atom
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3234080/Facebook-ImageBlock.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3234080/Facebook-ImageBlock.png)
<div class="media">
<a href="http://twitter.com/stubbornella" class="img">
<img src="http://stubbornella.com/profile_image.jpg" alt="me" />
</a>
<div class="bd">
@Stubbornella 14 minutes ago
</div>
</div>
.media {
margin: 0 0 1rem;
}
.media, .bd {
@include clearfix;
}
.media .img {
float: left;
margin-right: 1rem;
}
.media .img img {
display: block;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3230505/pnc-buttons-2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3230558/Screen_Shot_2016-11-15_at_00.13.59.png)
github.com/guardian/frontend
.button { background-color: #fb0; color: #333; }
.button:hover { background-color: #e6a800; }
.button.button-secondary { background-color: #f1f1f1; }
.button.button-secondary:hover { background-color: #d8d8d8; }
<form name="comment-add">
…
<input type="submit" class="button" value="Become a supporter">
<input type="submit" class="button" value="Make a contribution">
<a href="…" class="button button-secondary">More features</a>
<a href="…" class="button button-secondary">Joe Biden</a>
…
</form>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3212412/wordpress.org-themes-_Laptop_with_HiDPI_screen_.png)
Template parts
content-post.php
get_template_part( 'content', 'post' );
Reusable in multiple templates
Overridable in Child Theme
Reusable in a second Theme
Templates
index.php
archive.php
page.php
page-home.php
CSS
basis.css
typography.css
org-home.css
org-list.css
org-single.css
org-comment.css
JavaScript
basis.js
jquery.fancybox.js
…
…
…
org-comments.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3212405/wordpress.org-plugins-_Laptop_with_HiDPI_screen_.png)
New core features
Specific additional functionality
Independently managed
Deploy when complete
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3212416/make.wordpress.org-core-features-as-plugins-_Laptop_with_HiDPI_screen_.png)
Custom Post Type
Grid Layout
Post Location as Google Map
plugins/mhm_photos
– mhm_photos.js
– mhm_photos.css
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3212433/Screen_Shot_2016-11-09_at_13.16.25.jpg)
T: theme2016
P: theme2016_acf_configuration
P: mhm_dataroom
P: mhm_faq
P: relevanssi, mhm_sitesearch
P: members
Theme: Posts/Pages
Custom Fields
FE document management
FAQ
Site search, incl. Custom fields
Access via user groups
P: mhm_auction
Auction
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3233918/wordpress-logo-simplified-rgb.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3212552/share-logo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3212556/Web-Browser.png)
“Backend”
WordPress
Content administration
“FRONTEND”
(“Head”)
React, iOS, Android
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3212560/img-iphone-app-store-64fcece5acccaa6ee1a6dbde641ac095.png)
“Headless cms”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3233798/Screen_Shot_2016-11-15_at_19.35.08.png)
REST API
Google Search Console
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3233918/wordpress-logo-simplified-rgb.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3233914/Logo_TYPO3.svg.png)
Identify the organisms
Make a container
Add the organisms to it
Reuse code if you can
Functionality in Plugins
Mark Howells-Mead
![](https://s3.amazonaws.com/media-p.slid.es/uploads/351759/images/3193273/apple-touch-icon-180x180.png)
markweb.ch @mhmli
In Summary
Modular functionality
By Mark Howells-Mead
Modular functionality
- 1,758