Categories
Tutorials WordPress

Build a fancy WordPress author box

If you have a WordPress site or blog with multiple authors it might be useful to create a custom author box for each of them so the readers can get more information about the author and see their other posts etc. This tutorial is an extension of my Fancy Profile or Author Box tutorial from a couple of weeks back that customizes the author box to work with WordPress.

The final result

The goal of this tutorial is to create an author box like the one you see at the top of this article. The box above is the actual output of the working code and as you can see it works quite well. The box is conditional and activated by a custom field so it will only appear when you want it to. The bio is the standard profile bio entered in the WordPress user profile area. The name is the chosen display name of the user and links to the author index for the author. The website link opens the user defined website in a new window. The Twitter link goes to the user Twitter profile. And finally the image is the user Gravatar. The Twitter link is a bit wonky – I’ll get back to that later.

If you don’t want to go through the entire tutorial and learn how this all fits together just jump to the bottom of the article and get the source code.

Building the code

We already have the baseline for the code, both HTML and CSS, from the Fancy Profile or Author Box tutorial but this is going to be a dynamic box so we need to replace the static content with WordPress functions.

Let’s start with the baseline code:

Retrieving the dynamic author elements

To generate the dynamic content we are going to use a set of standard WordPress functions. These have changed over the last year or so and as a result the ones featured in many older tutorials are now deprecated.

To get the author bio we use the_author_meta():


To get the author Gravatar we use a custom code block that gets the user email address and retrieves the correct Gravatar based on that address:


To display the author name as a link to the author index page we use the the_author_post_link(). It’s an all-in-one solution that outputs the name with the correct link attached:


For the links to the author website and Twitter account we use the_author_meta() again interspersed with some plain text. Note that you have to combine several functions to get the name displayed as well as the link created:

's website
Follow on Twitter

A caveat: The Twitter handle is a bit of a cheat!

If you look at the last line of the last code example you’ll see that for the Twitter name I’m actually calling the AIM value (AIM being America Online Messenger). This is because the standard WordPress profile page only asks for your e-mail, website, AIM, Yahoo IM and Jabber / Google Talk information. I wasn’t aware anyone was using AIM any more and I have a feeling this is a leftover from way back so I chose to use this field to output the Twitter handle because it has the least chance of anyone actually using it. There is a way to add Twitter and other handles properly but this requires the use of plugins – something I’m not a big fan of. If you’re interested there is some information on it in the WordPress Codex.

Putting it all together

Now that we have the source code and all the correct dynamic tags it’s time to put it all together. The end result (barring any changes you decided to make on your own) should look like this:

's website
Follow on Twitter

Making it conditional

If you cut and paste the code above into your page or post template it will appear in every page or post. Which I’m pretty sure is now what you want. To make it elective you need to make a conditional statement in the code. I do this by using Custom Fields, in this case a field with the name “author” and the value “true” or “false”:

ID, 'author', true))) { ?>
	

This small function asks “if this current post has a custom field with the name “author” that is set to “true”, do what I say”. That way your box will only appear if the custom field has been defined.

The final HTML/PHP markup

With the conditional statement in place the complete markup to be pasted into your theme file looks like this:

ID, 'author', true))) { ?>
	
's website
Follow on Twitter

Where to put the code

Like I said, this code has to be inserted into your theme files for the box to work. The easiest way to do this is actually to place it in a separate PHP file called something like “profile.php” and then call in from the theme files in question. That way you don’t have to edit the core theme files if you want to make a change to the box and adding it to new files means adding just one line of code.

If you placed this code (and only this code) in a file inside your theme called “profile.php” calling it from one of your core theme files is as easy as adding this one line of code:

/profile.php'); ?>

Where you insert it depends on where you want the box to appear in relation to your post content. If you want it to appear directly above you insert it before the the_content() function call. If you want it to appear after you insert it after and so on. Since you’re only inserting one line of code it’s easy to experiment and move it around for the best placement. And since the CSS is flexible width it will work properly pretty much regardless of the width of your post area.

The only thing to keep in mind is that the author box must be called from within the loop, otherwise it will not work.

The final CSS markup

The CSS markup for the author box is pretty much identical to the CSS in the original tutorial. I’ve just added some specifications to avoid conflicts. All you need to do is paste this into your styles.css file, get the blue background image file and place it in your theme image folder and make sure the call to the file has the correct image folder name.

/* AUTHOR BOX STYLES */

.profile {
	border: 1px solid #CCCCCC;
	position: relative;
}

.profileText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	padding: 10px;
	line-height: 1.4em;
	text-align: justify;
}

.profileStats {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	text-align: right;
}

.profileStats img {
	position: absolute;
	right: 0px;
	bottom: 0px;
}

.profileName {
	padding-bottom: 5px;
	padding-right: 92px;
	font-size: 1.2em;
	font-weight: bold;
	color: #2e4672;
}

.profileName a {
	color: #2e4672;
}

.profileName a:hover {
	color:#24375B;
	text-decoration: none;
}

.profileJob {
	font-size: 0.8em;
	padding-right: 92px;
	padding-top: 5px;
	background-image: url('{image folder}/testimonialBlue.gif'); /* Remember to set the correct image folder here */
	background-repeat: repeat-x;
	height: 45px;
	color: #FFFFFF;
	line-height: 18px;
}

.profileJob a {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}

/* END AUTHOR BOX STYLES */

That’s all there is to it. Have fun adding this box to your website or blog and customizing it to fit with your theme. And if you like, drop a comment below to show it off to the world.

Categories
CSS Expression Web News WordPress as CMS

WordPress as CMS – The Project

I’ve been talking about this for a while now and it’s time I got a little more specific. It is my contention that with some small tweaks, WordPress can be used as an excellent Content Management System (CMS) and used to serve small-scale business websites. This isn’t something revolutionary – a simple Google search on the words “WordPress” and “CMS” gives you many interesting entries – but I don’t think the full potential of this alternate use has been explored. So I’ve taken it upon myself to see just how much I can get out of this small little program and if it can be used to serve my many clients in a more effective manner.

Why WordPress

That’s the first question I get: “Why WordPress? What’s the point? Why don’t you just use a CMS like Joomla! or Drupal?” To answer the last question first, in most cases using Joomla! or Drupal is like trying to kill an ant with a tank. Not only is the tool way too big and wasteful to do the job, but chances are the ant slips between the belt threads and you don’t actually achieve your objective at all. These huge Open Source CMSes are excellent if you are building large-scale community based websites with multiple blogs etc etc but for small business applications they are often too large and cumbersome. What’s needed is a simple, easy to understand CMS that gives the client the ability to quickly edit, update and manage her website with the least ammount of hassle. Sure, you can build something like that yourself, but why bother when there is already an application that pretty much does what you want available for free?

There are a couple of other reasons why I want to tap the full potential of WordPress for this project: First off, WordPress has an extensive and growing library of plug-ins and ad-ons that make it a very powerful piece of software. Seccondly, blogs have become an excellent way of promoting yuour business by letting your clients interact with you on a semi-informal basis. And WordPress is a blogging platform. Nuff said. Thirdly (and maybe most importantly), WordPress blogs has an uncanny ability to get synced up with search engines like Google and MSN almost immediately upon being launched. Through a couple of very interesting experiments I’ve learned that the best way to get your website listed on Google is simply to build it on a WordPress platform. And if you are running a business, geting listed on Google can be the difference between being noticed and going under.

Project Outline

What is needed to make this work? One major hurdle used to be the ability to put the standard blog front page on a sub page. This used to require quite a bit of coding, but in WordPress 2.3 and above it’s actually built into the main setup.

The next big issue is to get out of the standard header, body, footer layout scheme that all WordPress themes are built on. Although this feature is unneccesary in most cases, I can think of a dozen scenarios where you want individually styled pages with their own CSS backend and right now, that’s not something you can do right out of the box. I’ve been theorizing about this problem for some time and the solution appeared most unexpectantly at a session at MIX08 where the presenter to save time ignored the whole WP theme and built an external page with the loop calls inside it. It was a bit of an aha moment for me that you don’t actually need to stick to the rigid frame of WP, and although it is technically not correct to do so, if it makes my life easier, to hell with correctness.

Another question is to what extent one can use the Custom Fields to make styling changes in pages. I’d like to experiment and see just how far I can push this feature.

Finally, is it possible to make a non-WordPress site utilizing the WordPress infrastructure and database? In other words, can I build completely separate pages outside of WordPress and then use the loop calls etc to insert the required info in such a way that the site can be managed from the regular Admin panel without the client having any access to the controlling files. This final question is the crucial one because in the end what is needed is a manageable CMS that gives the client unlimited access to the content but limited or external access to styling, layout and other important files so that nothing can be “broken” by mistake.

The Future

In the coming weeks I’ll be launching two sites built on a WordPress as CMS v0.1 platform (pretty much stragith WordPress with some heavily customized themes) and once these are done I’ll dive head first into a major hacking project to see just how deep the rabbit hole goes. With any luck I’ll have a fully operational and customizeable CMS to use as a base for my client sites before the summer. In the spirit of cooperation I have every intention of blogging about all my findings and sharing the code and hacks with the online community. I’ll also blog further on how to modify WordPress blogs using Expression Web to help bring some beauty to the blogosphere.

Categories
CSS Expression Web Tutorials

