How do you create dynamic customised sections in Wordpress?

Question

I am very new to Wordpress and I just like to ask a fundamental question about its structure.

I understand that Wordpress uses different files as templates for different sections or types of pages. What I'd like to know is what if I have certain parts within the page that contains other bits of data like in the image below (the ones with the question marks):

Let's say, referring to the image above, that the 3 boxes in a row will display reviews and the 2 boxes in a row at the bottom will display just random quotations. These boxes have their own styling and the content would be dynamic. It would be quite straight forward if they were static (I just copy paste the HTML code) but it's making them editable via Wordpress that I'm not sure how to go about.

Note that these sections are not performing any special function but rather, just displaying content (title, text or image).

I guess my question boils down to:

How do I create any custom section I want in a Wordpress page and make them editable / dynamic?

Reading up a bit, I came across concepts like: widgets, custom fields, and meta boxes. But I'm not exactly sure which one of these is the best tool or if there are better ones.

Answer 1

One common way to do similar task is creating a page template. For example:

<?php
/*
Template Name: Reviews and Quotes
*/

get_header(); ?>

<div id="content">

    <div id="reviews">
        <?php
        $reviews = get_the_reviews();
        foreach( $reviews as $review ) {
            <?php
                <div class="review">
                    .....
                </div>
            ?>
        }
        ?>
    </div>

    <div id="quotes">
        <?php
        $quotes = get_the_quotes();
        foreach( $quotes as $quote ) {
            <?php
                <div class="quote">
                    .....
                </div>
            ?>
        }
        ?>
    </div>

</div>

<?php get_footer(); ?>

Then, you have to define the functions get_the_reviews() and get_the_quotes() in the functions.php of your theme and do whatever you want, for example, queries to database:

function get_the_reviews() {

     //Your query to get the reviews

}

function get_the_quotes() {

     //Your query to get the quotes

}

In your CSS you can give the style for this page and sections using the given id and classes.