Development Workflow

Alloy Core is great at providing the tools you need to integrate website designs into WordPress. It's usually best to turn the designs you're given into HTML/CSS first and then integrate them into your WordPress theme.

Let's say you're going to integrate the "About" page.

Create your PHP file

In your theme's root directory create a file called template-about.php and set up your class:

<?php
class Template_About extends Core_Template {

}
global $post;
new Template_About( $post->ID );

Create your Twig template file

In the views directory of your theme create a file called template-about.twig:

{% extends "base.twig" %}
{% block content %}

{% endblock %}

Set up your custom fields

In the app/custom-fields directory create a file called template-about.acf.php:

<?php

$group_args = [
	'title'          => 'About Page Options',
	'location_is'    => [ 'page_template', 'template-about.php' ],
	'hide_on_screen' => [ 'the_content' ]
];

$fields = [
	
];

$field_group = core_register_field_group( 'about-acf', $group_args, $fields );

Be sure to set your field group arguments and give core_register_field_group's first parameter a unique key.

What's Next

Now that you have set up your template files for the about page you can begin to integrate the design. Let's say you have a basic "hero" introduction section that has a heading, a sub heading, a paragraph and a background image. Let's get to work.

Add your fields

Whenever you're integrating a client website you want to give them maximum flexibility so each line of content should be given a field for them to manage. Let's add our hero section fields to app/custom-fields/template-about.acf.php:

<?php

$group_args = [
	'title'          => 'About Page Options',
	'location_is'    => [ 'page_template', 'template-about.php' ],
	'hide_on_screen' => [ 'the_content' ]
];

$fields = [
	
	[ 'tab', 'Hero', [ 'placement' => 'left' ] ],

	[ 'text', 'Heading', [ 'name' => 'hero_heading' ] ],
	[ 'text', 'Sub Heading', [ 'name' => 'hero_sub_heading' ] ],
	[ 'textarea', 'Description', [ 'name' => 'hero_description' ] ],
	[ 'image', 'Background Image', [
		'name' => 'hero_background_image',
		'return_format' => 'url',
		'instructions' => 'Dimensions: 1300x400. Recommended format: JPG'
	] ]
	
];

$field_group = core_register_field_group( 'about-acf', $group_args, $fields );

You can see here we started the hero section with a tab. This way when you add the other about page sections you can organize those fields into their own tabs. You'll also see we defined a "name" for each field. This way there aren't any conflicts. For an about page you might have a "hero heading" and then if you have a team section you'd have a "heading" for that as well. Having two fields with the name "heading" would cause issues.