Untangling The Web » design

How To Convert An Existing Site To WordPress

Conrad Walton — Thu, 29 Jan 2009 16:12:02 +0000

I will attempt to explain how to convert an existing site into WordPress. I wrote previously about converting a client’s site from old school tables to a CSS based WordPress theme at http://www.flowerart.biz. I think this should work for Frontpage based sites as well as DreamWeaver or any other site that is reasonably coded, that is, if you “saved as HTML” from MS Word, you’re on your own.

A lot of people are looking for this information, so I figure I should expand on it and tell you exactly what I did and how you can convert any existing web site into a WordPress themed site too.

How To Convert An Existing Site To WordPress

Concept
The concept of a theme is that it will be the framework, the common template, that all of your content will be displayed inside of. Normally, you will use the same look and feel, the same template, on all of your pages. This usually contains the header, the sidebars, the footer, and the content goes in the middle and changes from page to page. We’ll want to take the existing HTML files and slice them up into WordPress theme files, with a dynamic place in the middle to put all of the content.

Text Edit
Did I mention that you need a text editor to make WordPress theme files? MS Word will not work. You MUST be able edit the files and save them as “text” files. They can not be formatted in any way. On Windows, look for WordPad. On a Mac, look for TextEdit. Do not make them RTF, or Rich Text Format. Just save the files as simple old text.

Quick shout out for BBEdit on a Mac. The ultimate text editor and if you’re going to be doing this, worth every penny. It does not suck. Says so right on the box.

Set Up Dev
Before we get any farther, you’ll need a development installation of WordPress that you can play with and break. It can’t share the database with an existing installation, or the theme you pick here will be the theme that the existing site will get at the same time.

If you do not have an installation of WordPress yet, install it and we’ll just play with it until we’re happy with the new theme. No one is looking. No one cares. Feel free to break it all you want.

If you do have an existing installation, you need to make another installation. It’s easy, but pay attention. You will have the existing site in your top level. You’ll probably have a “wordpress” folder with all of the files in it, in that top level. Make a copy, or upload a new copy, of WordPress right next to that folder. Name the new folder “dev”. You will now have the existing Worpress in “wordpress” and the new one right next to it, named “dev”.

Take the existing wp-config.php file and download it to your hard drive, where you can edit it. Open it up and look for the line that says ” $table_prefix = ‘wp_’; “. That “wp_” is the prefix for all of the tables in the database that WordPress uses. We don’t want to create a new database. We want to create new tables inside the existing database. We leave everything else in this file alone, but we change the “wp_” to “dev_”. Our new installation will see that and go create a new set of tables, all with names beginning with “dev_”.

Upload that wp-config.php file and upload it to our new “dev” installation. It should be next to all of the other “wp-”folders, at the top level.

Now, we’ll let WordPress do it’s thing. This is where the WordPress is so much better than any other Content Management System out there. We’ll finish the installation using your web browser.

Go to the home page of the new “dev” WordPress installation. If you have a previous installation, type in that URL, followed by /dev/, which is the folder that we put the dev WordPress. If this is a new installation, then you can go to the new home page. You should be looking at a new installation page that says “welcome”. You need to fill in the Name of the new site and your email address.

Click on the Install WordPress button. Wait for a really long time while WordPress goes out and updates the database and installs all of the information that it needs. This might take up 10 seconds on a slow day.

You will be looking at a Success! page. The user name is “admin” and the password is some totally obscure random string. Log into the new site and look around. You now have a development site that we can install themes on and break if we want to.

Lift and Separate
We want to go back to looking at the existing site that you want to convert. We want to lift the HTML from it and separate it into WordPress theme files.

The basic task is to separate out the “theme” elements from the “content” elements. If you have a stack of HTML files on your server and you’re not sure how they all work, download them and look at them in a text editor.

You need to have some background in HTML to know what you are looking at. You’re going to have to read the HTML and figure out what it is doing. You’ll see a lot of stuff at the top, in the section. The next should be the header area, all the stuff at the top. Somewhere down after that, will be what looks like content, the actual writing.

Your task, and this is the hardest part, is to figure out exactly where the “top” stuff stops and the “content” stuff starts. It could be a table cell. It could be a

tag. You need to find that point.

In the simplest form, there’s a bunch of HTML, then there’s content, then there’s a bunch more HTML. The goal is to slice that HTML into files named “header.php”, “sidebar.php”, “footer.php”, and most importantly, “index.php”. There could be others, but we’ll talk about that later.

