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
/** 
* Template Name: About Template 
**/
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.

As a nice to have we also added instructions to the image field letting the user know the relative dimensions they should follow and what format the image should be in.

Loading Data

Now that you have your fields registered you can load them to the Twig template through our PHP file. Open template-about.php and create a method in the class called hero:

<?php
class Template_About extends Core_Template {

	public function hero() {

		return core_get_fields( $this->obj_id, 'hero_', array(
			'heading',
			'sub_heading',
			'description',
			'background_image'
		) );

	}

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

You can see we utilized the core_get_fields function to grab the fields we registered. The prefix parameter lets you leave it out from defining the fields this way you wouldn't have to type "hero_heading", "hero_sub_heading", etc. It also cleans up the variable call in the template so it'd be like {{hero.heading}}. Now that we're grabbing the data from our fields we can add the HTML to our Twig template.

Adding the markup

Copy the HTML section we are adding from your markup and paste it into views/template-about.twig. It'll probably look something like this:

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

	<section class="hero">
		<span>Learn About</span>
		<h1>Our Company</h1>
		<p>Founded in 1971, Company Works prides itself on strong values and teamwork.</p>
	</section>

{% endblock %}

All we have to do is hook up the data we are passing to Twig. ( Don't forget to create a page in WordPress and set the template to "About Template" and fill out all of these fields so they show up when we view it. )

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

	<section class="hero" style="background-image: url({{hero.background_image}}">
		<span>{{hero.sub_heading}}</span>
		<h1>{{hero.heading}}</h1>
		<p>{{hero.description}}</p>
	</section>

{% endblock %}

As you can see all we had to do was replace the content with Twig variables! Next we would just keep going section by section until the about page was completely integrated. You'd just add another group of fields, another method in the PHP class, and then the HTML into the Twig file.