Modular functionality

Organizing your code to make

WordPress development easier

markweb.ch                  @mhmli

Mark Howells-Mead

Organism

Molecule

Atom

<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;
}

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>

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

New core features

Specific additional functionality

Independently managed

Deploy when complete

Custom Post Type

Grid Layout

Post Location as Google Map

 

plugins/mhm_photos

– mhm_photos.js

– mhm_photos.css

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

“Backend”

WordPress

Content administration

“FRONTEND”

(“Head”)

React, iOS, Android

“Headless cms”

REST API

Google Search Console

Identify the organisms

Make a container

Add the organisms to it

Reuse code if you can

Functionality in Plugins

Mark Howells-Mead

markweb.ch    @mhmli

In Summary

Made with Slides.com