Last month a Houston lawyer in desperate need of an online presence contacted me. Her timeline was tight, her budget – like many entrepreneurs’ – was limited, and her knowledge of WordPress was nil. I did not want to throw away the opportunity to work with Melissa G. Martin, P.C. for a number of reasons, not least of which were the facts that she was referred to me by the University of Houston, took the time to completely fill me in on her project, and was so hands-off.  

But I was essentially between a rock and a hard place.  How would I provide my client with a simple, yet appealing design along with the capability to manage her own content, while at the same time honoring my own internal budget?  Enter CushyCMS, the WordPress developer’s dream solution for small business owners, smaller budgets, and impending deadlines.

The Story Behind CushyCMS

I signed up to CushyCMS last month during its beta period, shortly after the fledgling content management system gained massive online exposure.  An interesting side story is that while the service was only open via invite at the time, by simply watching the introduction video to CushyCMS, I was able to sign up using the invite code featured in the video.

CushyCMS appealed to me because of its versatility, ease of use, incredibly fast implementation time, and price.  The service is absolutely free, but Guy King, founder of CushyCMS, notified me in an email exchange that a paid option which will allow designers to use our own logos, colors and subdomains will be available very, very soon.

CushyCMS Is Versatile And Easy

One of the most amazing features of CushyCMS is that it allows developers to explicitly and easily define which portions of a website may be edited by a client. For the Law Office of Melissa G. Martin, P.C. project, the only sections of my client’s website that I wanted her touching were the main content blocks, as well as the photos.  

I worked long and hard to ensure that the navigation panel on Melissa’s website worked in every major browser, so it was important to me that that part of the website remained safe from accidental edits.  This is truly where CushyCMS shines.  By simply adding the cushycms class definition to any document object that I wanted Melissa to have control over, I was able to secure her website from unwanted editing errors while at the same time provide Melissa with a dreadfully simple method by which to make small or large content edits on her website.  It was truly as easy as that.

A Glance At The Control Panel of CushyCMS

For every website setup on the CushyCMS platform, designers have the option of choosing which pages will be editable to their clients.  Melissa needed control over every one of the seven pages on her website, so I added them all.

Now by simply clicking on the titles of each page, Melissa is able on the CushyCMS platform to edit the content of her website as if she were typing in a simple text editor.

I wish there were more to say about how easy it was to set up my client’s website using CushyCMS, but there really is not.  By defining editable page regions during the site building process, inviting my client to my CushyCMS panel as an editor, and giving Melissa a short tutorial on how to change the content on her website, I was able to skirt major budget and timeline issues on my end and also avoid headaches for Melissa when she decides in the future to change information on her new website.

The Bottom Line

It is said that it is difficult to teach an old dog new tricks, and in my case it’s true. I am extremely partial to WordPress for a million and one reasons, but sometimes it is overkill for a small project.  One of the most difficult aspects of running my business over the last few years has been coming up with cost-effective and time-effective solutions for small business owners with regard to having control over the content of their websites.  CushyCMS seriously bailed me out and I’m grateful that it appeared at the time that it did.

When the honeymoon is over between me and CushyCMS, I am sure that I will long for certain features, namely the following:

• The ability to brand my control panel (think Basecamp) (in the works)
• Domain branding (in the works)
• The option to turn off visual editing as the default (I prefer code views)
• The ability to add more information about my content editors and myself (phone number, address, etc.)
• Notifications via email when a content editor makes changes to their website
• The ability to turn off editing capability for case-by-case content blocks (for example, allowing my client to edit certain blocks while I have the ability to edit other blocks of content)

All of these enhancements to the CushyCMS system would make it that much better, but at the same time I realize that the reason I love it so much is due to its simplicity.  Ultimately, I’m thankful for the system that is available at the moment and I’m looking forward to the new branding options that are set to launch in the next few weeks.

Included in most WordPress blog posts is a timestamp which shows the date that an entry was published. If you scroll all the way down to the bottom of this entry, you’ll see a simple block of bold text that says “March 27, 2007″.

While this small date block suits my needs just perfectly for the time being, there may come a time when I decide that I want my post dates to be more attractive than the standard, run of the mill text that most browsers support.

The solution is quite simple, really. All we need to do is use any standard image format (GIF, JPG, PNG, etc.) with a little PHP and a modest level of patience.

The Setup

Setting up the date images is by far the most time consuming part of the entire process. You will need to decide how you want your dates displayed. Will they be uniform throughout? Will they be thematic with respect to the specific season? Your imagination is your greatest tool when setting up the dates. For the purposes of this tutorial, I have decided to go with a uniform font to be used year round.

You will need to create a folder inside of your theme’s folder and give it a name like “dates” or something that is easily recognizable when you need to make changes in the future.

Inside of your “dates” folder you will need to make three separate folders, one for each element of your post date – days, months, and years.

Here is an example of what the Days folder should look like:

Take care to name each file in accordance with its graphic. That is to say, the “01″ graphic should be named “01.gif”.

Here is an example of what the Months folder should look like:

January should be named “01.gif”, February should be named “02.gif”, and so on and so forth.

And finally, here is an example of what the Years folder should look like:

Make sure to name graphic for the year 2000 as “2000.gif”, and so on and so forth.

The Code

Now that we have all the dirty work out of the way, it’s time to put our PHP code into our WordPress template.

