Client.Style
Client.Style
📓

Theme Structure

Return to Client•Studio

File Structure

💡
Once the theme is set up and running, the site's layout and appearance can be edited with a code editor. However, to keep things running smoothly with hundreds of sites, only handful of template files should be customised and are needed. Here’s the main ones that require customisations per project.

Modules

template-parts/ or modular/

This folder holds modules used with the custom fields plugin. They are, in essence, the building blocks of the site, which make it easier for edits to be made on the site. A module can include any number of specified elements, but content will generally be added via Wordpress.

Read more: Content Modules.

page-modules.php

Newly created modules should be inserted here as well, or in their corresponding module list, as specified within the custom fields plugin. This page acts as the link between Wordpress and the code blocks created in the previous template-parts/ folder.

Templates

Template order

New pages in Wordpress will attempt to find the best-fitting template by traversing the code in this order:

  1. front-page.php
  2. page-pagename.php
  3. page.php
  4. index.php (rarely used)

If clients are expected to create pages, it's preferable for them to use a page.php (default) file set up with a few simple queries, such as for the header, content (modules) and footer.

Learn more at wordpress.org

page-pagename.php

Pages should be created mainly via the custom fields plugin and modules. However, the content that goes around these elements can differ from one page to another. In these cases, a new template can be created. If the pagename here matches that of the page title in Wordpress, they will be automatically matched together.

If custom pages are added they should also be marked as new page templates which makes targeting ACF fields and is necessary for translation support. Make sure a new page template has header structure as following:

<?php
/*
Template Name: Text only
*/
get_header(); ?>

front-page.php

More often than not, the layout of the front-page will be more individual from that of other pages. Creating a specific template allows for the inclusion of more page-specific animations and styles for the homepage.

page.php

Used for any new page. Loads content modules by calling the

<?php get_template_part("page", "modules"); ?>

Styles & Scripts

resources/css/custom.css

Because this theme uses Tailwind, edits to stylesheets should be kept at a minimum. Instead, this file should focus on elements which are often repeated throughout the code, or with styling plugins.

For more information, see Tailwind.

resources/js/app.js

This is the site's main javascript file. Please remember to add comments to functions for easier browsing.

💡
Never ever add CSS styles directly to style.css or inline or elsewhere than the forementioned file. Loading separate files required by frameworks, webfonts etc is naturally ok.

Other Files

header.php + footer.php

These sections are typically inserted into every page. In this template, the header also holds the menu, both in its desktop and mobile form.

single.php

Single posts – such as blog posts – will often require a simpler layout than that of pages. Instead of relying on modules, these can usually be built using Wordpress' native content().

Larger sites using custom post types can have single-cptname.php templates as well dedicated for different custom post types.

archive.php

The archive loops through all the single posts automatically. For example, in order to display titles and contents of all single posts:

<?php if ( have_posts() ) : ?>
	<?php while ( have_posts() ) : the_post();	?>
		
		<?php the_title();?>
		<?php the_content(); ?>

	<?php endif; ?>
<?php endwhile; ?>

If using custom posts, add new archive-custompostname.php template if required (different layout from the normal blog)

💡
If a site has multiple different loops and queries we often add loop.php template to have all posts in similar formats. 
<?php if ( have_posts() ) : ?>
	<?php while ( have_posts() ) : the_post();	?>
		
		<?php get_template_part( 'loop' ); ?>

	<?php endif; ?>
<?php endwhile; ?>