In this tutorial we will see how to create a one page WordPress theme. One page WordPress theme is suitable for App landing page, portfolio, event etc sites. Its not suitable for blogs, ecommerce, forum sites etc.
DW Page Modern Single Page WordPress Theme
DW Page Modern Single Page WordPress Theme is one of the popular single page WordPress themes. Its a very good example about what functionalities a single page WordPress theme needs to contain.
Functionality of DW Page Theme
These are the functionalities of the theme
- The home page template displays all other pages in a vertical order.
- One of the pages contains the posts. When clicked they are viewed as popups.
- Menu items internally link to the pages.
- JavaScript is used to achieve smooth scrolling effect when menu items are clicked
Create a One Page WordPress Theme
We can create a one page wordpress theme from scratch or else we can edit existing themes to make them a one page wordpress theme. In this tutorial I am going to make the Twenty Twelve theme as single page theme. But if you want to create one from scratch then the procedure will be the same.
Create a Template file for Home Page
As the home page needs to display all other pages and posts we need to create a page template which does the same.
Create a file named single-page-theme.php. And put this code inside it
/*
Template Name: Single Page Theme Page
*/
?>
Programmatically Creating and Setting Home Page
Now we need to create a WordPress page with template Single Page Theme Page and set this as the home page.
This code does the same. Place it in functions.php file.
if(get_page_by_title("Home") == null)
{
$post = array(
"post_title" => "Home",
"post_status" => "publish",
"post_type" => "page",
"menu_order" => "-100",
"page_template" => "single-page-theme.php"
);
wp_insert_post($post);
$home_page = get_page_by_title("Home");
update_option("page_on_front",$home_page->ID);
update_option("show_on_front","page");
}
Displays all Pages in Home Page
Place this code in our single-page-theme.php file to display all the pages in the home page.
/*
Template Name: Single Page Theme Page
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php
$args = array("post_type" => "page", "order" => "ASC", "orderby" => "menu_order");
$the_query = new WP_Query($args);
?>
<?php if(have_posts()):while($the_query->have_posts()):$the_query->the_post(); ?>
<?php get_template_part("content", "page"); ?>
<?php endwhile; endif; ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
?>
Here is a screenshot of how the home page of the site looks now.
To change the order of the pages you need to change the value of the Order field in the Edit Page Attributes box in the admin panel.
Linking Menu Items to Internal Parts of Page
In a single page theme all menu items point to a page thats there in the home page. You shouldn’t link to a post as this will take user to another page which breaks the laws of sinle page theme.
This code automatically creates the menu items for internal linking. Put this code in functions.php file.
function new_nav_menu_items($items)
{
$items = "";
$args = array("post_type" => "page", "order" => "ASC", "orderby" => "menu_order");
$the_query = new WP_Query($args);
if($the_query->have_posts()):
while($the_query->have_posts()):
$the_query->the_post();
$items .= '<li><a href="#post-'. get_the_ID() .'">' . get_the_title() . '</a></li>';
endwhile;
else:
echo "";
endif;
return $items;
}
add_filter("wp_nav_menu_items", "new_nav_menu_items");
This code automatically filters the menu items and adds the pages to the menu. Here the menu items are internally linking to the pages id #post-{ID}. In the content-page.php file you can see in line number 11 that every page content has a ID of format post-{ID}. When you click on the menu items the page scrolls to that WordPress page.
When you are creating a single page theme from scratch make sure you are flushing the page ID in to the id attribute of the page content block. So that clicking on menu items scrolls to the page.
In the below image you can see how the internal linking has been done
Posts Shortcode
Now we want one of the pages to display posts. So we can create a shortcode for it.
Put this shortcode code in functions.php file and then use the shortcode in any page you like to.
function posts_callback($atts=null, $content=null)
{
$args = array("post_type" => "post", "orderby" => "date", "order" => "DESC", "post_status" => "publish");
$posts = new WP_Query($args);
?>
<div style="text-align: center">
<?php
if($posts->have_posts()):
while($posts->have_posts()):
$posts->the_post();
?>
<div style="display: inline-block; width: 300px; border-color: #333; border-style: solid; border-width: 2px; margin-top: 15px;">
<a href="javascript:post_popup('<?php echo get_the_ID(); ?>')"><?php echo get_the_title(); ?></a>
</div>
<?php
$post_array = array(get_the_title(), get_the_permalink(), get_the_date(), wp_get_attachment_url(get_post_thumbnail_id()));
array_push($posts_array, $post_array);
endwhile;
else:
echo "";
die();
endif;
?>
</div>
<?php
}
add_shortcode("posts", "posts_callback");
Here you can see when post title is clicked a JavaScript function post_popup is called up. This functions retrieve the post content and displays as popup.
I place the shortcode [posts][/posts] in by Blog Posts page. This is how it looks in frontend
Creating AJAX API to Retrieve Post Content
We need to create use WordPress AJAX API to create REST API for retrieving post content via AJAX.
Put this code in functions.php file. It takes a post id and returns its content.
function post_content()
{
$post_id = $_GET["post_id"];
$content_post = get_post($post_id);
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;
die();
}
add_action("wp_ajax_post_content", "post_content");
add_action("wp_ajax_nopriv_post_content", "post_content");
Retrieving Post Content and Displaying as Popup
This JavaScript code make a request to WordPress from frontend using AJAX and displays the post content as popup. Here for simplicity I used a alert box to display the content. For a real commercial theme you need to design your own popup.
Put this code in your functions.php file
function posts_popup()
{
?>
<script>
function post_popup(id)
{
var xhr = new XMLHttpRequest();
xhr.open("GET", "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php?action=post_content&post_id="+id);
xhr.onload = function(){
var content = xhr.responseText;
alert(content);
}
xhr.send();
}
</script>
<?php
}
add_action("wp_head", "posts_popup");
One Page Twenty Twelve Theme Download
Conclusion
In this tutorial I show the basic code snippets required for creating a one page WordPress theme and also I showed what a one page theme is and how it works.
@narayanprusty
