Adding WordPress Into Existing Webpage

I wanted to slap a WordPress blog into my existing website.  I wanted it to get the full WordPress functionality and still have the same styles as the other pages on the site and use the same headers and footers.  Basically, I wanted it to look like you were still on the same website whether you clicked on “Blog” or “Projects” or “Home.”

Below is how I came to the solution I am using.  They are labeled loosely as “steps” but they are not exactly concrete “Do A then B then C then D then you’re done” steps and more of a recording of what I went through to solve the problem.  I will provide concrete actions within the steps if that is what you are after, but you might have to dig a little.

Step 1: Learning What Question To Ask

As is almost always the case, the first important hurdle to solving a problem is knowing what problem you want to solve.

I thought I wanted to “embed a WordPress blog into an existing website” so that’s what I typed into Google.  That led to a very official looking post on WordPress’s site telling me that with two short code snippets I would be displaying WordPress entries into my webpage in no time at all!  Until I tried it, it failed miserably and I re-read the post.  It was instructions for embedding WordPress into an existing PHP page.  Do people really hand-gen PHP pages all that often?  Maybe they do, I’m not web developer so I don’t know, but I didn’t/don’t/won’t.

So, what did I actually want to do?  I came up with “embed a WordPress blog into an existing HTML page.”  HTML being the important distinction here.  It turns out that this wasn’t exactly the right question to ask either, but it did get me pointed in the right direction.

Step 2: WordPress and the Actual Task at Hand

Backing up a bit, you have to install WordPress to use WordPress.  So do that.  I use DreamHost and they have an easy install for WordPress, it takes a few minutes total, most of that time is waiting for your database to come online.  I imagine most other web servers have the same option, if not a full WordPress install isn’t too difficult.  Come back when you have this done.

I installed mine at www.christopherrmack.com/blog. If I loaded that exact URL I would see the default WordPress layout with the “Hello World” post.  I didn’t want that, I wanted www.christopherrmack.com/blog.html to have it’s content be WordPress blog postings but otherwise look like it the rest of my site.

It turns out, the way to do this (at least the way I found to do this) isn’t to adjust your existing HTML to reference WordPress posts, but rather to adjust WordPress to look like the rest of your site.  It seems like a mostly semantic difference, but it does fundamentally change the way you approach this task.

Step 3: WordPress Themes

WordPress separates the core WordPress-y stuff and the visual look into separate entities.  Most users won’t care about this distinction, but if you are diving into WordPress to try to change the way it looks at the HTML level, you will find this was an excellent choice by WordPress as you can tinker away with HTML, CSS, and JS while (mostly) ignoring the actual content of a WordPress blog.

WordPress uses themes to define the look portion of things.  Depending on whether or not you click a checkbox during installation, your WordPress blog might come with a dozen themes pre-installed.  Hundreds or thousands more are available with a few clicks.  Themes define everything about how a WordPress blog looks.

You can probably see where I’m going with this…wouldn’t it be great if there was a WordPress theme which looked exactly like the rest of your website so your WordPress blog fit in seamlessly?!?

Step A:  Reference Aside

I want to point out that I used Embedding WordPress into an existing website post to guide me through the process.  I got tripped up a little near the end but I eventually worked through it.  All following steps are my interpretation of that post, it is a very detailed post and you might want to try it out before reading the rest here.  If you run into issues maybe come back here to see if they were the same I was having.

Step 4:  My Very Own WordPress Theme!

So WordPress has themes which define everything about how the page looks.  And, unfortunately, nobody has made a theme which exactly matches the layout of the rest of my site, bummer.  The natural solution is to make your very own WordPress theme.

This is much less involved than it sounds because we are going to cheat.  FTP into your website, find the “themes” folder under your WordPress installation and pick one(from your WP install directory it is: ./wp-content/themes/).  It isn’t completely arbitrary which you choose because I won’t explain how to change every single look-and-feel value in this theme.  I wanted to keep my white background without having to think about it so I went with the default (“twentytwelve” when I did this) which is at least in the same vein as my website, making the process of adapting it to fit in a little smoother.  If I had chosen a dark theme with colorful background images I would have had more work to do to hack it down to my minimal website look.

Okay, you’ve chosen a base theme to start from.  Copy the contents of this theme into a new folder in the themes directory.  Say you put them into “mywebtheme.”  You need to now go into “mywebtheme” and change the theme to have a unique name so you can use the WordPress control panel to start using your new theme.

To change the name open the file:
./themes/mywebtheme/style.css

At the top of this file will be some commented header information, change the Name to whatever you want it to be called and also add your own description.

Now your theme has its own name so you can tell WordPress to use this new theme by going into the WordPress control panel of your blog.

In WordPress control panel to to Appearance–>Themes.  You may have a long list of themes or a short list, depending on if you installed a bunch of defaults during installation.  Either way, find your new theme and make it the active theme for your blog.

Now go reload your blog.  It looks….exactly the same!  (If you copied the theme your blog was already using, if not it will at least look exactly the same as whichever theme you copied)  This might be true, but the important thing here is that it is your very own copy of another theme, progress!

Step 5:  Enough Already, Make It Look Like Mine

Alright, so what have we done so far.  We have installed WordPress onto your website, copied an existing theme and are now using that “new” theme.  Installing WordPress is obvious, but why did we copy a theme?  Because we now get to use that copy as a sandbox to try to make our WordPress page look like the rest of our website.  Fun!

