WordPress in miniature.

Torn Posters
Here’s a handy tool for y’all. WordPress. It’s probably one of the most common CMSs (Content Management Systems) in existence. It’s written in PHP and the MySQL dialect of SQL, two languages that I do not intend to cover in this course.  The beauty of WordPress, as opposed to systems like Ruby on Rails, Joomla or Django, is that you can do a lot of stuff without having to touch the PHP/SQL stuff. I might argue that the beauty of Django or Rails is that it makes the code so simple that you don’t mind messing with it. But that is definitely digressing. You might want to give those frameworks a look if you are going further later on.

The distinction with all these systems, the thing that makes them different from the javascript-based code we’ve been developing so far, is that javascript runs (typically) in the browser, on the computer of the user who visits your page. PHP and SQL though are executed on a the server. This is why UTS pays Dreamhost money for the usage of their machines.

But one step at a time. WordPress is a great way of seeing how all this website stuff works… let’s take it from where we left off last time, installing stuff from the dreamhost control panel.

The dreamhost add-new-software screen

The dreamhost add-new-software screen

Shazam. You now have wordpress installed. Why not take a look at what you have there, and fill out your info?

your brand new blog thingy - don't get the email wrong or you'll have to start again.

your brand new blog thingy - don't get the email wrong or you'll have to start again.

Once you’ve logged in you’ll be presented with a classic blog dashboard where you can hang around editing posts and so forth. There’s a million options here which might be confusing. Fortunately there is an extensive manual. Why not try to make a brand new post? Can you work out how to do that? Having edited your new post, why not find the post in a browser and have a look the published version? Now, run firebug, or press “view source” and have a look at the HTML that makes up the page… It’s a bit more complex that the stuff we were coding up by hand earlier, no?

where all the wordpress action is at

where all the wordpress action is at

How is this magic accomplished? Well, if you’d like you can look deeper into the internals of the software… you can point Cyberduck at the server and have a look at the files that make up your wordpress installation. There’s a lot of stuff there- basically, a crapload of PHP code that automates the process of generating HTML for you. You could edit the PHP code in turn if you wanted to… but why bother? Life is short, and there are some easier options to try first.

FTP view of the php files that dreamhost has installed for you to make wordpress go

FTP view of the php files that dreamhost has installed for you to make wordpress go

For a start, you can modify wordpress’s behaviour with plugins, little bits of PHP code that the community has generously written and shared. How about we look for ones that give the blog handy map mashup functionality? I happen to know one of the geo mashup standards is called “GeoRSS”, so I’ll do search for that. Plugins are variable in quality, but the first one listed there looks alright:

i search for georss, i find too many options.

i search for georss, i find too many options.

From there it’s as simple as pressing the “install” button. Well, almost. this one uses google maps, so you have to sign on to google maps too:

signing on for a google maps API key is typical of the sorts of sign on you have to do to use third party services.

signing on for a google maps API key is typical of the sorts of sign on you have to do to use third party services.

After those steps, BAM, you now have a mapping-enabled blog:

cripes, a whole new bonus settings menu has appeared.

cripes, a whole new bonus settings menu has appeared.

Great. But you can also change the appearance of your blog. The visual equivalent of a plugin is a “theme”, a collection of CSS and code that changes the appearance of your blog. There are loads of community-contributed ones there too.

you can hunt "themes" the same way as hunting plugins

you can hunt "themes" the same way as hunting plugins

Of if you need to make finer changes, you can edit the CSS, or the code, that makes up your site by yourself:

The theme editor allows you to get at the CSS and HTML that makes up the site

The theme editor allows you to get at the CSS and HTML that makes up the site

Now, how about taking it further?

There are loads of interesting plugins – say if you want to integrate some other social networking sites that you are involved in, you could install  Lifestream

If you think giving your readers the ability to comment on the individual paragraphs of your blog, for example, there are plugins to enable that. There is an old system called comment press that makes an interesting case about why you might want to do that. Don’t install that, though, install the new version called digress.it.

Or if you wanted to use wordpress as a mashup engine, lots of things you might want to do don’t even need you to install plugins. For example, you could use the wordpress sidebar widgets to download and install new content from other sites (or from yahoo pipes, or from dapper) using rss… anyone care to walk us through that one?

And if you want to combine some of the other skills we’ve been learning with this… yes, jQuery, and CSS and all that stuff still work. jQuery ships with wordpress and it’s easy to enable. You can create scripts on a per-page basis or for every page in your site. You can also use the google-hosted version, as we’ve been doing in class. There’s a little trick, though – to enable the $() business to work like you’re used to, you have to write your javascript files like this:

jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function
});

There are some excellent tutorials out there on precisely this:

About these ads

0 Responses to “WordPress in miniature.”



  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





Follow

Get every new post delivered to your Inbox.

%d bloggers like this: