You have learned how HTML and CSS work, and you can build a website. Most web sites in the real world are not hand coded, but use a Content Management System, or CMS. While a CMS does not have to use a database, most do.
CMSs
High end CMS programs run sites like Google, Amazon or financial institutions. Most sites do not need that kind of performance or redundancy, and are built using open source software, usually PHP with MySQL as the database.
WordPress, Drupal and Joomla are three popular CMS. WordPress has become the most popular of these, even though it is the least CSM like. Comparison between the three main CMS platforms.
Each of these CMSs work very different, though all use PHP to construct the pages out of information provided by the database, and content stored in the site itself, on the basis of a template.
To modify the look of the CMS, requires modification of the template. You build your website by designing the template. The CMS does the rest.
WordPress
We focus on the most popular choice. Because there is not enough time in the class, I leave developing your own WordPress theme as an alternate choice.
You will be able to create a template from scratch by following the short course: WordPress 3: Creating and Editing Custom Themes with Chris Coyier of CSS-Tricks. To click this link, you first need to log into the Newschool Portal –> Library –> Databases –> search for Lynda.com, click on the link, go to Lynda.com, sign up for an account, and then sign in. You can then use this link to go to the tutorial and download the accompanying exercise files. Lynda.com.
When A Dynamic Website is Not the Best Choice
Dynamic websites are the best thing since sliced bread, but they come with one big drawback. If you do not keep up with the software, they can contain exploits used by people with malicious intent. This can render your website hacked. This is not possible with a conventional, hand coded website.
If you plan to not update your portfolio all of the time, it better be a hand coded site. If you plant to keep up with the software updates, then by all means, use a CMS.
Installing WordPress
You will find all the resources you need at wordpress.org. You start by downloading WordPress. Put all of the files in the directory you want WordPress to appear in.
You will go to that directory, and you will be guided by the WordPress Installer. You will need to know the name and password of the database that WordPress is to use. The installer will take care of setting up everything else.
See MAMP & WAMP for setting up WordPress on your own computer.
Chris Coyier outlines a great way to experiment by using a local MAMP installation at both Linda.com with a video tutorial or the Video on CSS-tricks.com. That’s a sure way to become familiar with using WordPress as the basis for building web sites.
WordPress Template
WordPress comes with a default templates. It is possible to modify them. The problem with preexisting templates is that if they are not exactly what you want, even though they are 95% of the way there, that extra 5% sometimes requires a lot more work than you would expect, as you have to deconstruct the template and rebuild it the way you want. It can take less time to do it from black template. That is why a better way is to design the template from scratch. Start with a blank template Chris prepared.
Having installed WordPress, you need to add this to the “themes” folder in the “wp-content” folder. Once it is there, you can activate it from within the WordPress Dashboard.
Yes I am going through this rather very fast, in part because we could never cover the whole topic anyway, and this is just to give you a taste of what is to come. Please do Chris’ tutorial if you want to learn more.
WordPress File Organization
Inside the blank template folder, you will find an index.php file. That is the main file creating each page.
You learned how PHP is able to include a number of files. That is what happens here. Everywhere you see a “get_” PHP will insert an associated file in that place. This is what the index.php looks like:
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>
<div class="entry">
<?php the_content(); ?>
</div>
<div class="postmetadata">
<?php the_tags('Tags: ', ', ', '<br />'); ?>
Posted in <?php the_category(', ') ?> |
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
</div>
</div>
<?php endwhile; ?>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
<?php else : ?>
<h2>Not Found</h2>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
You will notice that the index file pulls in the header.php, the sidebar.php and the footer.php files, in addition to the loop that fetches the current post.
Here is a list of all the files in the template:
404.php archive.php comments.php footer.php functions.php header.php index.php page.php screenshot.png search.php searchform.php sidebar.php single.php style.css
You need to understand that the HTML page that you otherwise code as one entity is here divided among these different files. It is quite easy to transfer your static website to a dynamic WordPress site by dividing up the web page into the existing pages like the header.php, sidebar.php, footer.php, etc.
The good news is that the CSS styles are included as an external stylesheet “style.css” exactly as you would expect.
As you translate your existing website to WordPress, you will once again learn everything that you have learned in class over again, but this time, you will be applying it to the modular structure of a dynamic php / database driven site.
There are many benefits to such a dynamic site, and a few drawbacks. Dynamic sites are a little slower and unless you keep up with the latest software, can be insecure, but that is not that large a price to pay when you add in all the benefits of a dynamic site.
I understand that this is all a little much. This is meant as a brief introduction. Watch the tutorial, and you will use WordPress to build your sites from that point on.