Create Custom Page Layout

Though Volatyl comes with seven built-in column configurations and hooked liners, that’s not enough to make your site truly unique. You’ll have to handle that part.

Volatyl makes the job easy, though, with the Custom Layout template.

Create Custom Layout Page

To create a custom layout, you will need to add a new Page to use as a frame for your layout.

On the Edit Page screen, find the “Page Attributes” section and select “Custom Layout” from the Template drop-down selection menu.

Volatyl Custom Page Layout

With that option selected, give your new Page a title and publish the page.

When the Page saves, you will be given a URL (permalink) to your Page just below the title field. What you need to do is get the “Post ID” of this page. You will need it for your custom layout.

To get this, hover over the “Edit” button located right next to your permalink. When you do so, somewhere on your modern browser will display the URL destination of the link you are hovering over.

It will look something like this:

http://example.com/wp-admin/post.php?post=165&action=edit&mes…

The Post ID you are looking for is highlighted in red above. The numbers directly after “post=” are what you need… nothing more… nothing less.

Create Custom Layout

Now that your Page is saved and you have the Post ID, your blank canvas for creating a custom layout is ready for use.

If you visit your new page, all you will see is the content that displays above your content and below your content. This includes the header and footer, the Standard Menu and Footer Menu (if they are activated).

What you have to work with is anything inside of that content. To add content to this area, you will need to use PHP.

Do not do this in the functions.php file of Volatyl itself! All style and function customizations need to be done in a child theme. Learn more about child themes.

In the functions.php file of your child theme, you will need to add your HTML to a special hook designed to display custom layouts: main_content_custom_layout()

To do this, add the following code to your functions.php file just above the closing ?> tag if you have one. If not, place it at the very bottom of the file:

// Custom layout
function custom_page_layout_1() {
	if ( is_page( 165 ) ) { ?>
		<!-- Your HTML goes here. -->
	<?php }
}
add_action( 'main_content_custom_layout', 'custom_page_layout_1' );

This is a very simple chunk of code. All we are doing here is adding a function to a hook and within that function, we have our custom content.

Let’s break things down even more, though.

The first line is simply a comment. A line that begins with // is ignored in PHP but visible to you as notes. Moving on…

function custom_page_layout_1() {

This is where we name our function. It is important to understand that function names cannot be repeated! Make this name unique. Use it once here and don’t ever use it again. Once the function name is created, we end this line with an opening bracket: {

	if ( is_page( 165 ) ) { ?>

Here, we have a conditional. What we’re doing is saying to the server, “If the webpage we are viewing is a WordPress page, and its Post ID is ‘165’, do something…” What we are telling it to do is what follows.

This line ends with another opening bracket { and a closing PHP tag ?> (describe below).

	<!-- Your HTML goes here. -->

This is where your HTML goes. However, it is important to note that HTML and PHP cannot mix. PHP must be “stopped” before HTML can start. Likewise, PHP must be started before it can be written again.

The PHP was stopped at the end of the conditional line with ?> as mentioned above. So, you’re free to write as much HTML as you’d like here.

Once your HTML is completed, you need to start the PHP again with <?php. That is the first thing in the next line of our code:

	<?php }

Simple, right? Not only did we start the PHP again, we also closed the conditional with a closing bracket }.

}

This last closing bracket closes out our function. Here’s a full look at the function itself:

function custom_page_layout_1() {
	if ( is_page( 165 ) ) { ?>
		<!-- Your HTML goes here. -->
	<?php }
}

Broken down line by line, it’s not very hard to understand. However, this function means nothing as it stands. It now has to be added to your custom layout so it will display on your Page.

add_action( 'main_content_custom_layout', 'custom_page_layout_1' );

This add_action takes a few different parameters but we will only use two of them.

Plain and simple, the first parameter says what hook we’re adding content to. Again, that’s main_content_custom_layout.

The second parameter says what we’re adding to that hook… which is our function custom_page_layout_1.

The name of the function in the above line must match the name of the function exactly. PHP is case sensitive so there is absolutely no room to wiggle. Make sure they match… period.

With the full code placed properly in the functions.php file of your child theme, your new Page will display anything you’ve placed in the HTML area of the code.

Consider tapping into the Volatyl HTML structure with Liners.

Happy coding! 🙂

Return to docs