Building a Website Quickly with PHP, WordPress, and WebMatrix

Discover the newest features of WebMatrix that you can use to build and customize a WordPress solution with PHP quickly and easily whether you are a seasoned PHP developer or still a rookie developer.
By Staff

In all of the years that I've been working on the web, and working with PHP specifically, I've noticed that the term 'PHP developers' has come to mean many things due to the size and diversity of what can be done with this wonderful language.

Create, customize, and publish web pages. Download WebMatrix.

The three main types of PHP developer are:

  • Site creators, using PHP apps such as WordPress
    • These are the largest population of PHP developers nowadays, and they primarily use open source applications such as WordPress and Drupal to create sites. They then use their PHP coding skills to customize these sites, by editing the open source templates, plugins, modules etc. that run on these sites. These folks, rightly, tend not to do the plumbing associated with a web site, such as authentication, validation, content management etc. as they applications already do it for them.
  • PHP Coders
    • These developers typically write PHP applications from the ground up for custom sites that can't be implemented using an existing open source application. Additionally they may use their skills to create templates, modules or add-ins to open source applications
  • App Coders
    • These are the developers that build the open source applications that the other two use!

While there's great stuff in WebMatrix 2 beta for all three of these developer types, I'll be focusing primarily on the first group, with a little of the second. You'll see how to use WebMatrix to create a WordPress site on Windows (isn't that what WWW stands for?), and then how to use the tools within WebMatrix such as autocomplete and intellisense to make the experience of modifying WordPress templates a lot easier than the traditional browser-based editor that WordPress users may be familiar with. You'll work through this by example, by replacing the default commenting engine from WordPress with Facebook-based ones.

Getting Started with WebMatrix

You can find all the details on WebMatrix at http://www.microsoft.com/web/webmatrix/. It's a free web development tool from Microsoft that can be used to build ASP.NET or PHP based sites, and which includes a wizard that downloads, installs and configures open source applications and their dependencies for you.

We'll be using WebMatrix v2 beta in this article. At the time of writing, it's available by clicking the 'Or try the latest Beta' button at the top of the WebMatrix page. See Figure 1.

Downloading WebMatrix
Figure 1. Downloading WebMatrix from Microsoft.com/web

Clicking this will take you to a page where you will download the Web Platform Installer (WebPI) if you don't already have it. Install this first, and it will then allow you to install WebMatrix. Remember that the WebPI isn't WebMatrix, but the channel through which you can install it.

With WebMatrix, you'll get the Microsoft Web Stack installed, which includes IIS Express, a compact, but full featured Web Server; SQL Server compact, a file based database; ASP.NET and ASP.NET Web Pages development/runtime APIs and of course the WebMatrix editor.

To use PHP apps, you'll need the PHP development/runtime APIs and typically you'll also need MySQL. While they aren't installed by default, they will be the first time you try to create a PHP app.

Creating a WordPress Site with WebMatrix

When you first run WebMatrix, you should see a screen like Figure 2, which allows you to open existing sites, create new ones from templates, or create new ones using open source Web applications.

Microsoft WebMatrix start screen
Figure 2. WebMatrix Welcome Screen

When you select the 'App Gallery' option, you'll be taken to a list of open source Web applications that are supported by WebMatrix.

From here, you can pick WordPress and give your site a name, see Figure 3, where I called mine 'MyBlog'.

WebMatrix
Figure 3. Creating a WordPress site.

You'll then be taken through a wizard where WebMatrix will download WordPress and all your dependencies (including PHP and MySQL), asking you for basic configuration. If you don't have MySQL already, for example, it will request that you provide the root password for your new MySQL installation. Don't forget what you enter here!

Once you've run through the installation, you'll be taken to the WebMatrix Workbench, from where you can run your WordPress site.

Click the Run button, and your WordPress site will run. Go through the WordPress configuration, and you'll end up with the standard WordPress site's admin workbench, that looks something like Figure 4.

WebMatrix WordPress Dashboard
Figure 4. WordPress is up and running!

And your WordPress site will look something like Figure 5.

Blog Page in WordPress
Figure 5. Your WordPress site.

So now that you're up and running, in the next steps you're going to do some PHP coding, where you are going to replace the default WordPress commenting engine with a Facebook-based one.

Editing WordPress Sites with PHP

Typically when you enhance or edit your WordPress site, you'll do it by coding the PHP that is used in the template for the view that you want to amend. It's a really nice aspect of using an app like WordPress for Web development, in that you don't need to worry about a lot of the 'plumbing' for your site — it's been done for you.

In this section you'll edit your WordPress site to allow users to comment on your blog posts using a Facebook. So, for example, using the default theme, a blog post looks something like Figure 6.

Adding Commenting to your site
Figure 6. A blog post in WordPress