Slice off the top stuff and put it in the “header.php” file. Figure out where the side bar stuff might come and copy it into that. You don’t really need a sidebar file if you don’t want to have one or you might want a couple, using sidebar-right.php and sidebar-left.php. You’ll have to go through your code and look at the layout of the page.

Take the bottom stuff and put it in the footer.php. You saw that coming, didn’t you?

You’re left with the content. You need to create an “index.php” file. At the top, you want to have the tag . At the bottom, you want to have the tag. You can put your sidebars in where you want them, before or after the content, for left or right.

In the middle of the index page, you want to put in the magic PHP tags that display the content. Open up the default theme index.php file and look at it. Copy everything starting at the tag down to the tag. You’ll get a bunch of “class=entry” and “php_content()” tags.

Save all of these files into a new theme folder. You’re doing all of this on your hard drive. Name the new theme whatever you want. “MyNewTheme” sounds great. Copy the style sheet from the default theme into your new theme folder. If you already have a style sheet from your original site, use that instead.

Open the .css style sheet file. You want to have the new name so that it shows up in the Appearance page in WordPress. At the top of the file, you need to have at least “/* Theme Name: MyNewTheme */”. The slash and asterisk means that it’s “commented out” so that it doesn’t interfere with the style sheet. Don’t use the quotes, just the slashes and asterisks. Look at the default theme style sheet or the codex for more info. This is minimum.

Upload and Look
Upload your theme folder to the “wp-content” themes folder, next to the default and classic themes. Go to your Themes page in WordPress admin and see if your theme is there. If it is, select it and activate it. Hold your breathe and “View Site”.

Did it work? Did it break? If you have horrible text that displays PHP error messages, read what they say and try to figure out where the error is. It’s probably a missing closing tag or a missing semi-colon. I hate those.

Did it display something, but it’s all out of whack? You need to play with the style sheets and the theme files to get it to display correctly.

Fix it
The simplest situation here is that you copied the code straight out of the original files and plopped it in here and it all works.

The issues could be style sheets, missing code, or badly written HTML. The more you change from original, the more you need to know what you are doing.

Pages
After you get it working and looking right, you want to create new pages for each page in the new site. Just create them and put some gibberish for now. You just want a place holder. Make sure that the menu points to the right places. Menus will be the next issue.

Existing Pages
If you have pages that you just don’t want to convert, you can put them into the Worpdress top folder, so that they act like normal pages. In my example, all of the portfolio pages are still hard coded PHP files. http://www.flowerart.biz/portfolio/ I needed to make sure the menus work, but those are hard coded pages. They are not visible in WordPress, but they are visible to the user. Read “Put A WordPress Menu In An External Page” to see how I made the menus dynamic on a hard coded page.

Menus
If you want to have dynamic menus, where pages are added to the menu when you create the pages, then you need to read through the codex about menu tags and their attributes. It’s possible to cut out the hard coded HTML menu that you had and replace it with a dynamic one. See where to cut out the old one and replace it with the new tags.

Different Templates
If you have different templates for different pages, you need to know what the differences are. If you need to create a new template for each page, you can do that. Go into each old HTML file, cut out the “contents” and replace it per the directions above. Now, create a new file that will act like that specific page’s index.php file. I like to name them all starting with “template_”, so you might have template_aboutus.php.

These new template pages need to have all of the tags of the others, header() and footer() and that stuff. It’s possible to have a template page that is entirely custom HTML and not even use the content() tags. You won’t be able to edit it, but it’ll show up on the site and be managed like other pages.

Each one of these new template pages needs to have the commented out lines at the top of the file that has the name in this format: “/* Template Name: About Us */”, again, without the quotes.

Upload this new file to the theme folder, next to the index.php file. Go back to the page that needs to use this template. On the right, there’s a “Template” drop down menu that should now list all of the template files that contain that “Template Name:” line in them. Select the one you want to use for that page and update.

Go look at it. You will have to customize and fix each template to make sure it works with the pages that you want.

Final Touches
You will have to go through each page and make sure that the menus work and that they look right. You can use the default theme as a guide. You can look up specific problems in the codex or the forums or you can ask me.

From here on out, it will be stylesheets and php tags to get it to look and work right. If you have a specific problem, let me know in the comments below and we can walk through it.

Art and Money, Part Two

Conrad Walton — Sun, 25 Jan 2009 20:49:21 +0000

I’ve been thinking about what I wrote about the Greenes. I think that it is possible and even probable, to make money clinging to your one, true, pure artistic vision.

But I’ve known a lot of starving artists. Some artists are just bad. Their vision is not worth making money. They need desk jobs instead.

