Building a single page theme with WordPress and Bootstrap

Exercise 2

Resources

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.

Next Exercise

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.

 

wordpress_add_page_data_09

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.

 

wordpress_add_page_data_01

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.

 

wordpress_add_page_data_02

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.

wordpress_add_page_data_10

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.

wordpress_add_page_data_11

query.php : Note the <h1> and <p> tags wrapped around the php code.