Monday, February 11, 2013

Resources to convert an HTML website to Wordpress

After converting several static HTML websites to Wordpress and XHTML, it's about time that I have some saved resources.  Code snippets are fantastic, working examples are even better.

WordPress Shortcodes: Why You Need Them and How to Create Them
This example shows the basic code needed to create a "wrapper" shortcode that will wrap HTML tags around your content.  After a shortcode has been created, it can be reused at will throughout a website.  Providing shortcodes to clients will make editing their site easier and allow them to integrate design elements without trudging through HTML.

Wordpress does not support shortcodes in widgets by default.  Add the one-line filter code at the bottom of the same tutorial to enable shortcodes in widgets.

CSS Styling Lists
Styled lists with CSS may help you clean up HTML that was left behind from a previous coder. The website I'm converting this month from static HTML to Wordpress had a bloated table layout to achieve links with "bulleted" images.  CSS list styles helped me to clear out all the unnecessary code and replace it with clean, beautiful markup.

Rounded corner layouts with DIVs.

CSS Image Rollover - Stack Overflow
This helped me convert javascript rollovers to pure CSS rollovers, which not only cleaned up the code, but will make it easier to edit in the future.

Box-shadow, one of CSS3′s best new features - CSS3 . Info
After combining the box shadow with a CSS border, I was able to replace a rounded corner box's nested HTML tables with some clean CSS.



No comments:

Post a Comment

Only comments in English will be considered. Thank you!