This following is more or less the structure of the code that you should be aiming for:

The DIV is optional, but I have included it to deal with things like spacing and the total width of my date block. The three key PHP components to pay attention to are the_time(’m'), the_time(’d'), and the_time(’Y'). This is where all of the action happens. If your image format is a format other than GIF, make the necessary changes.

Make sure that you have created a folder that houses all three date folders. I suggest this method because it makes locating your files a lot easier in the long run and future changes won’t be as painful.

Your final image output will look like the following:

This image will stay dynamic as your dates change and your WordPress blog will be the envy of all your friends.

I promise!

I’m sure that by now a number of you have heard of Tumblr, the up and coming tumblelog service created by the “smallish” web-development company Davidville. I first discovered Davidville, which is located in New York City, on CSS Mania. I didn’t pay too much attention to some of their work at the time, but I must say that Tumblr has my full attention.

In the words of Tumblr, tumblelogs are to scrapbooks what blogs are to journals. They are an extremely user-friendly way to rapidly deploy photos, quotes, links, conversation snippets, videos, and even regular blog-like posts.

Admittedly, my first reaction to hearing about Tumblr was something along the lines of, “Not another blogging company!” But after giving Tumblr a spin and setting up my own tumblelog in less time than it takes to sneeze, I can say with confidence that the Tumblr experience is absolutely nothing like the traditional blogging experience.

Tumblr v. Blogging

Before I go any further, I want to make a clear note that attempting to compare a service like Tumblr to a traditional blogging service like say, WordPress, would be moot.

Whereas blogs enable large repositories of useful content to be stored and shared, tumblelogs seem at first glance to be a minimalist’s approach to sharing one’s stream of consciousness.

Tumblelogs are the mallet while blogs are the jackhammer. Tumblr recognized this and created a service that traditional blogging platforms had previously not been able to effectively integrate into their systems. Heck, even the official Tumblr blog is run by WordPress, and for good reason. Tumblr is not a blogging platform, per se, so I won’t be treating it like one.

The Back End

You can post regular posts, photos, quotes, links, conversation snippets, and videos on Tumblr. Each element has its own method of posting, and they all take under a minute to go from typing to publishing.

Regular Post

In the Regular Post section, the only two fields that are editable are a Title field and and Body Field. There are no categories to manage or timestamps to worry about. Permalinks are automatically generated so pretty URLs are a no go.

Trackbacks and comments do not exist on Tumblr posts, so if you’re looking to foster a sense of community on a tumblelog, you need to stick with a traditional blogging platform. As I said before, Tumblr resembles a virtual scrapbook, so only having the Title and Body field for a Regular Post is just fine.

Photo

By clicking on the Photo pallet, you are taken to a very simple page that has an upload button (or you can use a remote URL if you like) and a caption field. It takes literally seconds to locate a local file, give it a caption, and then upload it. As it stands now, I don’t see any way to modify the dimensions of an uploaded file.

Quote

The quote section is by far my favorite section on Tumblr. The appearance of quotes are completely customizable, as is everything else, and all that you have to do is type in your quote and its source, and click “Create post”. Again, the entire process takes seconds.

Links, Conversation, and Video

In addition to regular posts, photos, and quotes, Tumblr also offers a simple link creator, conversation snippet generator, and video sharing area. Of these three features I was most impressed with the Video section, as it allows you to post both URL’s and raw embed tags from any video/flash website. The process is painless, painfully simple, and most importantly, super quick.

Tumblr Woos Designers And Developers

I believe that where Tumblr will succeed with the masses is in its simplicity. But where Tumblr will succeed with designers and front-end developers is in its customization area.

Tumblr comes with five tumblelog templates but allows users to completely modify the display of their Tumblr account by editing the XHTML/CSS code of the tumblelog.

What this means for front-end developers like me is that we can use the Tumblr architecture to create super simple websites for potential clients who are looking for a way to easily manage their online scrapbooks. Through the use of Tumblr template tags and customized CSS/XHTML, a fully functional, uniquely branded tumblelog can be created with a Tumblr account. Badass, I know.

And I didn’t even bring up the API.

Why Tumblr Will Kill The Competition

Simple. Because there is none. As I already stated, tumblelogs and blogs are like apples and oranges. Davidville saw the need for a platform like Tumblr and hopped on the idea. It will succeed because it takes very little time to go from typing to publishing.

End users want quick platforms that don’t have bells and whistles that they don’t need, and there are a great number of web users who just don’t need the additional functionality in traditional blogging platforms like WordPress.

In short, Tumblr succeeded in making the porridge just right, and I’ve got a feeling that they are about to take off into orbit really soon.

(Visit my Tumblr page!)

What all of those websites have in common is that they speak directly to me, a web developer. What they also have in common is that they read, at times, like Greek to the casual observer, who is, incidentally, the most important observer. Moms, pops, and potential clients alike are arguably the most important people when it comes to web development. Why? Because they are the reasons developers exist.

An Ode To The Flash Nut

The continued existence of web development is fueled by the needs of the consumer, the client-slash-opportunist, and the technologically unsavvy swagger jacker who demands that their band’s website has a five minute flash introduction about kittens. These people keep designers, developers, and programmers in business, and I heartily appreciate them for it.

Standards compliant (CSS/XHTML) web design has become such a hot topic that a number of my clients directly ask for table-less websites before I even bring up the topic of tables and why I only use them for tabular data. But the acronym “CSS” has not become as ubiquitous as the acronym “HTML”. I frequently get asked what CSS is and I almost always find myself one breath away from regurgitating some of the points made in the mission statement of the Web Standards Project.

Be Easy

The problem with this approach is that people don’t want to hear textbook explanations of difficult concepts like semantic markup and why it matters. They need simple answers to difficult questions in a short amount of time. With that frame of thought in mind, I use five answers with potential clients when I am asked why CSS, or table-less layout is so important.

Depending on the client and their needs, I may or may not exclude one of the following answers to the question: What is CSS and why do I need it?

CSS Helps The Blind

“The reason you need CSS, Madame, is because without it, a lot of your disabled customers wouldn’t be able to access your online information.”

There’s a reason business officials are such sticklers for requiring wheelchair ramps at major venues or businesses. They know that nothing says “dickish” more than limiting the opportunities for disabled people to have a good time like their able-bodied counterparts. From a developer’s standpoint, mentioning the visually disabled when discussing the layout of a client’s website is a surefire way to help them see past CSS as simply a means to make things look shiny.

On a humorous side note, the website for the Society for the Blind fails validation miserably and is table-based.

CSS Will Make You Money

“Sir, I’d be more than happy to go into the details, but for the moment understand this: by using CSS you will rank better with Google, get your message out to lots more people, and bring in way more business.”

Little says “Giddy Up” like the prospect of making money to a potential client. The reason they have hired you to design their website is because they believe that their presence on the web will translate into real world earnings. Where they fall short in their understanding of the web is that they believe all websites, at their inception, are created equal.

This is simply not the case. Cleaner, semantic code that separates presentation from content is more valuable than a designer’s portfolio that was built purely on sliced image tables. Tell your potential clients that CSS will make them money and you will have their ears.

CSS Will Save You Money

“Ma’am, you have mentioned that your long term budget is limited. CSS will save you tons of money in the long run. What were previously hours of website changes can with CSS be minutes, or even seconds, of website code tweaks. You won’t have to spend a lot on future website maintenance.”

Making money is fun but saving money can be even more fun. If I’m lying, then why do we love the value menu at Wendy’s so much?

You’ve got 10,000 pages of content and want to change the size of your headers from 10pt to 12pt. Imagine having to drop a wad of cash on a website developer to have to go in and make FONT changes on all of those pages or any other page-specific changes that could have been controlled with CSS. Bottom line: CSS can save you hundreds, if not thousands, of dollars on future website upgrades and maintenance.

CSS Enables Your Company To Be Forward Thinking

“Sir, you’ve just told me how important longevity is to your business. The World Wide Web changes ultra-fast and browser capabilities change even faster. CSS will insulate and protect your website from becoming rapidly outdated.”

CSS has just begun picking up steam on the tongues of casual web goers and potential clients alike. To be sure, CSS is not new, but (as I stated before) the acronym “CSS” is not nearly as ubiquitous as the acronym “HTML”. If you can convince a potential client that CSS will carry them throughout the next decade without too many headaches, why wouldn’t they want to go with CSS?

And, as far as “forward thinking” goes, what business doesn’t want to be the cool kid on the block that has all its ducks lined in a row for painless future growth?

CSS Creates Visually Stunning Websites

“Ma’am, with the exception of a few, more expensive technologies, there is absolutely nothing better or more cost-effective than CSS for creating a website that serves up a stunning visual experience.”

I don’t care who you are, what you do, what kind of music you listen to, or what kind of clothes you wear. You like being told that you’re beautiful, and you like having beautiful things associated with you. And the same applies with websites.

Although this answer is a bit of a “gimme”, it’s one of the most powerful answers that you can give to a potential client. The appeal of CSS is not simply about making text bold, red, or italicized. It is about getting a design to do things that regular tables just cannot do.

Before I knew much about CSS, I used to spend hours on CSS Zen Garden scratching my head and thinking “How’d they do that?!?!” Show a potential client that website or any variation of that website and say “This cannot be done without CSS.” You shouldn’t have to wait more than a millisecond to hear “I’m in!”

Final Thoughts

Keep in mind that these answers work well with people who have had limited to no exposure with CSS. They need simple answers to complex questions and getting into the Nitty Gritty of CSS will tune them out, fast and hard. They don’t even need to know what the acronym CSS stands for or how it ties in with (X)HTML. All they need to know is that CSS creates accessible websites that are cost effective, revenue generating, a step ahead of the game, and absolutely beautiful.

And you don’t even have to say the phrase “Cascading Style Sheets” when giving any of these answers. Isn’t that nice?

The benefits of massive traffic increases are obvious. Monetary rewards via online ads come to mind, as well as better page rankings in search engines that translate into organic longevity. However, the problem with many self-hosted WordPress websites is that they go down fast and hard after a sudden bolt of online traffic.

A Bit of Background

While the WordPress plugin WP-Cache acts as a part safety net, part savior to many WordPress-driven blogs on the internet (mine included), the possibility still exists that one day your blog will not be able to handle the load of online traffic that it receives in a short period of time.

WordPress depends on a successful connection between its PHP template functions and your MySQL database. When that connection cannot be established, this is what visitors see:

There is an obvious stress involved with waiting for a healthy connection to be restored between WordPress and your MySQL database. But what often gets overlooked is the ugliness of WordPress’ database connection error page when it is juxtaposed alongside your otherwise seamless blog theme.

Many casual visitors to WordPress blogs have never even heard of WordPress. Imagine their confusion if a huge WordPress logo accompanied by an error message were to pop up on their desktop monitors.

I may not be able to bulletproof your WordPress/MySQL harmony quotient, but I can offer a more attractive alternative to WordPress’ error page if your website cannot handle getting Dugg, Reddited, Slashdotted, or Farked.

What ControlsThe Error Page

The WordPress include file that controls the output of the database error message is located in the ‘wp-includes’ folder. It is called ‘wp-db.php’. The following is a screenshot of the location of the error code in ‘wp-db.php’:

Further down in the ‘wp-db.php’ file is the snippet of code that tells WordPress to output its error message in the event of a database connection failure. We will be modifying this area of the file. I have included a screenshot below:

The Solution

When I began seeking an easy and minimally intrusive way for creating a customized WordPress error page, I stumbled upon this gem of a How-To at All Forces. Their approach involves using the PHP command include(). For my purposes, this approach fell a bit short but in its entirety directed me towards another solution that I feel is just as effective, if not better.

I will be using the PHP header() command to completely redirect users to a separate, custom error page on my website. This approach allows me to implement some very small CSS tweeks on my error page and keep everything organized in a suitable fashion for my taste.

Step One

The first step that you will need to complete before even touching your ‘wp-db.php’ file is to create a custom error page. I will leave this up to you. You may decide to keep your error page in line with the theme of your WordPress blog, but I suggest that you err on the side of caution when doing so.

WordPress database connection errors that come as a result of a massive influx of blog traffic mean that your website is probably outputting a ton of its allocated monthly bandwidth. I am on a (gs) Grid Server package by Media Temple and enjoy a hefty amount of bandwidth, but even so, I don’t want to throw any unnecessary bytes away. It is for this reason that I endorse a minimalist approach to your WordPress database error page.

After creating your error page, place it anywhere you like on your web server. I have decided to place my error page under the root directory of www.bigsquaredot.com to keep everything organized the way that I like it. Any location is fine, really.

Step Two

The second step is to insert a few lines of code above the ‘if ( !this->show_errors )’ PHP conditional statement in the ‘wp-db.php’ file to redirect your users to the custom error page that you have created (click here to view the error page that I have created).

The first two lines of code are the work of Melvin Rivera of All Forces. The first line documents the actual error that occurs if your database connection error page is called, while the second line sends an email to you if your blog connection ceases to run properly.

The third line of code redirects the visitor to your customized WordPress ‘error establishing a database connection’ page. The reason I am using this method and not the include() command is because images called by my CSS code did not display while using the include() command.

The Third And Final Step

The third step is to temporarily rename your database field value in the ‘wp-config.php’ file (located in your blog’s root directory) to see if your modifications are working properly. I suggest either doing this on a locally installed copy of WordPress on your computer or waiting until it is very late at night when very few visitors are coming to your website.

Conclusion

Ultimately, outside of WP-Cache you can do little to control a complete tidal wave of traffic to your blog. In the event that your WordPress blog faces hit after hit of traffic and your MySQL database cannot keep up, you will want to create a customized error page.

For the sake of your visitors and the seamless appearance of your website, make these very small alterations to your ‘wp-db.php’ file and create a snazzy error page that contains more valuable information to your visitors than ‘error establishing a database connection’, care of WordPress.

Over the course of the last month, I have been working on the development of a wiki for the Viet Nam Literature Project. My primary tasks for this particular assignment were the installation and customization of a Wikipedia-style wiki for vietnamlit.org.

There was a minimal amount of design work involved. In addition to a custom wiki logo (above) that was reworked from a pre-existing site logo, the only other design work that I did for the wiki dealt with the CSS layout and customization of the main page, which you can see by visiting the Wikivietlit website. Everything is being powered by MediaWiki.

The Viet Nam Literature Project

This, from the website description:

The Viet Nam Literature Project promotes Vietnamese literature in English translation, when necessary, in America and to the world. VNLP does this to help teachers, students and readers understand the social realities of the nation that has played so great a role in the life of the modern world and to develop Vietnamese literature as a field of study in the United States. VNLP further supports the freedom and influence of Vietnamese writers by working for their public recognition.

You can read more about the Viet Nam Literature Project by visiting their website at www.vietnamlit.org.

It was nearly two weeks ago that I made the decision to purchase a hosting package from Media Temple for my new business, (the) Big Square Dot. As an up and coming web coder-slash-designer, it was extremely important to me that my business be hosted with a company that has a great reputation with web designers. Indeed, reason number 8 on Media Temple’s “Why? Ten Resons” page states that:

The world’s hottest, most talented designers have trusted (mt) for years to serve their digital creations. Being the most critical demographic on the Internet, we believe this has strong merit.

My train of thought when determining which hosting company to go with was that if Media Temple can be trusted by so many great web designers and design companies, then my modest, one man show would have no problems. Boy was I wrong.

Last Friday my website was featured on CSS Mania and remained on the front page for the better part of the weekend. “Great!” I thought, “The site’s been up for only a week and already my submissions to CSS galleries are paying off!”

There was one little problem, though. My website kept going down intermittently throughout the day, which means that the legitimacy of my newly founded business was suffering. I was losing potential designer-friends, clients, and exposure because of Media Temple’s (gs) Grid-Server problems.

Come to think of it, earlier that week, just minutes after I had emailed friends and potential clients and released a note on another website I run, my website went down for thirty minutes. I was livid, but I decided to give Media Temple the benefit of the doubt.

But today, just two weeks after opening an account with Media Temple, my patience is wearing thin.

I have been dealing with website outages all day today. For a person who just purchased a hosting package that includes “hundreds of servers for the price of one”, I’m pretty curious as to why my website has been operating like it’s on one half of one server for the last several days.

Now, I do not mean to vilify Media Temple. The administrative freedom I have with the (gs) package, as well as the sleek GUI of my webmail and account center are impressive, to say the least.

But the parts of my hosting package which matter the most — reliability, uptime, customer service, and prompt replies to my trouble tickets — are lacking, to say the least.

Last week, I was having trouble externally connecting to my WordPress database to do routine maintenance on it. I submitted a trouble ticket that took over 12 hours to get answered, and this was after I had to make a phone call to bring it to Media Temple’s attention that I had submitted my yet answered trouble ticket. I am still having problems externally connecting to my database — and yes, my settings are correct.

Big Square Dot is a brand new company and all I need is a reliable hosting solution that stays up for the time that I have paid for. I could have easily gone with a less reputable hosting company, but I trusted Media Temple because so many other web designers and technology websites are using them.

My life is my work right now. I am a recent college graduate who is attempting to sprint his way into the web development world, and this cannot happen if I have a host that injures my credibility as a web designer, programmer, and frequent blogger.

Again, I do not mean to vilify Media Temple. I simply wish to explain the frequent outages of this new website to you all and let you know that I will do my best to keep things running smoothly around here. I am doing my part; I just wish Media Temple would do theirs right now.

Last week I brought to you a post on how to add a WordPress Mini-Loop to your static front page. I didn’t realize it at the time, but after some thought, I must say that there were some serious problems with that solution. For starters, the static front page of Big Square Dot was running noticeably slower after implementing the Mini-Loop. Secondly, and most importantly, I could not use the WP-Cache plugin with the above code.

I knew there had to be a better way of including part of my WordPress blog on my static front page, and today it struck me. “Instead of calling on WordPress template tags to execute very simple PHP/MySQL functions on my front page,” I told myself, “I should treat my WordPress database like what it is: a database!”

A Recap of the Problem

My problem was as follows: I needed a way to include the latest post from my WordPress blog on my static front page, which is in no way related to my WordPress installation directory. I did not want to use anything other than standard ol’ PHP/MySQL to connect to my WordPress database, gather information, and then output it onto my front page. I would need the date of the latest entry, the title and permalink of the latest entry, and the excerpt of my latest entry.

The Solution to the Problem

I’m going to keep this pretty cut-and-dry. If you guys and gals have any questions, leave your comments and I will see to it that they get answered. Before I start, I would like to reiterate that the following solution should work on any page outside of your WordPress installation directory. The only thing that is involved is PHP/MySQL and your WordPress database. No template tags are needed.

First, we will configure our website database connection, connect to the database, and then select our WordPress database.

Next, we will output our latest post from the WordPress database, showing the date, headline as a link, and excerpt of the post after getting our data.

Finally, we will free our memory and close off our WordPress database connection.

Download the Source Code

It will make things a lot easier on your eyes if you download the source code (.txt format) and view it in Dreamweaver or a comparable application.

Study the code and you’ll see that it’s easy to change things around. You can include more than one post on a static page by altering the $howmany variable in the script and you don’t have to worry about dealing with WordPress template tags. Just make sure that you fill in your optional excerpt box for each post and everything will go smoothly.

Also, make sure that you configure the script properly. In your WordPress wp-config.php file there will be all the variables you need to properly configure your database connection if you have forgotten the settings.

Let me know if you have any questions and I will do my best to answer them. Keep in mind that I am a novice when it comes to PHP/MySQL so be gentle!

Now, unless any of you are operating your own gossip websites, I highly doubt that you will need loud and obnoxious graphics taking up a third of your images. But what you will need is a way to tweak your product photos or travel photos in such a way as to give them their own lives. Why? It’s all about branding.

The Importance of Branding

If you would spend an hour, or even two, writing up a brilliant blog entry to be read by the masses, then why wouldn’t you spend an extra fifteen minutes or less applying a signature to those one-of-a-kind images of yours that will also be seen by the masses? These “signatures” can be extremely simple accents on an otherwise attractive photo and add some “Umph!” behind an otherwise monochromatic blog entry.

Any successful business person will tell you that product branding is as important as the product itself. When we become used to seeing certain imagery on the television screen or computer monitor, the products that are placed in those images enter into our collective subconscious. Don’t get me wrong, I am not suggesting that a heap of cow manure can pass itself off as a diamond ring simply because it is in a pretty box. What I am suggesting is that smart companies cover all of their bases and images, as we all know, are worth many words.

The Importance of Image Layout

In addition to branding, the layout of your images matters tremendously. While the Rule of Thirds gives us a great jumping off point towards taking wonderful photos, my so-called “Rule of Image/Text Uniformity” governs how I place images inside of a blog entry. Before ever uploading my first usable photo in the Big Square Blog, I created a 450 pixel by 225 pixel image template. This template aids me by providing me with a method to create consistent blog entry photos which have the exact same width dimensions.

Of course, I can adjust for height when the need strikes, but I will always use uniform image widths on this blog. Why? For starters, image layout consistency makes reading websites easier. Secondly, it is a bit of a pet peeve of mine when I am reading a blog entry and the accompanying images seem thrown onto the page without any real forethought. Image layout matters.

A Final Thought

I steadfastly believe that content rules when it comes to websites, but the right kind of imagery doesn’t hurt. If you own a business and are trying to establish an identifiable, unique web presence, why stop at the business logo? Develop ways to incorporate your website’s style into each of its elements and immediately you will gain some legitimacy with visitors and potential clients. Website end-users want to know that your product is a professional product. Other than the pure service experience of it all, what better way to impress your future customers than with a professional look that shows you have paid attention to even the tiniest little details?

A Tiny Note: Of course I am not advocating for the complete annihilation of beautiful photos. Use your discretion wisely, and know when the right time to accent your images is.

“I was wondering if you could take that big white “W” off of the login and register pages?” your client asks. “Everything else looks great but maybe you could replace that “W” with my business logo or something else instead.?”

The Big White “W”

As all of you are aware, the big white W is in fact WordPress’ logo. When users attempt to login or register with your website, this is what they normally see in their browser:

(I am using WordPress version 2.1.2 as a working example.)

Furthermore, if a user clicks on the WordPress logo, she is taken to www.wordpress.org. In addition to requesting that you change the W, maybe your client also asks for you to redirect users to her website main page if a user clicks on the new logo that has replaced the W. We’ll get to this a little bit later.

Where is the W?

The file that runs the login, register, and lost password pages is called ‘wp-login.php’. It is located in the root directory of your WordPress installation. The images that appear on the aforementioned pages are located in a directory called ‘images’ (located in the ‘wp-admin’ subdirectory).

The two images that control the display of your login splash are called ‘login-bkg-tile.gif’ and ‘login-bkg-bottom.gif’, which are both located in the ‘images’ directory. For the purposes of this tutorial, I will stick with the current color scheme of the login area and primarily deal with the ‘login-bkg-tile.gif’ file.

Use a Template

I Photoshopped the original ‘login-bkg-tile.gif’ file and created a reusable template with which to create login splashes for clients. (View the template).

After creating my new login image, I replaced the old ‘login-bkg-tile.gif’ with my new splash and this was the end result.

Take It Further With A Message

If you do regular maintenance for your client, you may want to let him know that important site messages can also be displayed inside of the login/register area.

Locate line number 24 in your ‘wp-login.php’ file and look for a variable called ‘$message’. This is what the default code looks like:

Insert your special message inside of the $message field and you’re good to go.

Take note: Make sure that your message is inside of a paragraph block with the CSS class ‘message’. Take a look at the following code to get an idea of how to insert messages in your login splash.

After modifying the $message field and saving all of your changes, this is what your final product will look like:

Change The Logo URL

In order to change your logo’s URL, you need to locate line number 49 in the ‘wp-login.php’ file. Replace www.wordpress.org with whatever domain you like, and whenever a registered user clicks on your logo, they will be redirected to wherever you want them to go.

Use Your Imagination

The ‘wp-login.php’ page is just like any other normal page. You can dress it up however you like but keep in mind that if your client is not proficient with website code, you will want to keep things as simple as possible, which is why I decided to make minor changes to the login splash. You can do whatever you like, really. Change up the colors, integrate the login page seamlessly into your website, or do whatever else comes to mind. Happy skinning!

In the event that a guest author is generous enough to contribute to your blog, it is imperative that you show some love to them and provide a link back to their website (if they have one). Over time, with enough guest bloggers who may or may not have their own website, you will want to develop a system to manage the display and accuracy of the outgoing links to the other writers’ web domains.

“Well, that’s simple,” you say. “I’m just going to employ the get_the_url() WordPress template tag and all will be grand!” Not so fast, buddy!

The Problem

If a WordPress author does not have a website, one would think that the “URL� field in WordPress’ User Profile area would be blank. Unfortunately, this is not the case.

Every author who does not have their own URL is assigned the value ‘http://’ in their profile. This becomes problematic when trying to automate the conditional output of a writer’s website based on the value of their User Profile URL in the WordPress administrative area.

To illustrate this point further, take notice of what happens when the following lines of code are used to automate the process of including a guest blogger’s URL at the top or bottom of their entry.

(Note: There is a bit of PHP redundancy here to clearly identify each WordPress template tag that is being used.)

As you can see, the above code doesn’t work for authors who do not have their own website. The ‘get_author_url()’ template tag outputs the value ‘http://’ and gives the illusion that an author who does not have a URL does in fact have a website. The above bit of code produces an ugly set of broken links for your crew of guest bloggers who are not fortunate enough to have their own website.

The Fix

In order to properly display hyperlinks if a guest author does indeed have a website or display plain text if she does not have a URL, you will need to use the following lines of code in your WordPress theme:

You can also download this code snippet (.txt format).

The PHP variable ‘$a’ is a temporary placeholder for the author URL. The above PHP code checks to see if the value of $a is equal to ‘http://’, and if it is, displays only the author name. If the guest author does in fact have their own URL, it will be properly displayed.

The End Result

After you have implemented the above code in your WordPress blog, you will have no more problems with broken author links in the event that a guest blogger does not have their own URL. Guest bloggers who do have their own websites will get the proper attribution that they deserve, and those without their own websites will simply have their names displayed (no broken link included).

Now all you have to do is invite your buds along for the ride and worry no more about who does or who does not have their own domain!

The solution that I came up with involves creating a folder for author photos inside of the ‘wp-content’ directory and using the the_author_nickname() template tag within an IMG tag to automatically output photos whenever an author publishes an entry. The following is an example of the code that I use to make this happen:

(Where [width] and [height] are the dimensions of the author photos. These must be uniform widths and heights.)

The Setup

Using your favorite FTP client, create a folder inside of the ‘wp-content’ directory that is titled ‘author_photos’.

The ‘author_photos’ folder will contain every author photo that your blog requires. It is essential that the image format you use for each author photo remains consistent with the other images in the folder. You can name the photos whatever you like; a suggestion that I make is to name each author photo in a ‘lastname_firstname’ format so that individual photos are easy to locate when you need to update or delete a user from your editorial group.

Author Photo Name = Nickname

This is a very important step. In the WordPress “Profile and Personal Options” area there is a field that allows each user to type in a nickname. For each author, the name that will be entered into the “Nickname” field must be exactly the name of the author photo image, sans the file extension. Here is an example to give you an idea of what I am talking about:

In this example, we place an author photo inside of the ‘author_photos’ folder called ‘doe_jane.gif’ and we also enter in the phrase ‘doe_jane’ into the “Nickname” portion of the user profile. By syncing the “Nickname” field with the author photo filename, our WordPress template tag can properly retrieve the correct author photo for each post that is published in a multi-user blogging platform.

The Code

Once again, here is the code that achieves the effect we are going for:

Until the developers at WordPress come up with another way to manage multiple author photos, the above solution should work just fine. Because there are already predefined WordPress template tags for the first and last names of each user, the nickname field can become somewhat of a free for all to fit whatever additional needs that you may have when it comes to online publishing. Enjoy!

Chris Pearson has a handy tutorial on his website for how to achieve this effect. While it produces the look that I was going for, it wasn’t exactly the way I wanted to go about generating random header images for the Big Square Blog. Chris’ method involves the implementation of PHP code within an image tag, which means that even CSS-incompatible web browsers and printers can view or print out each of his random header images.

Because I wanted to exclude every single website image that is unrelated to each of my blog entries from CSS-incompatible browsers and printers, Chris’ method of placing an image within his WordPress header file falls a bit short for my needs. However, he did inspire me towards another method that takes advantage of DIV tags and the same line of PHP code that he uses on his website. What follows is the How-To.

The Setup

Take any number of images that you desire to be included into your random header and give them all a common name, similar to the way I have set my images up:

• sub_header_1.jpg
• sub_header_2.jpg
• sub_header_3.jpg
• sub_header_4.jpg
• sub_header_5.jpg

You can use PNG or GIF files if you like, but make sure that the image formats and filenames stay consistent. What we will be randomly selecting is a header DIV based on the numbers 1 through 5 with our snippet of PHP code.

Place your header DIV

The random header DIV that I have created for the Big Square Blog includes a short description about me and my blog. If my header were to have only one image, it would look something like the following:

The CSS for my sub-header is as follows:

In effect, the above code produces a nice static header image that only displays in CSS-compatible web browsers and is excluded from everything else. Now let’s make it more exciting.

Making The DIV Random

To create a random header using CSS and PHP, we need to create five separate DIVs which have identical names but different numbers attached to the end of them. For example:

• div#sub_header_1
• div#sub_header_2
• div#sub_header_3
• div#sub_header_4
• div#sub_header_5

Depending on your website layout, you may want to modify the height and width of each DIV. The greatest part about my method is that each DIV can have different dimensions associated with it and everything will still work smoothly. Hello flexibility!

The snippet of PHP code that we will be using selects a random number from a predefined range of numbers and outputs it as normal HTML. It is as follows:

What this bit of code does is select a number between 1 and 5 and output it to a webpage as normal text. The values that can be printed from the above code are 1, 2, 3, 4, and 5.

Tying It All Together

In order to make our static header DIV random, we will tie in our PHP code with our original static sub-header DIV. This is what it looks like:

Voila!

What this tiny bit of powerful CSS and PHP do is make a random header image possible without having to worry about random header images being displayed in CSS-incompatible browsers or printers. It is similar to Chris Pearsons’ method but this time around it uses the DIV tag and not an image tag, which I only want to use inside of blog entries.

Try this code on for size and I am sure you’ll like it. It’s an excellent way to spice up your website without fooling around with image tag attributes. Hop to it!

When I decided to make Big Square Dot a part static, part dynamic website, I was at a loss as to how I would go about incorporating my latest blog entry into the home page of Big Square Dot. I did not want to install WordPress into the root directory of www.bigsquaredot.com because I am all about organization and don’t much enjoy the sight of ‘wp-’ files littering my domain’s root folder.

What I did want was a simple way to include the date, headline, and excerpt of the latest entry from the Big Square Blog into the Big Square Dot main page, which is mostly static.

Enter Wordpress’ Mini-Loop and a little bit of trial and error.

The Setup

The WordPress Codex currently has a section up on adding a Mini-Loop to a static front page, but for my purposes, it was incomplete. The Mini-Loop tutorial only gives the code markup for how to include headlines of the latest blog posts on a static page, but I needed more, like the post date and the excerpt.

Before WordPress code can be executed on any static page, the following lines of PHP must be included in the header, above the body start tag.

Note: There should not be a space in ‘wp-blog-header’.

Simple enough. This code will allow the execution of WordPress template tags (like the_date_xml(), etc.) on static pages. Because the only portion of my WordPress blog that I wanted to include on the Big Square Dot homepage was the latest post, I did not opt to include my blog header or sidebar into the static page, but this is also an option.

The Code

The original code to include post titles onto a static home page is located at the WordPress Codex repository.

I knew that I would need the post title, post date, and excerpt on the Big Square Dot homepage, but I also knew that I would not be able to use some of the more common WordPress template tags because I would not be employing the use of The Loop. After examining my WordPress database and adding some code to the original Mini-Loop, this is what I came up with:

Note: There should not be a space in ‘wp-config’ or ‘post_date’. Note that the vertical line breaks are just for the sake of code visualization.

You can download this code (.txt version) to get a clearer look at how the code works on my homepage: WordPress Mini-Loop Code.

Important Notes

I have not tested this code out extensively with more than one post on the front page. In fact, one of the reasons that I decided to use this loop for one entry only was because setting the $how_many variable to more than one gave me major problems with both the post date and excerpt.

I was limited to using the the_date_xml() template tag and the the_excerpt() as both of these tags accepted the argument “$np->”.

The Big Caveat

This is extremely important. If you choose to use this code on a static homepage that does not have WordPress installed in the same directory, you need to make absolutely sure that you give each entry a manual excerpt.

If an excerpt is not manually entered for your latest entry, you will get the excerpt from the second to latest post, or whichever post you last gave a manual excerpt to. It’s a headache, I know. But it’s the only solution that I could come up with for the moment while I am still figuring out PHP/MySQL and how it interacts with WordPress.

I have not tested this code out with images, so that’s another thing you may want to consider when manually typing in excerpts instead of having WordPress generate them for each post.

Any additions or modifications of this code that will allow for multiple posts on a static page which is located outside of the WordPress directory would be appreciated and welcomed.

Another Huge Caveat

This technique will not work if you are using the wp-cache plugin.

Greetings and welcome to the new web home of Big Square Dot!

Big Square Dot is a one man website design company located in Houston, Texas. It is operated and run by Philip Arthur Moore, a recent Rice University graduate who worked up the nerve to avoid post-graduate corporate life and start his own gig.

Big Square Blog is the company blog of Big Square Dot. As the ‘tagline’ of this portion of the website indicates, Big Square Blog will be dedicated to the topics of website design and all things WordPress.

In addition to discussions about design and WordPress, I will also delve into some topics that I have developed a substantial amount of interest in lately, including MySQL/PHP programming, wiki development, color management, and more. I will use the Big Square Blog to keep customers abreast of any changes that are happening with the company and also spend some time writing the occasional off-topic, fun-loving entry.

The Navigation Setup of Big Square Dot

Without further ado, I will provide you with a rough outline of the Big Square Dot/Big Square Blog navigation architecture to make your visit here as enjoyable as possible.

From the main page of the Big Square Dot website (www.bigsquaredot.com), you can access the following areas of Big Square Dot:

• The services that I offer.
• The pricing for my services.
• A detailed, yet simple, quote questionnaire.

I have taken the liberty to include a lot of information about me at the ‘About’ page. Included in the ‘About’ section of the website is a brief biography, a note about my computer skills, and some quotes that may leave you scratching your head.

What’s the deal with the quotes?

Stick around for a minute or so and you’ll start noticing a lot of quotes that reference the book The Alchemist, written by Paulo Coelho. I stumbled upon this book during a trip to Phnom Penh, Cambodia during 2005. Due to a combination of homesickness, restlessness, and a confusion over what my goals were for the following year, I took to heart the many messages in this book.

The amazing thing about reading this book at the time that I read it was that I felt exactly as Santiago, the Andalusian shepherd boy, felt in regards to pursuing his dreams. There are two quotes that encapsulate most of how I have felt about life for the last several years, especially since taking the time to travel:

1. “Everyone seems to have a clear idea of how other people should lead their lives, but none about his or her own.”
2. “In the long run, what people think about shepherds and bakers becomes more important for them than their own destinies.”

In short, at the time that I read The Alchemist, I knew it was finally time for me to follow my dreams no matter how wild or unconventional they may seem. This book has stayed with me for some time.

If you have any questions regarding my services, this blog, or anything else under the sun, feel free to contact me. There are two ways to get in touch:

• Send an email to contact [at] bigsquaredot [dot] com
• Fill out the contact form that is located on the quote questionnaire page.

That ought to do it for now.

I look forward to keeping you all up to date on the happenings at Big Square Dot, and if you need work done or know someone who needs work done, I trust that you’ll send them to the right place!

Cheers,

Philip Arthur Moore
Owner, Big Square Dot