I've known a lot of starving artists

I guess the answer is in the balance between the two. You need to pay the rent. You should hang on to your vision.

It’s the balance between the practical and the aesthetic. That should be the balance that you use to design your web site with also. You should make it interesting and artistic. You should have a point of view and make your statement.

On the other side, it should load quickly. It should not distract from your goal. It should communicate effectively. It should make the sale.

Art and Money are two sides to the same coin. You need both. I was wrong to say that you only need the art. You need to accomplish your goals as well, no matter what it takes.

Otherwise, you will have the most beautiful site in the world and no one will ever know.

Art and Money

Conrad Walton — Sun, 25 Jan 2009 04:46:17 +0000

The New and Native Beauty: The Art and Craft of Greene

I visited “The New and Native Beauty: The Art and Craft of Greene and Greene” at the Huntington Library today. It was a rainy day, but the exhibit closes in 2 days, so this was our last chance. The rain kept the riff raff out, so it was not crowded and it was a pleasant experience.

Greene and Greene

I love the houses designed by Greene and Greene. They are two brothers who built amazing houses between 1900 and 1920 or so. They are the epitome of the California Arts and Crafts movement and are most famous for the Gamble house in Pasadena.

The thing that struck me about what I saw today was how their ideas and ideals were forced upon their clients. They had the audacity to believe that they were artists and that their clients should appreciate that. Is the customer always right? Uummm…yeah, kind of.

When they were building the Pratt house in Ojai, the owner complained about missed schedules and cost overruns. Anyone who’s built a web site knows how that works. Their response was that even though they appreciated the frustration of the owner, what he was getting was not just house, but a work of art, which takes time and effort to complete properly and would be well worth it in the end. I’ve seen the house and it’s magnificent. I’m not sure Mr Pratt was satisfied.

During the depression, they still made magnificent houses, but not as many. They still charged the same high prices. They were creating art and it could not be achieved with shortcuts.

The balance between the business and the creative process was a delicate one. In their case, the business suffered in service to the art, finally being dissolved in 1922. What they achieved has stood the test of critics and time and is as amazing today as it was then. They created a whole new way of building houses, with a new attitude behind how life should be lived in these houses.

Is it worth it to sacrifice business for art? I don’t know. I need to pay the mortgage and eat, but beyond that, maybe art is the greater calling. Were they self indulgent, self centered, and egomaniacal? Maybe. So is Steve Jobs and I love my iPhone. He’s a billionaire.

As much as our users need to be considered in our web design, we, as the developers, the creators of the web site, need to instill our passion, our vision, our knowledge of how things SHOULD be into every web site. As much as I love SEO and WordPress and AdSense and marketing, our one true goal, our pure artistic vision, needs to be embodied in our web sites. Maybe there’s art in SEO. Maybe marketing is an art too.

Gamble House, Pasadena, CA

I think that as we lose the need for money, as we let that go and accept being poor, in the pursuit of artistic vision, in the pursuit of our passion, of what we love and know is the best, I think that then, and only then, does the money seem to come back in response. As we push it away and turn towards the artistic ideal, somehow, the money seems to be attracted back to that ideal. Maybe that’s a little too idealistic, too simplistic, I mean there’s always the lottery, but it does seem to be a tendency in life.

Don’t let the pursuit of money ruin your passion. Don’t let worry cloud your vision. Be who you are and the money will follow.

In 1943, in retirement, Charles Sumner Greene said “I did not always give them what they wanted, but always what they liked.

The Role of Design in Modern Church Marketing [Design Principles]

Conrad Walton — Thu, 22 Jan 2009 19:25:01 +0000

Quoting from The Role of Design in Modern Church Marketing [Design Principles]

Yet the recent image makeover of churches is unpalatable for some. In 2006, Pastor John MacArthur published a popular article (“Grunge Christianity?”) condemning modern churches that trade sanctity for “cultural relevancy.” MacArthur and his supporters disagree with so-called pragmatists who seek bigger, more worldly congregations. Nathan Smith (GodBit.com) counters, “we are naive if we try to take an isolationist approach. God wants a direct relationship with each person, so we—as facilitators of that calling—have to meet people through what they know, and if that is pop culture, then so be it.”

How many congregations identify with dark, gritty imagery?
From a design perspective, applying a pop culture flavor to a place of worship can mean many things, but comes down to doing what’s appropriate on a church-by-church basis. Says Chris Merritt (Pixel Light Creative), “If the church is a traditional conservative church, then I’m probably not going to use an abundance of grunge brushes and ragged textures. Every once in a while there’s a church who wants to launch a new image and use the web site as a launching pad. Even in that case, moderation is important; otherwise you may end up alienating those who are comfortable with the original image.”

