Cintacs Pittsburgh web and software development company logo

Creating Innovative New Technology and Customer Solutions

WordPress is the Internets most popular CMS (Content Management System). It includes many features however you may only want to integrate a few of its features into an existing website.

Case in point: One of the popular trends in 2015 in website design are "One Page Scrolling" websites. WordPress doesn't easily lend itself to this kind of functionality. However if you have static content areas you may want to integrate WordPress to work with your website.

Let's say you want a simple "One Page Scrolling" website with an About, Blog, and Contact section.

We will cover how you can use WordPress to populate your About section using the dashboard "Page" feature. The Blog section will be populated using the dashboard "Post" feature. And the Contact section will use a WordPress plugin.

First you would create a directory called "blog" and install WordPress in it.

Assuming you have your "One Page Scrolling" template ready to go. (We will assume this is your index.php file.) You would edit this file adding this code to the start of the page.

<?php require('blog/wp-blog-header.php'); ?>

To populate the About section first you would login to WordPress and select the "Page" menu item in the dashboard and create an entry titled "About". Now that you have content for the About section to display it on your website you would add this code to your index.php file:

<section id="about">

<h3>About</h3>

<?php

$page = get_page_by_title( 'About' );

$content = apply_filters('the_content', $page->post_content);

echo $content;

?>

</section>

To populate the Blog section once again your would login to WordPress and select the "Post" menu item in the dashboard to create your blog entries. You can add as many blog entries as you like.

In your index.php file you control how many blog entries you want to display. In this example we are displaying 4 blog entries.

<section id="blog">

<h3>Blog</h3>

<?php global $post; ?>

<?php $args = array( 'posts_per_page' => 4 ); ?>

<?php $myposts = get_posts( $args ); ?>

<?php foreach( $myposts as $post ) : setup_postdata($post); ?>

<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>

<h3 id="post-<?php the_ID(); ?>">

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>

</h3>

<?php the_content('Continue reading &raquo;'); ?>

<?php endforeach; ?>

</section>

We just selected a few "template tags" to keep things simple like the_post_thumbnail, the_title, and the_content. But there are more "template tags" available like the_author, the_category, and the_tags. For more examples check out these links:

http://codex.wordpress.org/The_Loop_in_Action

http://codex.wordpress.org/The_Loop

http://codex.wordpress.org/Template_Tags

Now to add a Contact Form to your site.

The most popular WordPress Contact Form plugin is "Contact Form 7". Add and activate the plugin in WordPress. Then configure the plugin and get the "shortcode" to add the plugin to your website.

Here is an example of the code to add the Contact Form plugin to your index.php file:

<section id="contact">

<h3>Contact</h3>

<?php echo do_shortcode('[contact-form-7 id="16" title="Contact form 1"]'); ?>

</section>

There are some drawbacks to this approach. When it comes to maintenance it is not as dynamic and requires some website developer experience to maintain. However this is one of the many approaches that works great if your site has static content sections and you want to add CMS functionality. On top of that you also have access to the plugins developed for WordPress to integrate into your website.

Back