Building a Professional-Looking Website Using WordPress

Greeneville Dear Scientists,

You are probably tired of hearing me rant about the importance of building a research website; we scientists need them to help develop our brands and build relationships with our colleagues and other potential customers.  However, several of my colleagues have told me they wished they had websites, but they are daunted by the prospect of actually putting together a site.  Several of them have asked me for help with the mechanics of this process: how do you actually go about building a website to display your research on?

So in this article, I’d like to take a moment and answer this question the best I know how.  I’m going to tell you about my most recent experience building a website from scratch.  And that website is this website: www.marketingforscientists.com.

I built this "Marketing For Scientists" website using a tool called "WordPress"

My adventures in web programming started back in graduate school.  It was just becoming trendy for every scientist to have a website and the university provided us with free web hosting that we could tinker with. I remember all of the grad students in my program competing with each other over who had the coolest looking page.

Nowadays web programmers draw upon a long list of programming languages.  But when I was in graduate school, many of these tools, like Java, and CGI, and so on didn’t exist yet or weren’t as common.  All we had, more or less, was a simple language called HyperText Markup Language (HTML).

Rudimentary HTML takes only a few minutes to learn; here’s a little guide that can get you started.  When you want a new paragraph, you type <p>.  When you want a big font, you type <font size=5>, and so on.  So we all bought little HTML manuals, followed the directions, wrote little programs, save them with filenames like “home.html”, moved them to the proper directory in the department computers, and poof, we had webpages.  In short order, we were posting pictures of our pets and writing nerdy poetry in big blinking yellow text on black backgrounds.

But many years have passed since I left graduate school.  And it’s become a bit more complicated to make a suitable webpage, not because it’s harder to program one, but because the quality standards for web design are much higher now.  I wanted to build a “professional” looking site for Marketing for Scientists, and I knew I needed help.

So the first thing I did was ask around for website building tips.  I talked to my scientific colleagues who had cool looking sites.  I talked my friend Aaron Snow who is a professional web developer and used to work for Microsoft.  I was expecting that everyone I talked to would tell me a different story and give me different advice.  Instead, almost everyone pointed me in the same direction: a tool called WordPress.

WordPress is many things.  It’s software for creating webpages.   It’s a community of bloggers.   And it’s a free webhosting service.  I was bewildered at first by the many meanings of this name.   But here’s the deal.  WordPress makes it easy to build a variety of professional looking websites with real Web 2.0 features, like blogs, comment forms, and so on.   And after hearing everyone talk about WordPress this and that, I decided I had to learn how to use WordPress it even if it killed me; so that’s the direction I went in to build the site.

If you decide to build a WordPress site, you first have to decide if you are going to use WordPress’s hosting service or if you are going to use your own hosting service.   These two options are available at WordPress.com and WordPress.org respectively; Ongjin note the difference between dot com and dot org.  The first one, you can use for free.  The latter option offers more flexibility, at a cost of roughly $80-150 per year.

If you go with WordPress’s own hosting service, all you need to do is go to WordPress.com (dot com!) and click the “Get Started Here” button to sign up as a “blogger”.   WordPress.com calls all its sites “blogs”.  You don’t have to set your site up like a blog, though.  You can make it look like a regular static website if you want.  In any case, after entering in some information and making up a password, you’ll end up with a site, e.g., www.grad.e.student.wordpress.com and a WordPress administration page:  www.grad.e.student.wordpress.com/wp-admin.

But though you can get away with doing everything for free at WordPress.com, you probably won’t want to.  You’ll want to pay for the premium services that give you more options and get rid of the ads on your site.  That will probably run 50$ a year anyway.   Moreover, I heard some horror stories from people who wanted to grow beyond the options available at dot com, and tried to move their free sites over onto other hosting services.  I didn’t want that to ever happen to me.

So I decided to use a web hosting service.  For this option, all you need to do is find a webhosting service that supports the WordPress software.  There are several listed at http://wordpress.org/hosting/.  For example, a hosting service that WordPress is recommending right now is called bluehost.com.

Now, I was tempted for a moment to try to set up the hosting all by myself online.   I found myself caught in a morass of terminology I didn’t understand, going nowhere fast.  For example, WordPress.org has a big button labeled “Download WordPress”.  Do not bother clicking on it!  You don’t need that.

It’s much better at this point just to pick up the phone and call the host you want to work with.  For example, you can reach bluehost.com at 1 (888) 401-HOST.   Give the salesperson your credit card to set up your account (Bluehost.com offers free cancellation within 30 days, so there’s no risk here).  Then, while you’re on the phone with your new host, make them talk you through logging into your admin page and setting up WordPress.  For me, that meant clicking on one link and waiting a few seconds for the WordPress software to install itself on their server.  That was it.  When this process is done, you should have a website, let’s call I www.grad.e.student.com and a WordPress administration page: www.grad.e.student.com/wp-admin.   Now you can hang up the phone and go get some chocolate milk.