So what about the multitude of recent church web sites designed around ragged, dark, asymmetrical elements—what does this communicate about the church? How many congregations identify with dark, gritty imagery?

Read the entire article at:
http://www.sitepoint.com/article/design-modern-church-marketing/

10 Reasons Why Your Church Website Needs Work | Web Site Design Blog

Conrad Walton — Sun, 04 Jan 2009 15:59:09 +0000

This is a great check list to run through while you review your existing web site. If you have any of these things, please remove them. I’m begging you. It’s for the sake of the children.

Quoting from 10 Reasons Why Your Church Website Needs Work | Web Site Design Blog

1. You have an over excessive use of animated clipart.
This may have been acceptable in the 90’s for personal home pages, but it should never be used on a church’s website.

If you want to really annoy your visitors, keep this feature because it works.

2. You play background music that cannot be turned off.
If you want to really annoy your visitors, keep this feature because it works.

3. Your site is in frames.
So you figured that you would make it easy for the navigation to be updated. Too bad you didn’t realize that search engines and some web browsers cannot properly view frames.

4. The last time you updated the site was two years ago.
It’s always good to know what events took place in the past, too bad we have no idea what’s going on in the present.

5. You utilize scrolling marquee text.
Sure it may look okay on CNN, but it looks horrible on a website.

6. You use numerous font types throughout the website.
A little Comic Sans here, a little Arial there and a few Wingdings here, it’s a masterpiece! Perhaps only to a child.

7. You built the site using Microsoft Word.
It was easy, just outline everything how you wanted it and then save as webpage. It doesn’t matter how different web browsers and different screen resolutions see the site, because it looks fabulous on your screen.

8. You used Java or Flash for your navigation.
Look at the pretty cool effect. It’s a shame that search engines have a hard time trying to crawl a site with that type of navigation.

9. You didn’t properly resize images before you added them on the site.
Why is that picture of the Pastor so blurry?

10. You have used the same website design for the past five years.
Why change it now? That old outdated look really defines our church.

Read the entire article at:
http://blog.collinsinternet.com/34/10-reasons-why-your-church-website-needs-work/

When Should I Use A Splash Page?

Conrad Walton — Fri, 02 Jan 2009 17:28:20 +0000

If you ever have a link that says “Skip Intro”, then you need to remove the page that contains that link. There’s no question or debate about this. The ONLY time I would ever do that is if you are promoting a video game or a movie. The only time ever.

Have you ever heard anyone tell you about a really cool splash page?

What good does it do if your website has the most beautiful web pages ever designed, but it doesn’t convince people to engage with your organization?

They don’t happen as much as they used to, but there are still websites out there that are more of an art project than effective promotion tool.

I’ve seen some splash pages that were a just monument to the web designers Flash and CSS skills. Designers love this stuff, but it’s the users that you need to worry about. Have you ever heard anyone tell you about a really cool splash page that they saw?

Regardless of your designer’s technical prowess or if the pressure is coming from some management above you, resist the temptation to use a splash page.

Just say no.

Web Sites For Churches

Conrad Walton — Wed, 24 Dec 2008 04:51:12 +0000

I have some experience with building and maintaining web sites for churches. Most of my professional life has been building them for large corporations, which is cool. It paid the bills. My heart is for church web sites though.

It just hurts to see what some of them look like out there. I am going to change the direction and focus of this site a little bit to point it more towards churches. Most of the advice and knowledge about small business web sites will apply to churches as well.

I’ll write a new version of the Web Site Starter Kit, this one will be for churches. You’ll learn how to build a site for FREE! Yes, this means that there will be no excuse at all, for not having a web site.

I am going to change the direction and focus more on churches.

My first church web site was in 1996. I had discovered the wonders of this new toy called The Web, so I registered the domain name for the church I was attending at the time. I had a web hosting business (I still do), so I built a simple site that had the basics; service times, a map, statement of faith, bios of the staff, etc.

I told the worship leader about it and he was excited. He “got it” back then.

I had a meeting to tell the church business manager about it. He told me to take it down immediately. The Internet was for child porn and software pirates, not churches. He was angry that I had even registered the domain name. Wooah… Dude. Slow down.

I left the meeting disheartened. Of course, being the obedient, submissive soul that I am, I left the site up and did what I knew was the best thing for the church anyway. Idiot.

