André Amorim

Crafting Web Experiences

//

Layout System for WordPress Theming

functions.php:

function fx_layout( $layout_name, $layout_content, $layout_type ) {
	require get_template_directory() . "/layouts/$layout_name.php";
}

Default Layout File(layouts/default.php):

get_header();

<div id="layout-<?php echo esc_attr( $layout_name ); ?>">
	 $layout_content(); 
</div>

get_footer();

Usage on any WordPress Theme File (e.g. 404.php):

fx_layout( 'default', function() {

<div id="page-404" class="container items-center px-8 mx-auto text-center">
	<h1 class="text-404">404</h1>
	<p class="text-gray-600"><?php esc_html_e( 'Unfortunately, we could not find the page you are looking for.', 'flex' ); ?></p>

</div>
	<?php
});

Published date:

Modified date: