Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Nathan Noye
Nathan Noye
4,370 Points
Posted by Nathan Noye
Nathan Noye
4,370 Points

How would you use Wordpress as a CMS for a site you've already built with HTML and CSS?

I've finished the course with Nick and on his Twitter he suggested WordPress to use as a CMS. I tried searching the tracks swell as going on youtube but not that really fit well with what I was asking. I already have a site built in HTML and CSS locally, but how would I use WP as a CMS for it?

3 Answers

Clinton Hopgood
Clinton Hopgood
7,825 Points
Clinton Hopgood
Clinton Hopgood
7,825 Points

The first question you need to ask yourself is is it worth converting for a CMS like Wordpress. Such systems are great for managing dynamic content but if your website is likely contain static content that will not change often than Wordpress isn't going to benefit you much.

If you do decide to go ahead and convert to a CMS I would also recommend Wordpress as a great option (it's also my top choice). The best method of converting to Wordpress would be to create your own Wordpress theme from the HTML and CSS you've already written.

Info on how to do this can be found on the web, a good starting point is the wordpress Codex https://codex.wordpress.org/Theme_Development.

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

To add to Clinton's answer, there are some good WordPress resources here on Treehouse. The WordPress Theme Development course may be especially helpful. The Bootstrap to WordPress course was also really interesting and will give you an idea of what it might take to go from a static site to the WordPress framework.

Don't expect the process to be easy. You can spend years learning the ins and outs of WordPress, but these should get you headed in the right direction and give you an idea of what to expect. There are lots of other courses here having to do with WordPress and they're all worth poking around. You can view them here.

Good luck!

Sue Dough
Sue Dough
35,800 Points
Sue Dough
Sue Dough
35,800 Points

Let me give a crack at it. It will be quite simple actually. Lets start with just the home page.

Create 5 files and put them in a folder named after your theme.

index.php header.php footer.php functions.php style.css

You will need to add the following into the top of your style.css to register it as a theme. Then put your css below it.

/*
Theme Name: Nathan Noye
Theme URI: http://nathannoye.com
Author: Nathan Noye
Author URI: http://nathannoye.com
Description: Personal theme for my website
Version: 1.0
*/

/* your css here */

You will then need to take your index.html file and split it up into 3 parts if you haven't already. Those 3 parts are the footer, header, and content.

You index.php file will work like this. It calls the header.php and footer.php file with the following functions get_header and get_footer. So you will need 

<?php get_header(); ?>

 Make the magic happen.  Your content goes here.   You can read about the loop to if you want to start creating more dynamic stuff here.  https://codex.wordpress.org/The_Loop

<?php get_footer(); ?>

Your footer.php would be something like:

<?php wp_footer(); ?>

Your header.php would be something like this:

<?php
/**
 * @package WordPress
 * @subpackage YOUR Theme name
 */
?>

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]>         <html class="no-js ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]>         <html class="no-js ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 9]>         <html class="no-js ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

        <?php wp_head(); ?>

    </head>

    <body <?php body_class(); ?>>

Your functions file:

<?php

// your php can go here

Then make sure to add a file called screenshot.png in your theme folder and make it the size 880×660. This will be the photo you see when you upload and active the theme into WordPress.

You can then turn the other pages into custom templates if they are really different or you can create a more dynamic template that you can use over and over. https://codex.wordpress.org/Page_Templates .