There are still many webs static in HTML maybe more than the recommendable ones, because until not many years ago it was the standard offered by developers all over the world.
Note: this entry contains affiliate links for which the author can charge commissions for each sale.
The main disadvantage of having a web static in HTML is that the content is, that same, static requiring the creation or express modification of the HTML to have new content, something already obsolete and in disuse with the introduction of content management systems (CMS).
If this is your case, and you have a static web in HTML with a lot of created pages do not worry because it is quite easy to pass content and design of HTML to WordPress . Let's look at the two issues you have to address.
1. Convert static HTML pages to WordPress
There is a previous step, and it is to install a WordPress to accommodate your pages in HTML. Once you have it there are several ways to move from HTML pages to entries (or pages) WordPress:
- Do it by hand . If you do not have many pages, do not complicate, simply copy and paste the text of the HTML page in the editor of WordPress entries and publish.
- URL cloner would be another option, because it is an incredible plugin allows import content from any URL to WordPress .
- HTML Import a simple plugin that, once active, offers you a wide page of settings to import any HTML web into WordPress. It is very accurate and effective.
- url cloner
- html import
My advice would be that do not complicate and install one of the thousands of wonderful WordPress themes that exist but if you have some special fondness for a previous HTML design there are some things that you must know.
2.1 Create the WordPress theme
The first thing is to create a folder and name it with the name of the theme you want. Then you have to create two new files,
index.php and place them in that folder. They are the only files that WordPress needs, believe it or not. Now copy and paste the code of your original CSS file into the file
style.css just created. At the beginning it adds the following:
Theme Name: Replace this with the name of your theme.
Theme URI: The URL where you will offer your theme (if you want)
Description: A brief description.
Author: Your name
Author URI: The URL of your personal website or whatever you want.
These comments identify the theme how made for WordPress. Your stylesheet would be ready.
2.2 Dismantle the HTML
I could say it more finely but the reality is that a WordPress theme is a kind of quartered HTML or more finely put, " deconstructed ". By the way, we must incorporate the PHP calls that will make the HTML communicate with the database essential in any CMS to archive the dynamic information of the content.
The WordPress themes are several PHP files where there are calls that claim the code of the rest of files to show them in a certain order. The basic structure of a WordPress theme would be: header (header.php) that calls the content block (index.php) and this in turn to the sidebar of navigation resources (sidebar.php) for, in the end, close with an informative footer (footer.php).
WordPress, instead of having all this HTML code in a single file it " dismembered " in several that " they call "among them using PHP.
So, to start, you must go to your HTML code and add some marks in the 4 main places where you plan to make the code cuts for these 4 main sections. Of course, this assumes that your previous design contains those elements (header, body, sidebar and foot), but adapt it to what you have.
So, following the example, create 3 new files:
footer.php and place them in the folder of the theme that you created earlier.
Before putting us check the code of the file
header.php of the Twenty Ten theme that comes by default in any WordPress installation. Look at the PHP used between the tags
. Copy this code into your new file
header.php . Now open the original HTML and copy the code previously marked for the header (first section) in this file
header.php just below section
. Save and close
Now open the file
index.php that you created at the beginning and copy the second section of your original HTML code that you marked as such before. Save and close too
We will do the same with the following sections in the new files
footer.php that we will create.
2.3 Adjust the machinery
] Once the above is done, your original HTML code should be already quartered in 4 different files (header.php, index.php, sidebar.php, footer.php). So now it's time to put them to work together using PHP lines.
Open the file
index.php which should contain the HTML of the second section of your original code. Add this line to the beginning of all:
Now we go to the end of this same file and add the following:
<? Php get_sidebar ( ) ; ?>
<? Php ] ; ? these three lines of PHP code are telling WordPress to retrieve and display your files header.php, sidebar.php and footer.php within your index.php file.
With this you code is already underway and recognized by WordPress ready to show it properly. From this moment if you want to change something in the sidebar, you do not have to modify the index.php file but only the few lines of sidebar.php, for example. Your design is already " deconstructed ".
2.4 The Loop
The index.php is almost finished. The final step is to insert the dynamic content into the code . WordPress exists for that, and through PHP it is very easy to recover it.
The Loop is the part of a WordPress theme used to call and display dynamic publications from the database where they are stored
Copy this code and paste it into your new index.php file (within
div you're using for the content part):
5  6
<? Php if ( ] have_posts () ) : ?>
<? php while ] ( have_posts ) ) : the_post () ; ?>
< div id = "post- <? Php the_ID ( ) ; ?> " <? Php post_class ( 49]) ; ?> >
< div class = "post-header" >
< div class = "date" > <? Php the_time ] ( 'j M y' ) ; ?> < / div >
< h2 > < to href = " ] <? php ; ; ?> )
title = "Permalink to <? Php the_title_attribute () ; ?> "> <? Php the_title ? () ; ?> < / to > < / h2 >
< div class = "author" > <? Php the_author () ; ?> < / div >
< / div > <! – fin of header of entry – >
<? Php if ( function_exists ( 'add_theme_support' ) ) the_post_thumbnail () ; ?>
<? php the_content () ; 19659052]?>
<? Php edit_post_link () ; ?>
 <? Php wp_link_pages () ; ?>
