Visual Design & Front-end Development
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
01 Programma
Visual Design & Front-end Development
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Visual Design
For this particular project, and what I recommend you to take advantage of also, I simply re-created various components used throughout the site and added them to this page builder layout. So I have a slider, hero sections with large background images, a section with an image on the left and text on the right & vice versa, a single column with a WYSIWYG editor, 2 columns with WYSIWYG editors etc. I essentially just take various sections and components used throughout the site and add them here so the client can then customize them to their liking. I typically don’t even have to create anything new, I simply just re-use the code I have already written throughout the site, by selecting sections/components I think the client would like to use in future pages.
Front-end Development is a joke
Per the Timber Docs I open up a loop and am looping through the ‘content’ field. This is the name of my Flexible Layout field I just created with ACF. I am taking advantage of the Twig templating engine and have each of my components in their own respective files and use Twig’s {% include %} functionality to include each component. Just look at how clean this looks compared to a typical WP theme 😍.
02 Werkwijze
Jouw leerprocess staat centraal
Your client can easily drag and drop and re-order these components however they like. They can easily add additional components, delete them etc. They can use a variety of configurations to custom build pages to their liking! Plus, as a bonus, since we have created these components for them, they are virtually guaranteed to always look good. I say ‘virtually’ because you know your client is going to copy and paste some copy from Microsoft Word into the WYSIWYG editor and the formatting and style is going to be all jacked up. Not much you and I can do about that though, we warned them though didn’t we 💩
Schrijven over het proces
The official Theme Development Standards and Twenty themes promote fetching and displaying data in the same place. They don’t encourage separating core site functionality to a plugin. So what you usually end with are templates with cryptic loop constructs and gigantic functions.php file. In this tutorial, I’ll show you how you can make your themes cleaner by borrowing some development principles from the MVC (Model-View-Controller) pattern.
Werkblokken
Test are a developer, having made custom WP themes before, you can probably relate with me when I say that creating custom WP themes is not exactly the greatest developer experience. Let’s take a look at some code from the default ‘twentyseventeen’ theme that comes with every fresh install of WP
Blok 1: Lesweek 1 - 5
Leerdoel
Blok 2: Lesweek 6 - 10
Leerdoel
Blok 3: Lesweek 11 - 15
Leerdoel
Blok 14 Lesweek 16 - 20
Einddosier
Elke Werkblok
With the power of this feature and Timber, we now have the ability to allow our clients to create their own custom pages, using components or ‘blocks’ that we design & create for them. This allows the client immense flexibility, while at the same time ensures, for the most part 🤞, that every page they build with our custom page builder will look great, since we have already designed and developed all of the components available to them.
Een thema kiezen
Deliverables aanhangen
Blok uitwerken
Reflecteren