Jan 12
Speaking about WordPress as CMS at WordCamp Whistler – What do you want me to cover?
I am speaking at WordCamp Whistler on January 24th on the topic of using WordPress to create, design and manage “non-blog” web sites – in other words using WordPress as a CMS. If you follow this blog you know that I’ve been working with this concept for a long time and that in almost every case I use WordPress as a base for my client sites. There are many reasons for this, foremost that from a client perspective it is more user friendly than any of the other open-source CMSes out there. Add to that the almost infinite extensibility through plug-ins and other hacks and how easy it is to create custom themes and layouts and you have what in my view is the best backend solution for small and medium scale web projects.
In my original pitch I asked for a one hour session. But unbeknownst to me Tris Hussey (who is looking for your input on favourite plug-ins etc), another WordPress as CMS expert, had pitched almost the exact same topic to the event. Rather than pick sides and give one of us the full hour, it was decided that we would each get a 30 minute session so we both get our foot in and the attendees can get two different perspectives. Which is a great idea: This is by no means an exact science and while I’m sure Tris and my approaches compliment each other they will be vastly different. And that “double perspective” will give the listeners a far broader understanding of the subject matter than if one of us were to do the session by ourselves.
So what should I talk about?
With the reduced time comes the inevitable question: What should I talk about? Those who know me know that I will take up whatever time I am given and I’ll always have plenty more to say. In the case of WordPress as CMS I could probably hold a week long seminar and still only cover the basics of what you can do. In my original pitch I outlined a series of topics that form the foundation of this technique. These include basic WordPress anatomy, theme and CSS hacks, taxonomy, custom templates, custom themes and a discussion of why WordPress is the ideal platform for “regular” web sites.
I could talk at length on all of these topics but I think the attendees would be better served with a broader approach that covers the basics of several of them for further study later on.
What do you want to learn?
Rather than set my talk in stone right now, I’d like to hear from the people who are actually going to the event and let them shape the session. So what do you want me to talk about? What do you think you would have the most use of? WordPress anatomy? Custom fields as layout tools? Theme hacks? Taxonomy? The choice is yours. Here is a preliminary break down of the session and then I’ll let you, the listener, decide the final result:
Working Title: WordPress as CMS – Building the Non-Blog WordPress Site of the Future
Suggested topics covered:
WordPress Anatomy
What does WordPress really do? How does the stuff you create in the back-end end up on the pages and posts? What is the difference between posts, pages, indexes and all the other options? And how are these things connected?
The Basic Hack: Custom Templates
Want more control of the appearance of your pages? Custom templates give you complete control with minimum effort. Learn some basic theme hacks and understand the template structure.
Custom Fields Can Be Used for Anything!
One of the most powerfull and underused functions in WordPress is the Custom Fields. By understanding how they work you can use them as a layout tool to create menus, boxes and other elements that will make your site stand out.
Make the WordPress Taxonomy Work for You
The WordPress taxonomy (hierarchial structure, i.e. categories, sub categories etc) was built for blogging. But if you reframe your thinking of what blogging really is you’ll see that the same taxonomy combined with page parenting gives you a solid base for non-blog taxonomy and dynamic page creation.
That’s what I have. Now it’s up to you! Drop your thoughts in the comments below and together we’ll create a session customized to the people who are there to learn.
Dec 19
WordCamp Whistler Pitch: Moving Beyond the Blog – Building Web Sites with WordPress as the CMS
WordCamp is coming to the wonderful winter wonderland of Whistler on January 24th, 2009 and I’d like to throw my name in the hat of presenters and share some of what I’ve learned working with everyone’s favourite blogging platform WordPress as a full fledged CMS. Now I’m not part of what is considered the Vancouver blogging community and most of these people don’t know who I am or what I do so I figure instead of just sending the pitch off to the great unknown I’ll share it with the good readers of this blog for comments, questions and suggestions.
Session title: Moving Beyond the Blog – Building Web Sites with WordPress as the CMS
Alternate title: This is not a blog! Harnessing the Power of WordPress for Non-blog Websites
Alternate alternate title: Letting the Genie Out of the Bottle: WordPress is More than Reverse Chronological Posts
Session length: 30 minutes to 1 hour (1 hour preferred)
The Pitch:
It is well established that WordPress is a great blogging platform. But the capabilities of the application go way beyond merely outputting posts or articles in a reversed chronological order: WordPress is in fact a full fledged Content Management System (CMS) that beyond blogging can serve as the basis for pretty much any type of web site imaginable.
By understanding the anatomy of WordPress and how the different pieces go together and interact with each other you can create some truely spectacular sites that look nothing like the classic two-column blogs but still retain all the functionality, ease of use and SEO power that makes the application so popular.
The session will start off with a crash course in WordPress anatomy and how to quickly move beyond the standard templates through some simple theme hacks and CSS. Using the WordPress based sites for Sablok & Sablok and Bellevue Gallery (work in progress) as examples I will demonstrate how to use pages, posts and categories to create strong and functional taxonomies that make for easy navigation as well as management. The session will go on to cover how to use custom templates, conditional custom fields and template tags to create pretty much any layout you can imagine. And to wrap it all up; a brief discussion of why using WordPress as a CMS for “regular” web sites gives the site owner and end user a huge advantage over regular sites and how businesses can increase their web presence and findability by adding a news page or blog to their site and share some of their know-how with the public – for free.
So who is this Morten dude anyway?
I’ve been designing web sites for close to 10 years now but over the last two years WordPress has become the most imporatnt tool in my web design arsenal. In fact it is now the foundation upon which 80% of my business is built. I’ve learnt most of what I know about the application by reading and listening to the thoughts of others and experimenting with the code and now it’s time I give some of that aquired knowledge back. My blog Design is Philosophy features a series of tutorials and articles on how to customize WordPress to make it do what you want and I’m in the process of developing a free “God Theme” for WordPress that will give the user access to pretty much everything they need to create web sites using WordPress as the CMS.
Nov 05
Introducing Design is Philosophy
After finishing a series of projects long overdue I finally had a couple of days to sit down and redesign my much neglected blog. Over the summer I’ve jotted down ideas and sketches for this blog but I’ve never really had time to get down to work. At the same time I’ve been telling everyone and their dog about how well Expression Web works as a blog design tool and how well WordPress works as a CMS. So I figured it was about time I put everything together to demonstrate that there is reality behind all the talk. And after 3 days of hard work, here is the result: A WordPress blog designed from scratch in Expression Design and Expression Web 2. Get the whole story
Oct 02
New WordPress based site: The Reader’s Companion
In conjunction with the release of my new book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours I have created a Reader’s Companion site where the readers can download lesson files, dive deeper into the world of Expression Web through further reading, find relevant links and interact with other readers. The site is a custom WordPress installation with a highly customized theme designed from scratch using Expression Web 2.
In the coming weeks I’ll post a series of articles and tutorials demonstrating how you can customize this amazing CMS (yes, I don’t consider WordPress a mere “blogging platform” any more) to create advanced, attractive and easily manageable sites. For now, let’s just take a look at the highlights:
Valid XHTML and CSS
Those of you who have (or will) read my book will know this: I put a lot of importance on the whole issue of valid code (yes yes, I know… this blog has more errors than a Sarah Palin interview but in my defence I haven’t had time to clean it up because I’ve been too busy writing a book and tutorials) and since the site is a bit of a showcase for what I teach in the book it better fit the bill. So even though it is a WordPress site with a lot of customization, it validates 100%.
TIP: Amazon.com links don’t validate!
Not surprisingly the site contains a couple of direct links to the Amazon.com page for the book so people can buy it straight from the site. Unfortunately the crazy Amazon.com links do not validate. To ensure that the site would validate anyway I therefore used a redirect service called TinyURL to create a small (and valid) URL directly to the page. TinyURL even offers the ability to create custom URLs so instead of the long and cumbersome Amazon.com link the book on the left hand side of the page points to http://tinyurl.com/styexpressionweb2.
Fancy Sliding Doors Header Buttons with Invisible Text
The original idea for the site was to provide a place where people could download the lesson files for the book. For this reason the button leading to the lesson files should be large, prominent and working properly across all platforms and browsers including text-only browsers. At the same time I didn’t want standard HTML text to ruin the appearance of the site.
The standard solution to this problem would be to create an image-based button. But I don’t like image-based buttons. Fortunately there is an alternate (and in my view much cleaner and more attractive) solution: A Sliding Doors CSS button with invisible text.
Sliding Doors for Dummies
If you are not familiar with the Sliding Doors principle, here is a short explanation: Sliding Doors refers to the use of one background image containing two or more button states that slide in and out of view depending on user interaction. You can read more about Sliding Doors and how to use them at A List Apart.
The problem with CSS buttons is that they depend on pure HTML text to work. But as always there is a way around it through some clever abuse of the text-indent attribute: By setting the position of the button to absolute and the text-indent to some very high negative number (for example -9999), the browser moves the text so far off to the left of the screen that it will never be visible. And since the text is hidden with CSS, any text-only browser will still display the text where it is supposed to be.
There are two such buttons on the site: The home button on the left and the lesson files button on the right. They both work in exactly the same way.
Current Page Menu Highlighting
If you use the correct classes you can make WordPress highlight the current page menu items through CSS. If you let WordPress handle the main menu (or any menu for that matter) it assigns two types of classes to the items depending on where you are on the site: Each menu item is given a number through the page_item class and the current_ page_item class is also applied to the current page (you can also set this up manually through php if you don’t want WordPress to manage your menus). On the Reader’s Companion site it looks like this:
<div id="menu"> <ul> <li class="page_item current_page_item"><a href="http://expression.pinkandyellow.com">home</a></li> <li class="page_item page-item-9"><a title="Lesson Files" href="http://expression.pinkandyellow.com/lesson-files/">Lesson Files</a></li> <li class="page_item page-item-11"><a title="About the Author" href="http://expression.pinkandyellow.com/about-the-author/">About the Author</a></li> <li class="page_item page-item-13"><a title="FAQ" href="http://expression.pinkandyellow.com/faq/">FAQ</a></li> <li class="page_item page-item-15"><a title="Further Reading" href="http://expression.pinkandyellow.com/further-reading/">Further Reading</a></li> <li class="page_item page-item-17"><a title="Contact" href="http://expression.pinkandyellow.com/contact/">Contact</a></li> </ul> </div>
As a result, to highlight the current page in the menu all you have to do is create a dedicated style class called .current_page_item.
Custom Page Templates
Another great feature of WordPress is the ability to create custom page templates that are assigned to different pages. In the Reader’s Companion site you see this in effect in the difference between the front page and the other pages. The front page template includes a left hand bar that displays the date of each post while the other template fills the entire left hand area with the page body itself.
Creating a custom page template is a fairly simple operation: All you have to do is find the template you wish to base the new one on, make any changes you need and then insert the following block of code at the top of the page:
/* Template Name: Page with no Sidebar */
When the new template php file is uploaded to the relevant theme directory, it automatically shows up in the page write panel under the heading Page Template. From here you can choose your template from a drop-down menu.
Tutorials Coming – Questions Welcome
Like I said earlier I am working on a series of tutorials to demostrate exactly how these different elements come together and how you too can create advanced custom WordPress themes with Expression Web 2. In the meantime take a closer look at the site, read over the CSS and if you have any questions or comments drop me a line in the comments below.