Within the theme, the template that renders a single blog post is usually called single.php. Using WebMatrix, let's edit this PHP file to customize the blog posting the way that we want to appear, namely to replace the default commenting engine with one that renders a Facebook comments stream, which allows your readers to share your blog posts with their friends on Facebook.

With WebMatrix, open the Files workspace using the Files tab at the lower left, and then open the wp-content folder. Within it you'll see a sub folder for themes. WordPress supports multiple side-by-side installed themes, but only one is active. By default, the twenty eleven theme is active, so in this case I'm editing it. If you activated a different theme, just use its folder instead.

Within wp-content you'll find the single.php file. Open it up by double clicking. You can see it in the editor in Figure 7.

Editing a PHP file with WebMatrix
Figure 7. Editing a PHP file with WebMatrix.

Towards the bottom, you can see a line that reads like this:

<?php comments_template( '', true ); ?>

This executes PHP code to inject the comments template, and WordPress will figure out the comments in its database for this page, and render them. It will also render the form that allows users to post comments back to the page. Remove it and then re-run the site. You'll see that the comments are gone.

Adding Facebook Comments

Facebook comments are added to your page using a combination of JavaScript and HTML. You can generate the comments by visiting http://developers.facebook.com/docs/reference/plugins/comments/ and filling out the form. Use http://localhost for the site.

This will give you two chunks of code, that look like this:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=116232555129048";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')); </script>

And this:

<div class="fb-comments" data-href="http://localhost" data-num-posts="20" data-width="500"></div>

Facebook's instructions are to place the first one on your page after the opening <body> tag. In your PHP template, you can achieve this by pasting the code on the line right after the get_header() function.

The second piece should be placed on the line from where you deleted the comments template earlier. When you're done, your single.php should look like this:

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=116232555129048";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')); </script>

         <div id="primary">
            <div id="content" role="main">

                <?php while ( have_posts() ) : the_post(); ?>

                    

From WebMatrix, run your site, and now you'll see that a comments list has been added to your page. This comments list is mapped to the domain http://localhost, which of course lots of people use, so you'll see hundreds of comments. See Figure 8.

Facebook comments added to a Webpage
Figure 8. Your page with Facebook comments.

The reason why Facebook did this can be seen by looking at the <div> you added to your page, where you specified the URI of the page for which the contents should be rendered. Here it is again:

<div class="fb-comments" data-href="http://localhost" 
     data-num-posts="20" data-width="500"></div>

So any page that renders this <div> will get the stream of comments for http://localhost, and every page will get the same comments. Naturally this isn't what you want for blog posts, where you want each post to have its own comment stream. Fortunately, as PHP is a server side coding environment, it should be relatively easy for you to replace the hard-coded 'http://localhost' with the address of the page you want comments for!

So, in order to do this, let's write a PHP function that gets the current URL. While doing it, you'll see how WebMatrix helps you with Intellisense. See Figure 9.

Intellisense and WebMatrix PHP
Figure 9. Using Intellisense in PHP with the WebMatrix editor.

You needeto use the built-in $_SERVER variable, but all you need to type is $_S and intellisense will kick in with the list of variables you can use as well as documentation about each.

Here's the complete function:

<?php
function currentPageURL() {
    $pageURL = 'http';
    if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
    $pageURL .= "://";
    if ($_SERVER["SERVER_PORT"] != "80") {
        $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
    } 
    else 
    {
        $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
    }
    return $pageURL;
}
?>

And now, instead of using a hard-coded 'http://localhost', you can just use PHP to echo out the results of this function call. So, instead of the <div> you used earlier to inject the Facebook comments, use this one:

<div class="fb-comments" data-href="" data-num-posts="20" data-width="500"></div>

Note that the data-href is now dynamic, so it will write out the URL of the current post, which usually looks something like http:// <domain>/?p=<something>, and as such you'll get a different comment stream for each page.

As you are using a dynamic comments page, in order to test it, you'll need to publish your site to a server on the Internet. Check the WebMatrix documentation for how to do this, as well as offers of free servers. To see an example of it in action, check out the following URLs which are using this code:

http://www.philotic.com/?p=26
http://www.philotic.com/?p=21

You'll see that they allow full Facebook commenting, and users of this blog will be able to share their comments (and your blog!) with their friends; All with a little bit of PHP coding.

Summary

In this article you saw how WebMatrix makes installing and using WordPress on Windows very straightforward. You also then saw how you can use the WebMatrix editor to work with the PHP source code of WordPress, specifically how to edit the template for a blog post to allow you to remove the WordPress-based commenting engine and replace it with a Facebook-based one. This allows your users to have a single sign on for posting comments, and also allows them to spread your blog posts among their friends. You saw how to use the coding editor of WebMatrix to achieve this quickly and easily.

Reference

The following are resources you might find valuable:

# # #

This article was sponsored by Microsoft Corporation, but written independently by the author.

Add to My MSN