In the members-only forum a user asked,
I've been trying to figure out how to have a home page with both a custom loop and widget areas. I want to use Advanced Custom Fields for several areas on the home page, to make it easier for my clients. I found code for doing that, but Iām not sure if I can also have widgetized areas on the page, which I'd need for using a couple of plugins.
In this tutorial I share a custom front page template in Genesis that displays
a) the content of Page set as static front page in WordPress settings
b) a widget area
c) several rows of (user specified number of) custom Text and Image layouts added in a Advanced Custom Field Pro's Flexible Content field.
Great tutorial thanks Sridharkatakam! Can you point be to how I might add additional Fields to the front-page.php file?
http://sridharkatakam.com/using-acf-pro-for-multiple-drag-n-drop-hero-text-image-and-image-text-sections-in-genesis/ is an example that you can study.
Thanks again! You’re timing is amazing.
Sridhar – another excellent tutorial – thank you.
I am trying to adapt this to use as a non home page template in Altitude Pro – I have renamed the ACF fields, page code and css to fwpage. I have the text rows showing up okay but cant get the image rows to display on the front end . I compared this with your other ACF Pro tutorial and am wondering if this page php code only works for front page images??
I also tested it with the home page code here and set it as a new front-page but it doesnt show the images on the – are there any extra lines of code required for Altitude Pro?
My new page template adapted from above
<?php
/**
* Front Page with full width sections.
*
* @author Sridhar Katakam
* @license GPL-2.0+
/*
Template Name: fwpage
*/
// Display header
get_header();
// Display Page Title and Content coming from WP editor
echo '’;
genesis_standard_loop();
echo ”;
// Display myfwpage Flexible Content
// check if the flexible content field has rows of data
if( have_rows(‘fwpage_flexible_content’) ) {
// loop through the rows of data
while ( have_rows(‘fwpage_flexible_content’) ) : the_row();
if( get_row_layout() == ‘fwpage_text_section’ ) {
echo ” . get_sub_field( ‘fwpage_text_section’ ) . ”;
} elseif( get_row_layout() == ‘fwpage_image_section’ ) {
$image = get_sub_field( ‘fwpage_image_section’ );
echo ”;
}
endwhile;
}
else {
// no layouts found
}
// Display Footer
get_footer();
To make it easier – I would just like to have the option to add a full width text row and full width image in an altitude pro page template
Thanks a lot
Hi
I cant edit comment above. Modified page template now working to use rows and images via a page template in Altitude Pro. My mistake with ACF
<?php
/**
* MyPage with full width sections.
*
* @author Sridhar Katakam
* @license GPL-2.0+
/*
Template Name: fwpage
*/
// Display header
get_header();
// Display Page Title and Content coming from WP editor
echo '’;
genesis_standard_loop();
echo ”;
// Display myfwpage Flexible Content
// check if the flexible content field has rows of data
if( have_rows(‘fwpage_flexible_content’) ) {
// loop through the rows of data
while ( have_rows(‘fwpage_flexible_content’) ) : the_row();
if( get_row_layout() == ‘fwpage_text_section’ ) {
echo ” . get_sub_field( ‘fwpage_text_section’ ) . ”;
} elseif( get_row_layout() == ‘fwpage_image_section’ ) {
$image = get_sub_field( ‘fwpage_image_section’ );
echo ”;
}
endwhile;
}
else {
// no layouts found
}
// Display Footer
get_footer();
My CSS for the fwpage
/* Full Width Front Page
——————————————— */
img {
vertical-align: top;
}
.entry-title {
margin-bottom: 20px;
}
.fwpage .site-inner {
max-width: none;
padding-top: 0;
}
.fwpage-section {
margin-top: 40px;
}
.fwpage-section.image,
.fwpage-section.image + .fwpage-section.text,
.fwpage-section.text + .fwpage-section.text {
margin-top: 0;
}
.fwpage-section:first-child {
margin-top: 0;
}
..fwpage-section .entry {
padding: 0;
}
.page-content {
background: #eee;
padding-top: 40px;
}
.text.row {
background: #ddd;
padding: 40px 0;
}
.text.row + .text.row {
padding-top: 0;
}
..fwpage-section p:last-child {
margin-bottom: 0;
}
@media only screen and (max-width: 800px) {
..fwpage .site-inner {
padding-left: 0;
padding-right: 0;
}
}
Unfortunately the rows are not displaying full width in Altitude Pro – It seems that the .site-inner CSS is restricting the page content to 1200px
/* Site Containers
——————————————— */
.site-inner,
.wrap {
float: none;
margin: 0 auto;
max-width: 1200px;
}
Wonder if you can help as I am not a coder – is the issue here the php in the page template or CSS?
If its the CSS – is there a way to set the .site-inner for this new page template only? (fwpage)
Thanks a lot š
Hi
Using this template in Altitude Pro – as above – all works fine apart from the WP Content added via the editor in the first section is not full width
The full width rows for text and image work okay but any content added via the editor is picking up the default Genesis styling for the theme
It seems to be an issue with the theme div class for entry content which is set to 1200 x90 container
.entry-content
Please can you assist with the relevant CSS to have a full width row in Altitude Pro for the text added via this function in the page template
// Display Page Title and Content coming from WP editor
echo ”;
genesis_standard_loop();
echo ”;
My CSS
img {
vertical-align: top;
}
.entry-title {
margin-bottom: 20px;
}
.fwpage .site-inner {
max-width: none;
padding-top: 0;
}
.fwpage-section {
margin-top: 40px;
}
.fwpage-section.image,
.fwpage-section.image + .fwpage-section.text,
.fwpage-section.text + .fwpage-section.text {
margin-top: 0;
}
.fwpage-section:first-child {
margin-top: 0;
}
..fwpage-section .entry {
padding: 0;
}
.page-content {
background: #eee;
padding-top: 40px;
}
.text.row {
background: #CC0000;
padding: 40px 0;
}
.text.row + .text.row {
padding-top: 0;
}
..fwpage-section p:last-child {
margin-bottom: 0;
}
@media only screen and (max-width: 800px) {
..fwpage .site-inner {
padding-left: 0;
padding-right: 0;
}
}
Thanks a lot