I'd like to know how can I have a different page template from the default homepage I have created. Basically, I would want to have as page layout:
Homepage Template
- Full width
- Menu on top RHS (right-hand side)
- When I scroll down menu gets sticky
- Hero banner with main logo (taller)
- Rows of content
Subpage Template
- Full width
- Menu on top RHS (right-hand side)
- When I scroll down menu gets sticky
- Hero banner with page title (smaller)
- Rows of content
Blog Template
- a different layout
I tried creating home.php, subpage.php and blog.php. How do I implement these templates as soon as I created subpages and blog page? I don't see any metabox inside Edit Page for template selection.
Please advise. Thank you.
Hi Tyronne and welcome to the community 🙂
You can add custom template by adding a PHP file in your child theme. Make sure it the file name isn't any of the WP template files name such home.php. In your template file, you can declare it with a PHP comment with Template Name. Your template file before you add any modifications would look like this:
<?php
/* Template Name: Example Custom Template */
// Always add this function at the bottom of template file.
beans_load_document();Note how beans_load_document() has to be added right at the bottom of the page after all the changes you would make on your template.
Happy coding,
@Tyronne
I've been diving into much the same thing, less the design elements, more particularly exploring page templates and modifying markup. After spending a hell of a lot of time figuring a bunch of things out 🙂 I found out that there's good reason to figure out ahead of time what structure and what elements templates will carry.
I ended up putting changes which apply to all pages in a seperate file, included on the functions.php. This made it easier to tackle changes to things like header, navigation, footer - as well as adding things like a cta or widget bar used across pages. While still allowing for providing individual page templates with specific design and/or functionalities.
- https://github.com/jcmrs/mk-blue/blob/master/assets/helpers/cleaner.php
- https://github.com/jcmrs/mk-blue/blob/master/assets/helpers/shared.php
- https://github.com/jcmrs/mk-blue/blob/master/assets/helpers/testing.php
In functions.php:
// Little helpers
require_once( get_stylesheet_directory() . '/assets/helpers/cleaner.php' );
require_once( get_stylesheet_directory() . '/assets/helpers/testing.php' );
require_once( get_stylesheet_directory() . '/assets/helpers/shared.php' );This way I can extend the site as such, while I can - for example - add a header bar to a specific template, without stumbling over cluttered php files. For example:
<?php
/* Template name: Test Header Bar */
add_action( 'beans_uikit_enqueue_scripts', 'beans_child_enqueue_uikit_assets' );
function beans_child_enqueue_uikit_assets() {
beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );
}
// UIKit Components.
add_action( 'beans_uikit_enqueue_scripts', 'mk_test_header_bar_complete' );
function mk_test_header_bar_complete() {
beans_uikit_enqueue_components( true );
beans_uikit_enqueue_components( true, 'add-ons' );
}
// Add Header Bar
beans_remove_action( 'beans_site_title_tag' );
add_action( 'beans_header_before_markup', 'blue_header_bar' );
function blue_header_bar() {
?>
<div class="blue-header-bar uk-block-muted">
<div class="uk-container uk-container-center uk-text-justify">
<div class="uk-grid uk-contrast" data-uk-grid-match data-uk-margin>
<div class="uk-width-large-1-2 uk-width-medium-1-1 uk-text-left uk-text-middle uk-text-center-medium uk-text-center-small uk-hidden-medium uk-hidden-small">
<?php beans_site_title_tag(); ?>
</div>
<div class="uk-width-large-1-2 uk-width-medium-1-1 uk-text-right uk-text-middle uk-text-center-medium uk-text-center-small">
<a href="#"><i class="uk-icon-map-marker"></i> Locaties</a> <a href="mailto:info@mail.net"><i class="uk-icon-envelope"></i> info @ mail.net</a> <a href="tel:1-562-867-5309"><i class="uk-icon-phone-square"></i> 562-867-5309</a>
</div>
</div>
</div>
</div>
<?php
}
// Load document which is always needed at the bottom of template files.
beans_load_document();I'm cheating a little bit there, by loading all UIKit components - but it can come in handy when figuring things out. Alternatively, work out in advance how you want to do what, and only load per template what is necessary.
Also, something I picked up from Thierry's Typography template, you can use these methods also to work out markup & elements before diving off a proverbial cliff. Example:
<?php
/* Template name: Test Details */
add_action( 'beans_uikit_enqueue_scripts', 'beans_child_enqueue_uikit_assets' );
function beans_child_enqueue_uikit_assets() {
beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );
}
// UIKit Components.
add_action( 'beans_uikit_enqueue_scripts', 'mk_test_details_complete' );
function mk_test_details_complete() {
beans_uikit_enqueue_components( true );
beans_uikit_enqueue_components( true, 'add-ons' );
}
// Remove comment and content div for test page.
beans_remove_action( 'beans_comments_template' );
beans_remove_markup( 'beans_post_content' );
// Remove layout control to force full-width.
add_filter( 'beans_layout', '__return_false' );
// Append demo content.
add_action( 'beans_post_body_before_markup', 'test_details' );
function test_details() {
?>
<div class="uk-container uk-container-center">
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-large-1-3">
<div class="uk-panel uk-panel-box">
<h1><span class="uk-text-primary">Blue</span>Beans</h1>
<p>Lorem ipsum reversus ab viral inferno, nam rick grimes malum cerebro quaeritis.</p>
<div class="uk-grid" data-uk-margin="{cls:'uk-margin-top'}">
<div class="uk-width-2-10">
<i class="uk-icon-map-marker"></i>
</div>
<div class="uk-width-8-10">
Street 42<br>
0182 AA City
</div>
<div class="uk-width-2-10">
<i class="uk-icon-phone"></i>
</div>
<div class="uk-width-8-10">
+47 (22) 123 456
</div>
<div class="uk-width-2-10">
<i class="uk-icon-envelope-o"></i>
</div>
<div class="uk-width-8-10">
<a href="mailto:email@company.com">email@company.com</a>
</div>
</div>
</div>
</div>
<div class="uk-width-large-2-3">
<div class="uk-grid" data-uk-grid-match>
<div class="uk-width-small-1-2 uk-width-medium-1-3">
<div class="uk-panel uk-panel-space uk-text-center-small">
<p class="uk-text-uppercase">Shopping guide</p>
<ul class="uk-list">
<li><a href="#">FAQ's</a></li>
<li><a href="#">Payment</a></li>
<li><a href="#">Shipping</a></li>
</ul>
</div>
</div>
<div class="uk-width-small-1-2 uk-width-medium-1-3">
<div class="uk-panel uk-panel-space uk-text-center-small">
<p class="uk-text-uppercase">Company</p>
<ul class="uk-list uk-panel-space">
<li><a href="#">About Us</a></li>
<li><a href="#">Store Locator</a></li>
<li><a href="#">Work with Us</a></li>
<li><a href="#">Franchise</a></li>
</ul>
</div>
</div>
<div class="uk-width-small-1-2 uk-width-medium-1-3">
<div class="uk-panel uk-panel-space uk-text-center-small">
<p class="uk-text-uppercase">Help</p>
<ul class="uk-list">
<li><a href="#">Fashion Finder</a></li>
<li><a href="#">Track Order</a></li>
</ul>
</div>
</div>
<div class="uk-width-small-1-2 uk-width-medium-1-3">
<div class="uk-panel uk-panel-space uk-text-center-small">
<p class="uk-text-uppercase">General</p>
<ul class="uk-list uk-panel-space">
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Privacy & Cookies</a></li>
<li><a href="#">Store directory</a></li>
</ul>
</div>
</div>
<div class="uk-width-small-1-2 uk-width-medium-1-3">
<div class="uk-panel uk-panel-space uk-text-center-small">
<p class="uk-text-uppercase">Follow Us</p>
<ul class="uk-list">
<li data-uk-margin>
<a href="#" class="uk-icon-button uk-icon-github"></a>
<a href="#" class="uk-icon-button uk-icon-github"></a>
<a href="#" class="uk-icon-button uk-icon-github"></a>
</li>
</ul>
</div>
</div>
<div class="uk-width-small-1-2 uk-width-medium-1-3">
<div class="uk-panel uk-panel-space uk-text-center-small">
<p class="uk-text-uppercase">Payment</p>
<ul class="uk-list uk-margin-remove">
<li>
<a href="#"><i class="uk-icon-cc-mastercard uk-text-large"></i></a>
<a href="#"><i class="uk-icon-cc-visa uk-text-large"></i></a>
<a href="#"><i class="uk-icon-cc-amex uk-text-large"></i></a>
<a href="#"><i class="uk-icon-cc-paypal uk-text-large"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
// Load document which is always needed at the bottom of template files.
beans_load_document();In a nutshell, you can work out both a design and code focus and easily test it. In your WP Admin UI just create a blank page for each test template and assign the template to it.
Thank you so much for your response @Thierry and @J.C. It is quite fantastic to know that anyone who needs help (especially beginners and explorers of Beans) can get to know answers from fantastic people like you two. Awesome!
I have been reading discussions for quite some time now and I think this is one of the answers I have been looking for
In your WP Admin UI just create a blank page for each test template and assign the template to it.
I will try this and let you know how it goes. Thanks a bunch!
Glad to be able to help, I'm a beginner myself 😛
As for the routine, it's pretty straightforward:
create a test page template (example: test-cta.php)
start it off with the code Thierry provided
<?php
/* Template Name: Test CTA Template */
// begin your modifications
// end your modifications
// Always add this function at the bottom of template file.
beans_load_document();in WP Admin, create a blank page, give it an identifiable name, and set the template for it
One tip: you really have to make sure to come up with a manageable scheme/format to name your functions. It is very easy to end up with a duplicate, or a conflict. Which results in a boatload of errors across a page, and then you have to figure out which line where 😛
I give my functions, as well as classes, a name tied to an ID and the theme name/abbreviation, since Beans is so flexible you can add further identifiers to that, like whether it is a template specific thing or general. For example:
// helpers/shared.php
// Add Back to Top.
add_action( 'beans_body_prepend_markup', 'mk_blue_shared_top_anchor' );
function mk_blue_shared_top_anchor() {
?><div id="blue-top"></div><?php
}// test-ContactPage.php
// Add Back to Top Bar.
add_action( 'beans_post_content_after_markup', 'mk_blue_contactpage_top_bar' );
function mk_blue_contactpage_top_bar() {
?>
<div class="uk-width-large-1-1 uk-width-medium-1-1 uk-text-middle uk-text-center uk-text-center-small uk-text-break uk-margin-large">
<a href="#blue-top" class="uk-button uk-button-primary uk-button-large uk-width-1-1 uk-margin-small-bottom" title="Terug naar boven" data-uk-smooth-scroll><i class="uk-icon-arrow-up"></i></a>
</div>
<?php
}Now with classes / css, I'm still working out what the better practices are. Mostly because I've started to lean towards using Less, as opposed to CSS. Less is CSS, but with more flexibility for creating reusable elements and references. So you can have a variables.less where you define not just the UIKit stuff, but also theme specific elements like adding a large icon type:
/* Icon modification (large)
========================================================================== */
@mk-icon-large-width: 60px;
@mk-icon-large-height: @uk-icon-large-width;
@mk-icon-large-border: @global-color;
@mk-icon-large-border-width: 2px;
@mk-icon-large-border-radius: 100%;
@mk-icon-large-background: rgba(0,0,0,0);
@mk-icon-large-font-size: round((@uk-icon-large-width * 0.5));
@mk-icon-large-color: @global-primary-color;Or when it is easier coming at things from an html/css direction, prior to getting a feel for Beans, it can be easier to work in positioning / snap design variables with Less. For example:
/* Positions modification
========================================================================== */
.uk-position:not(.uk-position-padding-remove) { padding: @uk-position-padding-vertical 0; }
.uk-position-default:not(.uk-position-padding-remove) + .uk-position-default:not(.uk-position-divider),
.uk-position-primary:not(.uk-position-padding-remove) + .uk-position-primary:not(.uk-position-divider) { padding-top: 0; }
.uk-position-divider {
padding-top: @uk-position-padding-vertical;
border-top: @global-border-width solid @global-border;
}
.uk-position-title {
padding: @uk-position-title-padding-vertical 0;
background: @uk-position-title-background;
}
.uk-position-default { background: @uk-position-default-background; }
.uk-position-primary { background: @uk-position-primary-background; }
.uk-position-full {
.uk-container {
max-width: none;
padding: 0;
}
}
@media (min-width: @breakpoint-large) {
.uk-position-title { padding: @uk-position-title-large-padding-vertical 0; }
.uk-position:not(.uk-position-padding-remove) { padding: @uk-position-large-padding-vertical 0; }
.uk-position-divider { padding-top: @uk-position-large-padding-vertical; }
}I'm not sure yet though how to keep things as simple as with functions and markup, mostly because I'm still figuring out how to create my own UIKit theme and compiling it so that I can use just that within the child theme. Last week I hadn't even heard of weird things like gulp or node 😛
If I can give one bit of advice, in case it isn't something you already do, learn the basics of using github. Coming to terms with Beans is a puzzle, which gets a lot easier if you can just go back & forward between steps you take, keep track of changes, save snippets and such, all in one go.
@J.C. Meijers Thanks and I am really learning a lot from you and the community.
@tyrrone-camp I am really happy to hear that you are learning and that we are able to help you becoming a better developer, fantastic 🙂
Have fun,
Hi J.C. Meijers, Thanks for your very useful cleaner.php. Your functions.php must be really tidy I suppose! Is it possible to add a "remove layout" for some of the default layouts to the cleaner? How?
Hi Lore, is it correct to say that you would like to remove some of Beans layouts from the admin options (screenshot)? If yes, could you advise which one you would like to remove so that I can advise you on that 🙂
Thanks,
Hello, yes, removing some Beans layouts from the admin options is what I was trying to do.
My question was more in general to understand how things work (didn't start a real beans project yet)
Let's say I want to get rid of "Content | Sidebar Primary | Sidebar Secondary" and "Sidebar Primary | Content | Sidebar Secondary".
Thaks in advance
Hi Lore,
To do so, you can use the beans_layouts filter and unset the unwanted layouts from the array. Here is the code snippet you may add to your child theme functions.php to remove the two layouts you mentioned;
add_filter( 'beans_layouts', 'example_modify_layouts' );
function example_modify_layouts( $layouts ) {
unset( $layouts['c_sp_ss'], $layouts['sp_c_ss'] );
return $layouts;
}Happy coding,