Screenshot of a WordPress admin page

Now, let’s talk about building your site using the wp-admin page.  This page is a beautiful thing.  It’s a user interface that lets you set up and control your site through a series of menus on a left hand sidebar.  In a few minutes, I figured out how to control all aspects of my site through this interface—you don’t need me to talk you through all of it.   But let me share with you a few experiences that I think will be helpful.

First of all, I was briefly alarmed to discover that as a default, WordPress puts a blog on your front page.  I was annoyed–I’d expected a more conventional “static” front page.  But then my fears subsided when I learned that I could turn this blog feature off by following these instructions.  

As you can tell, I decided not to turn the blog feature off.  I figured that even if you only post once every few months, blogging is a natural way keep your page up to date and keep it listed prominently in the search engines (i.e. Google).  You can update your blog right there on your wp-admin page by typing in a text box.  I decided to copy my blog posts from tumblr to the page and integrate them into the site.   To me it makes the page feel more dynamic.

Next, you will face the mind-expanding decision of which “theme” you would like to use for your website.  A WordPress theme is a series of files which are instructions for how to layout a website.  They are written in a language called Cascading Style Sheets or “CSS”.   Anyone can program her own theme.  But unless you are really gung-ho, you don’t need to delve into theme programming.

All you need to do is chose a theme from one of the hundreds available through WordPress, by clicking on the “Appearances” Menu on your wp-admin page and choosing “Theme”.  The exact sequence of button mashes and the exact list of themes you can choose from depends on your host.  But you should have a vast range of choices, ranging from elaborate themes that make your site look like a “magazine” to simple one-column black and white blogs.

When you are deciding on a theme, you can preview any one you wish by clicking the preview buttons.  Some themes come with colorful background images.  Others are meant to be more generic and flexible.  Some themes, the “premium” themes, cost a bit of money to use, usually between $40-$150.  But there are many elegant themes that come free.

I tend to find websites with too many columns and boxes daunting.  So I focused mostly on the “two-column” themes, as recommended by WordPress hacks.  I avoided themes with too many built in background images—those themes tend to make your site look like everyone else’s.  I also avoided themes with too many lines and dividers breaking up the page, so my visitors would focus on my content, not on the theme.  After peeking at the handy theme reviews on bestwpthemes.com, I eventually found a flexible theme from Pagelines that I adopted for the site.

Once you have chosen a theme and put up some text to play with, you’ll want to start thinking about graphics for your site.  I found that with many themes it sufficed to have just one image to create a personality for the site: a “banner” image, roughly 900 pixels across by 150 pixels tall.  I think it’s worth spending some time with Photoshop or another image-editing tool working on creating a nice banner that suits your personality and goals.

WordPress offers many additional options for customizing your site.  Besides providing a what-you-see-is-what-you-get editor, WordPress will allow you to edit the HTML code directly.  If you don’t know HTML, don’t worry.  By using the visual editor WordPress provides, you can probably even get by without it.

WordPress also offers “Widgets” that allow you to put little boxes on your page adding features like a Twitter feed or additional menus.   I used widgets to put up the menus and links that appear in the sidebar and footer of the page.  It’s self-explanatory.  But you can spend days experimenting with all the possibilities.

As a finishing touch for marketingforscientists.com, I wanted to tie the site in to as many social networks as possible.  So I put up “buttons” that users can click on to connect the site to Facebook, Linked-In and Twitter.  To add these buttons, you have to go grab some code and paste it into your page’s html.  You can get a Facebook like button here, a Linked-In share button here, and a Twitter button here.  Many other social networks and other sites offer buttons: Flicker, Digg, Tumblr etc.  The only caveat here is that adding more buttons can make your site take longer to load, and that in turn can hurt your search engine rankings.

That’s the story, folks.  Making the marketingforscientists website took me about two full days (not counting the time it took to come up with the content, of course).  But if you use these tips, I bet you could create something nice in just a few hours that would really serve your career well.   If you put up a CV and your contact info, some pictures of you at work, a short description of your research interests and links to some of your recent press, you’ll have a solid site that will help you define your personal brand and attract people to work with you and hire you.

Beyond that, I try to apply the general principles of marketing to any website I’m associated with.  There are lots of tips about what to put on your website, and what not to put on your website in the Marketing for Scientists book.  In particular, I concluded that the more you can post on your science website that will help your colleagues do their work, the better.  As I’m sure you know, some scientists have created whole careers by designing innovative, helpful websites.

I hope you’re finding this site to be helpful to you.  If you have any other suggestions that you think would help our fellow scientists build the perfect research website, please let me know, and I’ll try to help spread the word.

Best,

Marc