Designing a WordPress Blog Theme Using Expression Web

I’ve been working with Expression Web for about 6 months now and I’ve found that above all other things, what sets this program apart from the competition is it’s handling of CSS. More specifically how easy it is to not only write CSS from scratch but also to modify existing code for fantastic results. Case in point: The new look of this blog. If you’ve visited before you’ll notice that I recently upgraded it from the dull look of a standard WordPress blog to something altogether different. And what will (hopefully) surprise you is that once the design was conceived (which took some time) the actual coding only took a couple of hours! All this thanks to Expression Web and how it handles CSS code.

modify-style-box.jpg

People often ask me how to make their WordPress blog look great. In the past I’ve always told them that it’s a lengthy process and you really need to know a lot of code to get to where you want to be. That’s just not the case any more. I am willing to go as far as saying that with some basic training and a rudimentary understanding of html, anyone can make significant and functional changes to their blog using Expression Web without ever knowing what CSS is and how it works (this technique will work on any blog or other website that uses CSS btw.)Rather than just blabbering on and on about how great this program is for designing and re-designing blogs (and no, I’m not on the Microsoft payroll even though I’d like to be – hint hint people!) I’m going to show you just how easy it is to make changes to your blog by tweaking the CSS code with Expression Web.

DISCLAIMER: Although altering CSS code in Expression Web is very easy, it doesn’t mean that the end result will be very attractive. For that you need an eye for design. So even though you follow my instructions to the letter, there is no guarantee that your blog will look any better. I’m just giving you the tools: It’s your job to bring the creativity. Not everyone is a designer. Harsh, but true.

Step 1: Set up a blog with editable CSS

There are two main ways to set up a blog: You can get one for free at WordPress.com, Blogger.com or any number of other places. Just make sure you are free to edit the CSS through the service. I know Blogger.com allows you to do this, I’m not sure about the others. Or you can host one yourself. As far as I know, the most popular blogging software out there is WordPress, but there are others that work just as well. The good thing about WordPress is that it’s 100% free, constantly improved and that there are thousands of great plug-ins and other goodies to make it more interesting. The advantage of hosting a blog yourself is that you have complete control over the content and that you have your own domain name rather than something like myblog.wordpress.org.

Step 2: Design your blog visually

This is by far the most important and time consuming step. The only way to make your blog stand out visually is to make it look good. And the only way to make it look good is by having a great design concept. I can’t tell you how to do this; it’s like painting a picture or writing a poem – creative work defies explanation. What I usually do is I write down some words that describe what I want to convey in terms of emotion, “feel” and so on. Once I have a general idea I play around with colour combinations in Kuler and find something that fits. Then I look for inspiration and start sketching things out on paper. Finally I consolidate all my ideas into an actual image of what the final product should look like in a program like Expression Design. For this blog I used Adobe Illustrator, Adobe Photoshop and Expression Design to create the final graphical representation of the blog. If you want anything more than just simple boxes and colours, this step is vital.

Step 3: Find a theme that fits your vision

Blogs work on two planes: PHP on one side and CSS on the other. The PHP portion for the most part decides what content is displayed and the CSS side decides how this content is displayed. But the PHP portion also has an impact on how the content is displayed because it decides where different elements appear like if the sidebar should be on the left or the right, whether the menu is vertical or horizontal etc. If you intend to build your new blog from scratch and you don’t know PHP well, this can be a grueling process. Fortunately much of the work has already been done for you by others. (I have to tread lightly here because what I’m about to say might sound like blatant plagiarism.)

Rather than building your theme from scratch, try to find one that has the basic components you are looking for already laid out. In most cases one of the standard themes have everything you need and if not you are almost certain to find one that does. So rather than reinventing the wheel, you should build on the experience of others and focus on making things better. Just be warned: This is touchy territory. If you blatantly rip off someone else’s theme without giving them credit, you are in for a world of hurt. The line between borrowing and stealing code is very thin and you can easily step over without even knowing it. So to be safe it’s always a good idea to credit the creator of whatever basic theme you decide to build on.

Step 4: Understand the inner workings of your theme

div-boxes.jpgEvery theme is different. And if you want to reshape a theme to your vision you need to understand how it works first. In the past this process was a total nightmare, but with Expression Web it is incredibly simple:

  1. First off, if you haven’t already done so, set your blog up as a Site in Expression Web so you have access to all the files.
  2. Open your blog in your favourite web browser and display the source code. In FireFox you click Ctrl+U and a new code window opens.
  3. Copy the entire code and paste it in the code view of a new html file in Expression Web. Save the file in the root of your site as something. I like the name testBed.html but you can call it whatever you want.
  4. Find the CSS call in the html code and redirect it to the local file you will be altering. I usually set up a new theme folder with all the old theme files in them so that I can always revert back to the original CSS file if I mess things up really bad. It’s good insurance.

