Client.Style
Client.Style
📓

Adding New Modules

Return to Client•Studio

Content Modules

💡
Modules are the building blocks of our websites. They work together with the Advanced Custom Fields plugin, which makes it particularly easy for clients to edit the contents of their sites. New block types are documented in each brief and can be found from the project folder.

Creating a Page

Within Wordpress, a new page is created by adding a page within the Pages folder. In this new page, with the custom fields plugin installed, options will be given to add pre-determined modules. For example, a page might have an image up top, followed by some text, then a series of info cards. These will have been created beforehand, and each one is linked to a module-**.php file in the template-parts/ folder.

To learn more, see Custom Fields.

Creating a Field Group

Field groups can be created inside the custom fields plugin. This can, for example, be a list of modules to be used throughout the site, called Modules. This can then be referenced at the top of page-modules.php as follows:

<?php if( have_rows('modules') ): while ( have_rows('modules') ) : the_row(); ?>
  // Content (see next section)
<?php endwhile; endif; ?>

Creating a Module

A field group can have any number of modules. These can be text boxes, radio buttons, images and more. Once these are created, they can be linked to the code in the page-modules.php file as follows:

<?php if( get_row_layout() == 'text' ): ?>
	<?php get_template_part( 'template-parts/module', 'text' ); ?>
<?php endif; ?>

This references a simple module called text. The file it uses, based on this syntax, will be module-text.php, inside the template-parts/ folder.

👉
New websites (post 2022) are using the wp block editor and modules are placed inside acf_blocks.php file.

Editing a Module

Modules are essentially a chunk of code placed within the DOM. They don't require <head> or <body> tags. A module file might look as follows:

<div class="relative">
	<article>
			<?php the_sub_field('text'); ?>
	</article>
</div>

The sub-field referenced here uses a name set up once again within custom fields. Because the wysiwyg editor exports the content with tags, there is no need here to specify any h1 or p tags.

If we wanted to add in an image field, we would follow the same steps by first creating the block within Custom Fields then adding it to the module as follows:

<img src="<?php the_sub_field('img'); ?>" />

Repeaters

Advanced Custom Fields allows for the creation of repeaters – or looped content. One can set up a template for images, for example, to be repeated inside a grid. This is what this would look like:

<div class="grid grid-cols-3">
	<?php if (have_rows("boxes")):
		while (have_rows("boxes")):
		the_row(); ?>
      <div>
			<?php $img = get_sub_field('image'); ?><?php if( $img ): ?>
         <img src="<?php echo $img['sizes']['large']; ?>" class="w-full h-full object-contain" />
         <?php endif; ?>
      </div>
		<?php endwhile;
	endif; ?>
</div>

Check more examples from our theme and /template-parts/ folder

Hero Headers

It is tempting to rely only on modules to create pages. Every post and page on Wordpress comes with a native text editor one might be keen to ignore. However, this might lead to issues with the site's SEO plugins.

When creating a Hero section for pages, we prefer to use the native text editor (and content()) for this very reason. See Queries & Loops for more info and examples.

Best Practices

  • Don't create too many modules – the template-parts/ folder must remain easy to navigate. Instead focus on creating versatile modules.
  • In a similar vein, be careful when naming modules. They should be easily recognizable from one another, with a name that indicates clearly what the module does.