Head into the bowels of WordPress themes by navigating in your website FTP to (from your WP install direction): ./wp-content/themes/mywebtheme/

For the most basic purposes you will only care about two files:  header.php and footer.php.

header.php defines the nice banner at the top of the page, with the title/subtitle, maybe an image and whatever else the theme has.
footer.php defines the footer, if any exists, for the theme.

I’m interested in these two pages because my website has a basic header (the page title on the left-ish side and then my Twitter link in the top right) and a basic footer (the intra-site links on the bottom).

I want to make the WordPress header and footer look like the header and footer on the rest of my site.

First, open header.php.  Import your CSS files so that when you add your HTML it knows where to look to define the style.  You can do this anywhere in between the <head> open and close tags in header.php.  I added him below an existing <link> tag.

Import your CSS by adding the line:

<link rel="stylesheet" type="text/css" href="../../../../../PATH/TO/YOUR/CSS/FILE.css" />

My exact entry, for example, is:

<link rel="stylesheet" type="text/css" href="../../../../../cnfg/css/main.css" />

You can add multiple CSS files (I had three I needed to add) and also reference any Javascript, images, icons, etc…you may need for your customization.  At the time of writing the only references I had were my CSS files.

Step B: Another Aside

Now is when I encourage you to experiment.  You now are deep in the throws of your WordPress header file with complete access to the CSS which defines all of the pages on your website.  Start adding some of your HTML from that old blog.html page and see what happens.  How does it interact with the existing HTML in header.php?  Which parts of the existing header do I need to keep around?  Being new to HTML/CSS when I was going through this, this is the stuff that interested me.  If experimenting is not your thing, I’ll cut to the chase now.

Step 6: The Chase

Start looking at the HTML inside of header.php, specifically what happens after the </head> tag. Ignoring the content for a second, it appears as though some of the tags don’t actually get closed in this file.  Where is </body&gt; and the </div> for the id=”page” tag?  It turns out, the way WordPress uses this file is actually to combine it with footer.php to create the page.  So if you open footer.php you see the </body> and the </div> <!-- #page --> lines.  Sneaky WordPress.

You don’t need any of the HTML inside of the <body> tag in header.php except for the <div id="main" class="wrapper"> tag. This tag, and the corresponding closing of it in the footer.php file, help define where the blog content/menus go so they must be left in so that your newly added HTML shows up properly.

So I removed everything else in the <body> section of header.php and copied in my old blog.html header information.  Since header.php is already loading in my CSS files, I don’t need to do anything else.  I reload www.christopherrmack.com/blog and I see a header that is consistent with the rest of my website followed by the “Hello World” default blog entry.

The footer is a bit different because it doesn’t have all of the <head> information header.php does, it has some comments and then jumps right in to closing some of the tags from header.php.  I emptied out everything between the </div> for #main.wrapper and the <?php wp_footer();?> line.  This removes any footer that might have existed.  I copied my few lines of HTML in that place and  my WordPress theme now contained both my header and footer to match the rest of my site:  victory!

My complete header and footer PHP files when I was finished:

header.php

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="stylesheet" type="text/css" href="../../../../../cnfg/css/main.css" />
<link rel="stylesheet" type="text/css" href="../../../../../cnfg/css/blog.css" />
<link rel="stylesheet" type="text/css" href="../../../../../cnfg/css/grid.css" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
<link rel="icon" type="image/png" href="../../../../../images/favicon.png">
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
 <div id="intro">
 <ul id="corner">
 <li><a href="https://twitter.com/#!/chrisrmack">Follow Me!</a></li>
 </ul>
 <div class="row">
 <div id="title">Blog</div>
 </div>
 </div>
 <div id="main" class="wrapper">

footer.php

<?php
/**
 * The template for displaying the footer.
 *
 * Contains footer content and the closing of the
 * #main and #page div elements.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>
 </div><!-- #main .wrapper -->
 <div id="footer">
 <div class="row">
 <ul id="links">
 <li><a href="http://www.christopherrmack.com">Home</a></li>
 <li><a href="http://www.christopherrmack.com/blog.html">Blog</a></li>
 <li><a href="http://www.christopherrmack.com/projects.html">Projects</a></li>
 <li><a href="http://www.christopherrmack.com/skills.html">Skills</a></li>
 </ul>
 <div id="text">Christopher R. Mack</div>
 </div>
</div>
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

And the look they produced:
blog_wp_theme_after<

Step 7:  There Is No Step 7

You’re done.  You have created your own custom WordPress theme by copying a reasonable starting point and manually editing the HTML so it fits in with the rest of your website.  In the end you didn’t embed WordPress posts into your existing page, you took the styles of your existing site and embedded them into a WordPress blog

If you want to go more in-depth or have a more complicated site theme, this becomes a bigger project.  But I think at this point it is all down to HTML, CSS, and JS, and if you’ve coded up a slick looking website you are probably very capable of doing the same within the WordPress files.

This was a pretty straightforward issue for my case.  My two main hurdles were knowing what, exactly, I wanted to do (or more precisely, knowing what was possible) and then knowing what HTML to chop out of the existing *.php files to get me where I wanted to be.  It isn’t very exciting that most of my learning here was related to WordPress and its themes, but at least I know.  I doubt I will want to get much more in depth on WordPress php files in the future, but I’m sure I will come back and revisit those header and footers as my site design changes.

 

Leave a Reply

Your email address will not be published.