div-list.jpgNow you have complete access to your theme and it’s CSS and you are ready to understand exactly how it works. While in Design view you can now click on any element and see the complete list of divs and other elements that make this specific part of the blog look the way it does. You will also see all divs and other elements displayed as superimposed boxes showing how the content flows. That way you will immediately get a solid understanding not only of how the theme works but what you need to change to make it look the way you want.

Step 5: Start choppin’!

If you’ve decided to make a graphic-heavy blog, you need to “chop” your design into manageable pieces. To be more precise, you need to cut out all the elements you want to feature in your blog in such a way that they’ll fit inside the divs, tables or whatever other element you wish to display them on. Expression Design and it’s Crop Marks feature is excellent for this purpose. You can see how this is done in this video demo I posted last year. How exactly you chop your design is up to you – it all depends on the desired end result. I’ll post some examples in a separate article later.

Step 6: Re-styling the Style Sheet

drag-div.jpgThis is the fun part: Once you have your testbed set up and connected to a local CSS file, you can start messing around. There are several ways of doing this depending on what you want to achieve. If for instance you want to alter the width of your main content area, all you have to do is click on any object within that area, then find the div that controls the area you want to change in your top bar and finally resize it by moving the sides using your mouse. It couldn’t be easier.

manage-styles.jpgIf you don’t like the brute force approach you can fine tune the code using the Modify Style feature: First off, click on the element you want to change. The style that controls this element will automatically be highlighted in the Manage Styles tab. Right click on the style, select “Modify Style” and a window will pop up with all the different options for modifying the style. Now you have complete access to the style and you can change it in any way you want for immediate results.

Step 7: Watch your changes in real time

A great thing about this method is that as you change the CSS code, you can see the changes in real-time right inside Expression Web using the Design view. Any change made will immediately be visible and as a result you see right away if something isn’t exactly working out the way you planned. It also means that if you do things that are not allowed in CSS, you’ll see that it doesn’t work and you can find out what went wrong. If you want to you can also make changes directly in the style sheet and see the changes in real-time. As a result, your style coding process becomes much easier and more effective.

Step 8: Save your changes

When you work with style sheets in Expression Web, you are actually working in two documents simultaneously: When you make that initial change in the stylesheet link (step 4) you are actually opening the .css file for editing. And when you save your testbed, the program will ask you if you want to save the changes to the embedded file as well (that would be the style sheet).

save-embedded.jpg

That way you avoid forgetting to save your latest CSS alterations and the process is that much simpler.

Step 8: Upload, test and publish

Now all you have to do is upload the new CSS file and any related graphics, make whatever changes you want to the php code and your blog will have a new look.

Observations, tips and pitfalls

There are a couple of things you need to know about styling blogs. First off, all blogging software is different so the php code will vary greatly. If you are planning on making massive structural changes in the blog, you might want to take a very close look at the documentation. Secondly, blogs often work with separate pages. In WordPress you have three sets of views: the “index” view, the “Pages” view and the “single post” view. To fully restyle your blog you need to make changes to all these views. The easiest way to do this is to open each view in your browser, copy the source code into your testbed document and make changes on a view-by-view basis. That way you have all bases covered. Third, make backups! It’s easy to mess things up really bad if you are just experimenting, so when you have something you like, make a backup. That way you can always go back and fix whatever you broke. Fourth, Ctrl+Z only works in the document you are currently in. So if you make a CSS change in your testbed document and then hit Ctrl+Z or click “Undo”, the undo will only affect the testbed document and not the CSS document. To undo your latest blunder in the CSS document you have to have that one open. It’s easy to forget and can lead to some real hassles later on. Fifth, WordPress templates are full of errors to begin with. These normally consist of unclosed or excessive divs and will normally show up in Expression Web as yellow highlights. Take the time to fix these in the PHP code or you could get some really bizarre results in browsers you didn’t test. Finally, test in as many browsers as possible. CSS is notoriously complicated because all browsers handle it differently. But if you do things properly your blog will look the same in all environments. Unfortunately the only way of making sure is to test it in all browsers, even ones you don’t really use.

So there you have it. That is the rough outline of how I restyled this blog to make it look the way it does now. The same technique was used to restyle the Vancouver blog Dabbler.ca and several other blogs I’m currently working on. It’s fast, effective and functional. I am guessing that the Expression Web team is going to touch on the same techniques in their presentation at MIX08 later this week (but I could be wrong – there are probably better ways of doing this) and I am definitely going to be there to pick up some more tips and tricks.

I’ll be posting some code examples to give you an idea of exactly how this blog works later on. For now, design, experiment and have fun.