What's the best/most common approach to multiple sections front page in WordPress - wordpress

Question

I'm new to WordPress and I'm thinking about developing some premium themes. I see that a real trend these days is these themes with multiple sections separated in horizontal blocks in the first page. Stuff like this:
<section class="about-us row">
<h1> About us</h1>
<p>Some lorem here </p>
</section>
<section class="features row">
<h1> Features</h1>
<div class="col-1-3">
<h2>Responsive and shit</h2>
<p>Some lorem here </p>
</div>
<div class="col-1-3">
<h2>Free support</h2>
......
</section>
<section class="testimonials">
........
</section>
I'd like to know what's the best or most common approach devs are taking to provide this feature for their end-users.
I see that some of the best selling themes are using page builders managing it as shortcodes, but I'm not planning to use any page builder, at least not in my first theme, I noted that it's quite easy to get a messy code when using them, so I want to start simple.
So guys, can you help me? would the answer be using just shortcodes?
Thank you

Answer 1

Step 1:
I would suggest breaking the layout into sections using the get_template_part() function in your front-page template. The benefit of this is you can simply call for whatever part of the layout you need in any page template like so: get_template_part('testimonials');. You can even use them in the header and footer if you need to.
In your case i'm assuming there are 3 template parts: about us, features, and testimonials. You will need to create 3 PHP files that contain all of the code for each of those 3 parts. The PHP files will need to be located in your template's root folder. The PHP file can obviously utilize PHP however you need it to, but the main idea is that your HTML code for that section or "template part" will be placed in it's own PHP file. If you need to pull posts from wordpress, or perform database queries to generate the content for that section, you can do so individually for each template part in it's own self-contained PHP file. For the purposes of this example, let's just assume that you've called the PHP files for your template parts about_us_part.php, features_part.php, and testimonials_part.php.
After you create your 3 PHP files, making sure they are placed in your template root, you simply place the following lines of code wherever you want that particular section or "template part" to appear in your Wordpress page template. Like so:
<?php get_template_part( 'about_us_part' ); // About Us (about_us_part.php) ?>
<?php get_template_part( 'features_part' ); // Features (features_part.php) ?>
<?php get_template_part( 'testimonials_part' ); // Testimonials (testimonials_part.php) ?>
Basically, get_template_part( '{slug}' ); searches for a filename in your template root matching {slug}.php. So you can name it whatever you want, but if there is no matching PHP file found, obviously nothing will show up. There is one other option for get_template_part() that allows you to specify a name for the template section. However it is optional and not required, you can use it like so:
<?php get_template_part( 'about_us_part', 'about-us' ); // About Us (about_us_part.php) ?>
<?php get_template_part( 'features_part', 'features' ); // Features (features_part.php) ?>
<?php get_template_part( 'testimonials_part', 'testimonials' ); // Testimonials (testimonials_part.php) ?>
You can read more about get_template_part() in the Wordpress codex here:
http://codex.wordpress.org/Function_Reference/get_template_part
Step 2:
Now say you wanted to allow the user to display these template parts using shortcodes, you'd need to give them that ability in your functions.php file. For instance, say we wanted to create 3 shortcodes for each of the 3 template parts above. You can do it pretty easily using the Wordpress Shortcode API. You'd add the following code to your functions.php file:
[about_us]
function themeprefix_about_us_shortcode( $attr ) {
ob_start(); // Start output buffer
get_template_part( 'about_us_part' ); //Get about_us_part.php
return ob_get_clean(); //Clear output buffer
}
add_shortcode( 'about_us', 'themeprefix_about_us_shortcode' );
Once that function is in your functions.php file, along with the matching add_shortcode() function users can call out the About Us section by using the shortcode [about_us]. The two parts of the add_shortcode() function are the shortcode name, and the function that generates the content for the shortcode. Like so: add_shortcode( '{shortcode name}', '{shortcode function}' );
You'd need to create 2 more for your other 2 shortcodes:
[features]
function themeprefix_features_shortcode( $attr ) {
ob_start(); // Start output buffer
get_template_part( 'features_part' ); //Get features_part.php
return ob_get_clean(); //Clear output buffer
}
add_shortcode( 'features', 'themeprefix_features_shortcode' );
[testimonials]
function themeprefix_testimonials_shortcode( $attr ) {
ob_start(); // Start output buffer
get_template_part( 'testimonials_part' ); //Get testimonials_part.php
return ob_get_clean(); //Clear output buffer
}
add_shortcode( 'testimonials', 'themeprefix_testimonials_shortcode' );
Note: I placed "themeprefix" on the front of each function. I'd reccomend replacing that with your theme name, or whatever prefix you might be using on the front of your theme's function names. However the function name can be whatever you want it to be, just be sure to update your add_shortcode() to the new function name.
You can read more about add_shortcode() in the Wordpress codex here:
http://codex.wordpress.org/Function_Reference/add_shortcode
Also, I reccomend reading the Shortcode API page in the codex to learn how to add parameters to your shortcodes:
http://codex.wordpress.org/Shortcode_API