< / div > <! – end entry – >
< div class = "post-footer" >
< div class =  "comments" > <? Php comments_popup_link ( 'Leave a comment'  59049] '1 comment' 'comments' ) ; ?> < / div >
< / div > < – end post footer – >
< / div ]> <! – end post – >
<? Php endwhile ]; / * rewinds or follows if all the entries have been obtained * / ?>
< div class =  "navigation index" >
< div class = "alignleft" > <? php next_posts_link ( 'Previous entries' ) ; ?> < / div > ]
< div class = "alignright" > <? Php previous_posts_link ( 'Subsequent entries' ) ; ?> < / div >
] < / div > <! – fin navigaci or n  – >
<? Php else : ?>
<? Php endif ; ?>
This is a basic version of the Loop. WordPress will use it to show your posts and comments.
2.5 To finish
Upload your theme folder via FTP into the folder
/ wp-content / themes / where WordPress is installed, or from the WordPress theme installer.
Activate it and you already have your WordPress theme with the previous design . You must keep in mind, that is, a very basic version of a WordPress theme, which you can expand to infinity by reviewing the template tags in the Codex the WordPress bible.
And if not , well what I told you before, that you forget the old and install some wonderful subject. These are the ones I like best to me.
According to the latest Technorati report, WordPress is the most used content management system well above the rest of CMS. If in 2012 48% of the Top 100 blogs worked with WordPress, in 2013, are already 52% of the most popular blogs using WordPress .
In the report you can see the evolution, as well as how the sharing of the cake of using the Top 100 blogs, this:
So you already know, if the blogs of the Top 100 worldwide use WordPress ] What are you waiting for?
ABC.es the digital of the centennial Spanish newspaper has adopted WordPress how the content management system for its blog platform, adding to many other newspapers and companies that are betting massively on the CMS king.
We congratulate, how could it be otherwise, the decision of ABC.es, and personally congratulate Antonio, who for many years is one of the leading bloggers in Spain, and who also helps spread WordPress from his personal blog and from his space on ABC.
Every day hurts more to read digital newspapers, and I do not mean just the new ones, but to the traditional, to media – once – prestigious, due to the missing figure of the proofreader added to the increasingly worse level of the editors. And it is already found serious errors of spelling, grammar, and not only in the texts, sometimes also in the same headlines which are supposed to be revised more, due to its importance.
Many of these digital newspapers are already using WordPress, and should install right now, in the absence of someone to correct the texts or more careful writers, a plugin like Error notification to at least allow are the readers themselves who warn of the errors .
The plugin, in addition, works in an incredible way, which seems a lie of how good it is . The first, as always, is to configure your settings, highly recommended, and for that you have your own page in " Settings -> Error notifications " of the WordPress desktop.
These are the settings to configure:  If you want to hide by default the invitation text to inform of errors or not (by default in OFF).
If you want to show a confirmation window of the error sending (by default in OFF, but I recommend to set it to ON, if someone already uses that combination of keys and thus you avoid unwanted emails)
Who will receive the error notification emails, because the plugin automatically sends you an email with each error, being able to choose between the administrator of WordPress, the administrator and the creator of the article, or a personalized email for these questions, almost the most advisable.
If the bar confirmation n the reader that the error has been sent will be seen above or below the site and in what color.
The thank-you text that will appear on that notification bar.
The "click" text that will appear to send the notice and the text of the invitation message to report errors or not, in which you must use the shortcodes
[combination] to display the key combination, and
to display the text you defined for "click".
List of pages per ID where you do not want the plugin to work.
As you see very complete
The operation, once configured, is a simple enjoyment that is. Under each entry or page will appear the text that you have defined, inviting readers to warn of the errors.
To do this simply select the text with the error and then , one of two, or press the key combination
May + E on your keyboard or click on the link you defined in the settings and it appears in the invitation text to warn of errors.
Once done, the thank-you bar appears, disappears after a couple of seconds, with the text, in place and with the color you chose in the settings.
To finish, to the defined email an email will arrive with the name and URL of the page where the error was detected, the wrong text that your reader selected and the time and date of the warning.
Closed cycle p ara a plugin that works like a charm of which one reaffirms in the value of WordPress as CMS multipurpose, and highly recommended to offer added value to your readers. do not you think?
If you want you can try it here in any post, to see how well it works. Do not worry, you will not fry me, I have them disabled for that site.