There were more meetings and the business manager backed down. He began to see the benefit of the site. People were actually excited about it and word got back to him that it was “a good thing”.

The next step, after the “fear and loathing” step, was obviously the “control” step. They wanted to dictate to me exactly what should be on the site. They wanted everything approved before it went on the site. Again, I submitted by doing the best thing for the church. He never went to the site, so he never knew any better.

We finally got some people in the main office trained to keep it updated. It began to really become a useful tool in the life of the church. They started to look for a higher end publishing platform and spend money on it. About this time, there was another political shift in the church, unrelated to the web site, and my lovely wife and I chose to leave and help start a new church.

The original site fell into the hands of the, well, we’ll call them ill-equipped to design and maintain a web site. They didn’t spend any money after all and the site follows all of the “10 Common Mistakes for Church Web Sites”. It’s horrible, last time I looked.

Based on that wonderful experience, and the others that followed, I’ll be giving my advice on how to create and maintain a web site for a church. I’ll try to not go on religious rants, whether they involve Calvinism or Microsoft.

Last Edit for Web Site Starter Kit

Conrad Walton — Tue, 09 Dec 2008 18:21:20 +0000

My wife went through the draft with her pen and marked it all up. Anything that she didn’t understand is being rewritten. Some of my organization wasn’t clear, so I’m making that a little clearer. We want to make Web Site Starter Kit the best it can be, which means clear, concise communication.

They haven’t quite released WordPress 2.7 yet, so I’m still rocking the RC1 version of it. They say they will release the final version tomorrow. A few more screenshots today and it should be good to go.

Web Site Starter Kit should be released by the end of the week.

WordPress – It's Not Just for Bloggers Anymore

Conrad Walton — Fri, 21 Nov 2008 01:01:05 +0000

I use WordPresss for all of the sites I build, except the very specialized ones. Here’s an article that backs me up. I’ve used all of the editors and other CMSs and I think WordPress is the most versatile and easy to use. If you want to keep your site updated regularly, and who doesn’t?, then you should be using WordPress. I’m not sure you should ever pay for a theme, since they can all be customized, but it might work best for you.

WordPress – It’s Not Just for Bloggers Anymore – Premium WordPress Themes | How to Start, Build and Promote Your Online Business

Wordpress is the most versatile and easy to use.
WordPress – It’s Not Just for Bloggers Anymore

Don’t miss a thing. Subscribe to the 1Cat.biz RSS feed. Thanks for visiting!

Premium WordPress Themes

I’ve been a webmaster for over 12 years. And in that time I’ve used just about every HTML editor, CMS and page generator that was ever released.

Today, I use WordPress to develop 99.5 percent of the website projects I work on. The SEO, Web 2.0 and content management features make it so easy to deploy and market websites there’s really no need to use anything else. Almost anything you could want from a website can be easily plugged into WordPress.

With WordPress you can edit your website from any computer with an Internet connection. Change and add content, navigation, interactive features or even modify the design of the entire site in a matter of minutes. You can do it on a Mac, a PC or even a Linux box. It doesn’t matter because it’s all done over the web.

No more hassling with expensive software and updates. Everything you need is built in.

You’ll notice I’m using the word “websites” and not “blogs”.

“But I thought WordPress was blogging software?” you ask.

It is blogging software. Arguably the best blogging platform in the known universe. But, it can also be used as a robust content management system with or without blogging features enabled.

Imagine being able to give your secretary or assistant the login to your WordPress site and him being able to update content, add pages and upload photos in less time than it takes you to go to Starbucks and back.

Do you know how many hours I’ve spent training administrative assistants and church secretaries on how to use Dream Weaver or Front Page to update their websites? More than I care to remember. The sad fact is that most of those sites were never really kept up-to-date and therefore never really lived up to their full potential.

Read the entire article at WordPress – It’s Not Just for Bloggers Anymore – Premium WordPress Themes | How to Start, Build and Promote Your Online Business

Ask Me Anything About Small Business Web Sites

Conrad Walton — Thu, 20 Nov 2008 00:18:50 +0000

I’ve put up a link under my short bio over there on the right. Put up a new head shot while I was there. If you click on the button, it’ll pop up a window and you can ask me anything you want to know about small business web sites. I’ll answer it as soon as I can. I want to build some traffic to the site, so I thought I’d put that possibility out there for you.

If you have any questions about small business web sites, web hosts, HTML, design, development, management, WordPress, or anything at all, go ahead and send me the question. We’ll see just how much I really do know. You can also leave a comment below, if you want to do it that way. Either way should work.

Thanks!