Building a single page theme with WordPress and Bootstrap
BooThemeV01 is used as the starter template for this exercise.
BooTheme V02 is the completed example.
To get all the theme examples and related files, visit the wordpress resources page.
Linking Pages to Sections
Download the theme used in this example : BooThemeV03
Your front-page.php is organised into sections defined by a number of bootstrap container divs. The goal here is to use php template code to get content from wordpress to display in each section.
The title text seen here in each section is being imported from wordpress.
Create “Page” Items in WordPress
The content to display in each section is stored in your wordpress database as “page” items. In your wordpress dashboard, select the PAGE view from the sidebar and Create a new page.
The page list view showing a number of page items. I have created a page item for each section on my home page. You can see that the Title of each page is being displayed on my homepage.
Get The SLUG identifier for each page item
In order to get the title and content of each page item to appear in each section on your home page, you need to get the “slug” name for each page item. You can find the slug by clicking on “quick edit” link that appears when you hover over a page item listing in the page list view. The page list item will expand to show the slug. You can enter your own custom slug name in here.
The page list view showing a the “welcome” page item in quick-edit mode. I have set the slug to “welcome”.
Add the php Template code to your front-page.php
Get the slug name and use it together with php template code to get your page content. Add the following code to each section,
<?php $q = new WP_Query( 'pagename=YOURSLUGNAME' ); ?> <?php require locate_template('template-parts/query.php'); ?>
In the first line of code, replace YOURSLUGNAME with the specific slug identifier from your page item.
a section of the front-page.php file showing the “welcome” section HTML. Note the highlighted line and the ‘pagename=welcome’ attribute. This links my ‘welcome’ page item to this page.
Check the query.php file
The <?php require locate_template(‘template-parts/query.php’); ?> code directs wordpress to include (copy and paste) the html and php code in query.php (located in template-parts). query.php contains the code needed for displaying the information in our page item.
query.php : Note the <h1> and <p> tags wrapped around the php code.