We love WordPress, that's a fact. WordPress "likes to say" that it's both "free and priceless at the same time". Today, 415,274 bloggers on WorpPress.com would agree, not to mention the uncountable number of self hosted WordPress sites all over the globe. With its extendability and ease of use, its not just for blogs anymore.
Now, we know that WordPress is great choice, but what if you already have a successful HTML website? Or are in love with a certain HTML or CSS template? Is there a way to convert it to WordPress so you can have the design that you want and still utilize the the awesome power that is WordPress?
Of course there is.
WordPress themes are built on the same basic code as any HTML template. You just need to know where that code goes...
How to Convert HTML to WordPress:
WordPress themes are split into separate php files. header. content. sidebar. footer. Take a peek inside a current WordPress theme to unravel the mystery. Websites start at the index page so we'll start there and follow the code through. The index.php will first call the header.php. This is where your HTML tags, title and meta tags, site title or logo and navigation will go. Then you should see the php code for the content or the 'loop' as WordPress calls it. You'll also see calls for the sidebar.php and footer.php. Look inside those files and you'll see the code that builds those areas.
Notice the 'div' tags that wrap the page elements. HTML is now mainly built with div tags instead of tables. Most div's are assigned a CSS style with a label (selector). Labels can be either an ID (#) or a CLASS (.) These styles are defined in another file called style.css. Look through and match the CSS style to the congruent div tag.
Those with HTML experience or some serious gumption can copy and paste the HTML code straight into a basic WordPress theme. For each div tag with a label, also add that style into style.css. When converting your HTML to WordPress, a good approach is to carefully wrap the php code that is there between div tags. Make certain that any opening div tags have a matching end /div tag. If you get lost, double check your source code in a browser... div tags may open in your header.php and close in your footer.php
Once you get the techie stuff in place, lets not forget semantics.
If I convert to WordPress, will I lose my page rank and current traffic? Before moving any well established website, have 301 redirects ready to go for when the new site goes live. Even if you create the exact same page, WordPress will create different URLs than what your existing site has right now. Redirects will point search engines from the old page, to the new page, letting it know that a move has been made. Search engines will follow accordingly so your conversions will be seamless with little down time and no traffic loss. Build the site in a temporary location, create your redirects and move everything over to your domain at one time.
If you're not very handy with web code, a professional designer or web developer should be able convert your HTML to WordPress so you can spend your valuable time doing what makes your site more successful, like creating content!
Now, we know that WordPress is great choice, but what if you already have a successful HTML website? Or are in love with a certain HTML or CSS template? Is there a way to convert it to WordPress so you can have the design that you want and still utilize the the awesome power that is WordPress?
Of course there is.
WordPress themes are built on the same basic code as any HTML template. You just need to know where that code goes...
How to Convert HTML to WordPress:
WordPress themes are split into separate php files. header. content. sidebar. footer. Take a peek inside a current WordPress theme to unravel the mystery. Websites start at the index page so we'll start there and follow the code through. The index.php will first call the header.php. This is where your HTML tags, title and meta tags, site title or logo and navigation will go. Then you should see the php code for the content or the 'loop' as WordPress calls it. You'll also see calls for the sidebar.php and footer.php. Look inside those files and you'll see the code that builds those areas.
Notice the 'div' tags that wrap the page elements. HTML is now mainly built with div tags instead of tables. Most div's are assigned a CSS style with a label (selector). Labels can be either an ID (#) or a CLASS (.) These styles are defined in another file called style.css. Look through and match the CSS style to the congruent div tag.
Those with HTML experience or some serious gumption can copy and paste the HTML code straight into a basic WordPress theme. For each div tag with a label, also add that style into style.css. When converting your HTML to WordPress, a good approach is to carefully wrap the php code that is there between div tags. Make certain that any opening div tags have a matching end /div tag. If you get lost, double check your source code in a browser... div tags may open in your header.php and close in your footer.php
Once you get the techie stuff in place, lets not forget semantics.
If I convert to WordPress, will I lose my page rank and current traffic? Before moving any well established website, have 301 redirects ready to go for when the new site goes live. Even if you create the exact same page, WordPress will create different URLs than what your existing site has right now. Redirects will point search engines from the old page, to the new page, letting it know that a move has been made. Search engines will follow accordingly so your conversions will be seamless with little down time and no traffic loss. Build the site in a temporary location, create your redirects and move everything over to your domain at one time.
If you're not very handy with web code, a professional designer or web developer should be able convert your HTML to WordPress so you can spend your valuable time doing what makes your site more successful, like creating content!
Trisha Dingillo is a Chicago Freelance Web Designer. Her website, digitalRenewal.com appeals to both web designers and business owners where she teaches the tricks of the trade and also offers her own html to wordpress services.
No comments:
Post a Comment