How to Add an HTML Page to WordPress
- Compress the HTML page into a ZIP folder.
- Navigate to your WordPress website’s cPanel.
- Enter your public_HTML folder inside your cPanel.
- Add a new folder to your website’s public_HTML folder.
- Upload the zipped HTML file to the new folder.
- Extract the files.
- Preview your page.
- 1 How do I add HTML code to WordPress?
- 2 Can you use HTML in WordPress?
- 3 Where is the HTML in WordPress?
- 4 How do I add HTML to my website?
- 5 How do I open HTML code in WordPress?
- 6 Where do I edit HTML in WordPress?
- 7 How do I paste HTML code?
- 8 How do I edit HTML on my website?
- 9 How do I embed a page in WordPress?
- 10 How to Add Custom HTML WordPress – Step-by-step guide
- 11 What is HTML?
- 12 Why Do You Need to Add HTML in WordPress?
- 13 How to Add HTML in WordPress (with Examples)
- 14 Extra Tips
- 15 Conclusion
- 16 How to Edit HTML in WordPress Code Editor (Beginner’s Guide)
- 16.0.1 Why Should You Edit HTML in WordPress?
- 16.0.2 How to Edit HTML in WordPress Block Editor
- 16.0.3 How to Edit HTML in WordPress Classic Editor
- 16.0.4 How to Edit HTML in WordPress Widgets
- 16.0.5 How to Edit HTML in WordPress Theme Editor
- 16.0.6 How to Edit HTML in WordPress Using FTP
- 16.0.7 Easy Way to Add Code in WordPress
- 17 How to Upload HTML Files and Pages to WordPress
- 18 What is an HTML file?
- 19 Why Upload HTML Files to WordPress
- 20 How to Upload an HTML File to WordPress
- 21 How to Add an HTML Page to WordPress
- 21.1 1. Compress the HTML page into a ZIP folder.
- 21.2 2. Navigate to your WordPress website’s cPanel.
- 21.3 3. Enter your public_HTML folder inside your cPanel.
- 21.4 4. Add a new folder to your website’s public_HTML folder.
- 21.5 5. Upload the zipped HTML file to the new folder.
- 21.6 6. Extract the files.
- 21.7 7. Preview your page.
- 22 Upload HTML Files to WordPress to Build Your Site
- 23 Beginning HTML
- 24 Custom HTML Block
- 25 Adding HTML to WordPress: A Beginner’s Guide to How It Works
- 26 What HTML is (and why it matters)
- 27 How adding HTML to WordPress works (a few basic examples)
- 28 How to learn more about HTML
- 29 Conclusion
- 30 How to Edit WordPress Code – HTML, CSS, PHP (Easy Guide)
- 31 How to Edit WordPress HTML for Individual Posts/Pages
- 32 How to Edit the Source Code in Your WordPress Theme
- 33 How to Add Custom CSS to WordPress
- 34 Summary
- 35 Converting HTML to WordPress: Step by Step Tutorial
- 36 Why Would You Convert HTML Into a WordPress Theme?
- 37 1. Manual Conversion of HTML to WordPress
- 38 2. Converting HTML Through a WordPress Child Theme
- 39 3. Import Your Content From HTML into WordPress Using a Plugin
- 40 In Conclusion
How do I add HTML code to WordPress?
To insert HTML code in your widgets, please do the following:
- From the WordPress dashboard, go to the Widgetspage under the Appearance menu.
- Choose the Custom HTML option and click Add Widget.
- Fill out the widget’s title and insert your HTML code.
- Savethe changes.
- The result:
Can you use HTML in WordPress?
Once you become familiar with the platform, though, adding HTML to WordPress is an excellent way to get more control over your site. HTML is one of the primary building blocks every WordPress site relies on. With even a basic understanding of HTML, you can make various tweaks to the way your pages look and act.
Where is the HTML in WordPress?
In WordPress, the HTML is built by PHP so it’s usually found in files that end in. php in your theme folder. Find what theme your site is using by going to Appearance > Themes in your WordPress dashboard.
How do I add HTML to my website?
To insert HTML code into any page on your web site, open your web page on which you want to place the HTML code in the Pages Editor. Place your cursor in the content where you want the HTML code to appear on the page and then click on the “Insert HTML” icon in the toolbar (next to the “Source” icon).
How do I open HTML code in WordPress?
To edit the HTML of the entire page or post, click on the three vertical dots located in the top-right corner of the editor, then select Code editor: This will open the WordPress HTML editor.
Where do I edit HTML in WordPress?
Edit HTML in the WordPress Editor You have two options for editing HTML in the WordPress Editor: In the toolbar for each block (that appears when you click on the block), the ellipsis, or the three dots, has an Edit as HTML option to edit the HTML for just that specific block.
How do I paste HTML code?
Chrome: Right-click a blank space on the page and choose View Page Source. Highlight the code, then copy and paste to a text file. Firefox: From the menu bar, choose Tools > Web Developer > Page Source. Highlight the code, then copy and paste to a text file.
How do I edit HTML on my website?
By right-clicking on the HTML in the “Elements” tab and selecting “Edit as HTML,” you can make live edits to the markup of a webpage that Chrome will immediately render once you’re done editing.
How do I embed a page in WordPress?
Just follow these steps:
- Download and activate Insert Pages.
- Go to the post or page editor (where you want to insert another of your post or page)
- Click on Insert Pages button from the editor.
- A box will appear, select the post or page you want to insert.
How to Add Custom HTML WordPress – Step-by-step guide
Content Management System (CMS) WordPress is a simple system to use (CMS). The majority of the time, you will not need to write a single line of code in order to publish content on your website. However, there are certain difficult activities that need the tweaking of a handful of HTML codes in the editor, so having a basic grasp of HTML might be beneficial. So take it easy and enjoy yourself. It will be explained in this post how to include HTML codes into your WordPress website.
What is HTML?
It is an abbreviation for Hypertext Markup Language, which is the foundation of website development. HTML allows you to arrange online documents using tags and attributes — a collection of codes — to make them more visually appealing. After then, they’ll be stored as an HTML file. Every time the file is opened in a browser, it displays only the readable content, which implies that no tags are displayed. When dealing with HTML, bear in mind that most components, such as paragraphs, have beginning and closing tags, such as the /p tag for paragraph.
In order to learn more about HTML, HostingWikiis a wonderful resource to use as a source of information and references.
Why Do You Need to Add HTML in WordPress?
WordPress’s new editor, Gutenberg, provides a more straightforward approach to handle text formatting and organization. On top of that, there is no time lag between inputting media assets like photographs or videos, as well as adding layout components and widgets to your website. In short, the default editor is sufficient for the majority of fundamental formatting requirements. However, there is a disadvantage. It might be difficult to do particular activities while depending solely on the default editor.
It is possible that integrating custom HTML code into your WordPress article will be a good solution in any of these instances.
How to Add HTML in WordPress (with Examples)
There are three main methods for including custom HTML codes in your WordPress posts and pages. Either as articles, pages, or widgets, you have a variety of options.
Adding HTML in WordPress Posts
For those who wish to include HTML codes in their contributions, please follow these instructions:
- Log in to your WordPress administration area. All posts may be found in the navigation menu by clicking All Posts. Select the post you’d want to edit, and you’ll be sent to the WordPress visual editing interface. Activate the Plus icon in the block area or the editor’s upper-right corner. Select the Custom HTML icon from the Formatting drop-down menu. To use the editor mode, you may also select it from the menu. Activate the three-dot menu in the upper-right corner of the screen and pick Code Editor. Please feel free to include whatever code you like. As an illustration, the code for creating a basic table will be demonstrated. The background color of the table is set to 87ceeb. Text in the body of the paragraph is as follows: Text in the body of the paragraph is as follows: Text in the body of the paragraph is as follows: Text in the body of the paragraph is as follows: Text in the body is as follows: Text in the body is as follows: Text in the body of the paragraph is as follows: Text in the body is as follows: Text in the body is as follows: Text in the body is as follows: PUBG Mobile/td td1/td /tr tr td PUBG Mobile/td td1/td PUBG Mobile/td td1/td Stardew Valley/td td2/td /tr /tbody /table
- Stardew Valley/td td2/td The end product will look somewhat like this:
Adding HTML in WordPress Pages
This technique follows a procedure that is comparable to that of WordPress posts. The steps are as follows:
- On your WordPress dashboard, go to Pages > All Pages. Create a new page or make changes to an existing one
- Select the Plusicon, which may be found either in the block area or at the top of the editor
- Custom HTML should be selected from theFormatting drop-down menu. One other option is to select a section from the Most Usedsection or to change the editor mode to Code Editor. Add the custom HTML code to your WordPress page to make it more user-friendly. If you wish to see the results before posting them, selectPreview from the menu. The final result is as follows:
Adding HTML in WordPress Widgets
To include HTML code in your widgets, please follow the steps outlined below:
- Navigate to theWidgets page under the Appearancemenu from the WordPress dashboard. Select the Custom HTML option and then click on the Add Widget button. Fill up the title of the widget and paste your HTML code into it. Save the changes
- As a result of this:
You’ve learnt how to include HTML in WordPress posts and pages. Isn’t it true that it’s not as difficult as it appears? The following are critical considerations to keep in mind before proceeding.
Always Use the Clean Code
In WordPress, there are times when you don’t need to write code from scratch; instead, you may copy code from other sources such as Google Docs. This is satisfactory.
However, be careful to remove any borrowed characters from such sources, such as for line breaks orspan style=”font-weight: 500;”/span for span style, before publishing. It is required since a large number of crowded characters will have a negative impact on the performance of your website.
Learn More HTML Tags
It is advised that you master the fundamental HTML tags. With this information, you will be able to meet the fundamental requirements for creating visually appealing content. Here are some of the fundamentals:
- Unordered lists are denoted by the letters ul and ol, respectively. Inserting Images:img
- Adding Text:text
- Creating hyperlinks:a
WordPress makes it simple to include HTML. Just make sure that the code is right before proceeding. You can include HTML codes in either your posts/pages or your widgets, but not both. If, on the other hand, you’re merely concerned with basic formatting and insertion, the WordPress default editor will suffice. Good luck with your customization!
How to Edit HTML in WordPress Code Editor (Beginner’s Guide)
Are you seeking for a simple way to make changes to the HTML on your WordPress site? In web development, HTML (HyperText Markup Language) is a language that instructs a web browser how to display the content of your web pages. For sophisticated customization and troubleshooting, HTML editing is a valuable tool. It will be demonstrated in this post how to alter HTML in the WordPress code editor using several different approaches.
Why Should You Edit HTML in WordPress?
WordPress has dozens of themes and plugins that allow you to modify the design of your website and adjust different aspects without having to touch a single line of programming code. Plugins and themes, on the other hand, have their restrictions and may not provide you with all of the functionality you’re searching for. As a result, you may find yourself unable to design your website in the manner in which you like. It is at this point when HTML editing becomes really beneficial. By utilizing HTML code, you may simply conduct more complex customizations.
In addition, understanding how to edit HTML will assist you in identifying and correcting mistakes on your WordPress website when you do not have access to the admin of the website.
After that, let’s have a look at some of the numerous ways to alter HTML in a WordPress website.
You may skip forward to the part you’re interested in by clicking on the links below.
- How to Edit HTML in the WordPress Block Editor
- How to Edit HTML in the WordPress Classic Editor
- How to Edit HTML in the WordPress Block Editor What is HTML in WordPress Widgets and how can I edit it? What is the best way to edit HTML in the WordPress ThemeEditor? How to Edit HTML in WordPress Using File Transfer Protocol (FTP)
- Adding Code to WordPress in a Simple Way
How to Edit HTML in WordPress Block Editor
It is possible to change the HTML of your post or page with the WordPress block editor in a number of different ways. To begin, you may include HTML code in your material by using a Custom HTML block. In order to begin, go into your WordPress dashboard and create a new post or page, or update an existing one. After that, click on the addition (+) icon in the top left corner of the page to insert a ‘Custom HTML’ block. After that, you may proceed to insert your own HTML code into the block. The ‘Preview’ option allows you to see how your material will appear on your live website and to see if the HTML code is working properly before publishing your work.
To do so, simply choose an existing block of content in your content and then select the three-dot menu from the drop-down menu.
You’ll now be able to examine the HTML for a specific block.
You may, for example, include a nofollow link, modify the font style of your content, or insert other code into your page.
The code editor may be accessed by selecting the three-dot menu item in the top right corner of the screen. Afterwards, pick ‘Code Editor’ from the drop-down menu that appears.
How to Edit HTML in WordPress Classic Editor
If you’re using the WordPress traditional editor, you can quickly change the HTML in the Text view if you’re using the old editor. Simply modify an existing blog post or create a new one to gain access to the Text view. The HTML of your article may be viewed while you’re working in the traditional editor by clicking on the ‘Text’ tab when you’re working in the classic editor. After that, you’ll be able to make changes to the HTML of your content. Examples include highlighting certain words to make them stand out, using the italic style in the text, creating lists, including a table of contents, and other formatting options.
How to Edit HTML in WordPress Widgets
Was it ever brought to your attention that you may add and update HTML code in the widget area of your website? Using a Custom HTML widget in WordPress can assist you in customizing the sidebar, footer, and other widget regions of your site. For example, you may include contact forms, Google Maps, call to action (CTA) buttons, and other information in your HTML page. You may begin by logging into your WordPress administration panel and selecting Appearance » Widgets from the drop-down menu. After that, just click on the ‘Add’ button to include a Custom HTML widget in your layout.
The widget space will vary depending on which WordPress theme is being used.
Once you’ve decided on the widget area and location, proceed to click the ‘Save Widget’ button to save your changes.
You may now go to your website and check how the Custom HTML widget is being used in practice.
How to Edit HTML in WordPress Theme Editor
Using the WordPress Theme Editor, you may make changes to the HTML of your website in yet another method (Code Editor). While you may alter the code directly in the Theme Editor, we do not suggest that you do so. The smallest typographical error when inputting code might cause your website to crash and prevent you from accessing the WordPress admin. Additionally, if you upgrade your theme, all of your modifications will be gone. That being said, if you are considering modifying HTML using the Theme editor, it is a good idea to make a backup of your website before proceeding.
A warning notice will appear if you attempt to directly alter theme files at this point.
From here, you may select the file that you’d like to modify and make the necessary modifications.
How to Edit HTML in WordPress Using FTP
Another option for modifying HTML in the WordPress theme files is to use FTP, also known as file transfer protocol service, which is another technique of doing so. This is a common feature that is included with all WordPress hosting accounts, regardless of the package purchased. If you use FTP instead of the code editor, you will have the advantage of being able to quickly and easily resolve any problems. You won’t be locked out of your WordPress dashboard if something goes wrong while you’re altering HTML in this manner.
- For the sake of this lesson, we’ll be using FileZilla, which is a free and user-friendly FTP client that works on Windows, Mac, and Linux.
- The login information may be found in the control panel dashboard of your web hosting provider.
- Go ahead and browse to your theme files by selectingwp-content » theme from the navigation bar.
- Simply choose the theme that you wish to modify and click OK.
- In FileZilla, you may accomplish this by selecting the ‘View/Edit’ option from the menu bar.
You may then replace the original HTML file with the edited version. For additional information, we recommend that you read our instruction on how to upload files to WordPress via FTP.
Easy Way to Add Code in WordPress
The Insert Headers and FootersWordPress plugin is the quickest and most convenient method to include code in your WordPress site. WPBeginner’s development team created this plugin so that you can quickly and simply add code to your website in minutes, and we’ve made it available for you to use for free. It also aids in the organization of your code because it is all kept in one location. As an added bonus, it helps to avoid mistakes that might occur while manually modifying code. You won’t have to be concerned about your code being wiped if you decide to update or alter your theme, which is another advantage.
- To learn more about how to install a WordPress plugin, see our in-depth article on how to install WordPress plugins.
- Following that, you may incorporate the HTML code into your website’s header, body, and footer sections.
- You may simply type in the HTML code in the ‘Scripts in Body’ box and hit the Save button to complete the process.
- For additional information, please visit our article on how to include code in the header and footer of WordPress.
- You might also want to have a look at our guide on how much it actually costs to develop a WordPress website, or our list of the top reasons why you should use WordPress for your site.
- On top of that, you can follow us on Twitter and Facebook.
- This means that if you click on one of our affiliate links, we may receive a fee.
- The Editorial Staff at WPBeginner is a group of WordPress specialists, lead by Syed Balkhi, who provides guidance and support.
How to Upload HTML Files and Pages to WordPress
What is the purpose of uploading HTML files to WordPress? While constructing or expanding a WordPress website, you may find that importing HTML files and pages may save you a substantial amount of time when putting it together or when adding new, personalized content.
It is possible that you may wish to create a new HTML page or utilize pages from an earlier website before adding them to your WordPress website. In this tutorial, we’ll walk you through the process of adding HTML files and pages to your WordPress site. We’ll go through the following topics:
- What exactly is an HTML file? What is the purpose of uploading HTML files to WordPress? Instructions on how to upload an HTML file to WordPress. How to Include an HTML Page in a WordPress Post
What is an HTML file?
HTML is an abbreviation for “hypertext markup language,” which is a programming language that is used to generate and organise webpages. In contrast to PDF files, HTML files are text-only documents with highly interactive information that is intended to be read using a web browser. Creating HTML files from scratch is possible, but you can also transform existing files — such as Google Docs — into HTML. The following is an example of what may be contained within an HTML file. See the PenHTML File Examplecreated by HubSpot (@hubspot) on CodePen for more information.
This makes them more mobile-friendly since they will display correctly regardless of the device or operating system that is being used to view them.
However, this is not the only advantage of utilizing HTML files.
Continue reading for some other reasons why you should upload HTML files and websites while creating your WordPress website.
Why Upload HTML Files to WordPress
Website builder WordPress serves as a content management system, which means it can handle a variety of tasks. This implies that, even if your website is hosted on WordPress, you are not required to develop each and every page within the WordPress interface itself. WordPress offers a number of advantages when it comes to the creation of webpages. It is possible to construct visually appealing pages by using pre-designed themes, and you can even use page builders such as Elementor to create sales and landing pages as well as product pages.
Here are some of the compelling reasons why you should.
You don’t want to rebuild pages from scratch.
When you have an HTML page that translates effectively, rather than having to recreate it on WordPress, you may save time by just uploading it straight to WordPress. Human error is also reduced as a result of the fact that rather than painstakingly copying and pasting code, you can just submit the entire piece of information in one go by way of an HTML file.
You want to customize your page beyond a bottled theme.
Another advantage of uploading HTML files is that it allows you to alter your content in ways that may not be possible with your theme. Consider the following scenario: your prior website featured a template or page that you really loved, but that template or page is not available on WordPress. You may copy the HTML for that particular piece of content and then upload it to your WordPress site.
Alternately, you may start from scratch and write the HTML code for the page yourself. Once you’ve finished, upload your HTML file to WordPress and you’re done. The page or feature you requested has now been added to your account and is available for use.
It’s easier to verify your website with services such as Google Search Console.
The ability to alter your content outside of what your theme may allow is another advantage of adding HTML files to your server. Think about it: you had a favorite template or page on your prior site, but that template or page is not available on WordPress. This material may be uploaded to your WordPress site by copying the HTML code for it. Alternately, you may start from scratch and write the HTML code for the content. Then just upload your HTML file to WordPress and you’re done. The page or feature you requested has been added to your account.
How to Upload an HTML File to WordPress
- Go to your Admin Dashboard and log in. In the left-hand sidebar, choose ‘Pages.’ Make a selection from an existing page or start from scratch
- Select ‘Add Block’ from the drop-down menu. Add a ‘File’ block to the code. Choose an HTML file to work with.
It is possible to quickly add HTML files to your website by using the Visual Editor provided by WordPress. To gain access to the Visual Editor, you must first log into your administration dashboard.
After that, have a peek at the left-hand sidebar. There should be an option titled “Pages” on the menu bar. Simply click on it. When you do this, a new screen to the right, similar to the one shown below, should appear, displaying all of the pages you’ve generated.
3. Choose an existing page or create a new one.
You should now be able to choose whether to update an existing page or create a new one, depending on your preference. To create a new page, simply click on the “Add new” button that appears next to the “Pages” title and says “Add new.” If you want to make changes to an existing post, simply click on the post title itself, and the editor will be displayed right away. You should see the Visual Editor open by default; but, if you’re also using a page builder such as Elementor, you’ll want to mouse over the page’s name and select “Edit,” rather than “Edit with Elementor.”
4. Click ‘Add Block.’
Once you’ve opened the Visual Editor, select “add block” from the drop-down menu in the upper left corner. An additional dropdown menu will appear on the left-hand side of the screen as a result of this action.
5. Add a ‘File’ block.
Search for the phrase “File” in the search box located at the top of the left-hand menu by pressing the Enter key. Then, to upload a new file, click on it again. You might also look for “HTML” as an alternative. The HTML input box will allow you to enter text, but you will have to copy and paste it manually into a code block. Using this method works well if you’re posting little bits of code; however, using the media option is more efficient for bigger uploads.
6. Choose your HTML file.
Search for the phrase “File” in the search box located at the top of the left-hand menu. Then, to upload a new file, click on it again to choose it. Alternatively, you might look for the term “HTML.” The HTML input box will allow you to type in HTML, but you’ll have to copy and paste it manually into a code box. The code upload option is useful for little bits of code, while the media upload option is more efficient for bigger files.
How to Fix “File Type is Not Permitted for Security Reasons” Error
It is possible that you will see this error message while attempting to add your HTML file to your blog post or media library.
The quickest and most convenient method to move around this is to utilize an HTML block. As seen in the example below, an HTML block allows you to copy and paste the whole contents of an HTML file onto your WordPress page.
How to Add an HTML Page to WordPress
Imagine if we were the proud creators of the site, Lonéz Scents, and that we wanted to move this page to WordPress as part of our ongoing website evolution. Image courtesy of Shutterstock Look at the steps that were taken to convert this page to WordPress.
1. Compress the HTML page into a ZIP folder.
Export the webpage from your current content management system. If you wish to edit any of these files before submitting them to WordPress, you don’t need to touch any of these files. Make sure that this HTML file is compressed and saved in a ZIP folder before continuing.
Excellent! Now that you have the HTML file, you can begin the process of transferring it to your WordPress website. After that, it’s time to go into your cPanel, which is where your website’s database is housed. These login credentials are provided by your hosting provider. Advice from the experts: If you’d rather have someone else do the heavy lifting for you, some web hosting companies can move your webpages for you at no additional charge. Make sure you double-check with your web hosting company.
In Bluehost, select “Advanced” from the sidebar, then “Files” from the drop-down menu.
3. Enter your public_HTML folder inside your cPanel.
The public HTML folder may be located on the left sidebar of your website. If you have several websites, you’ll need to pick which website you’d like to move the page to before you can proceed.
4. Add a new folder to your website’s public_HTML folder.
To create a new folder, select “+Folder” from the drop-down menu at the top of the screen. Create a new folder by naming it and then clicking on the Create New Folder button. (The name of this folder will appear as part of the URL for your HTML page.)
5. Upload the zipped HTML file to the new folder.
To create a new folder, select “+Folder” from the drop-down menu at the top of the page. Select Create New Folder from the drop-down menu after naming your new folder. It is important to note that the name of your folder will appear in the URL of your HTML page.
6. Extract the files.
Your packed HTML file has now been successfully submitted and is located in the folder. Select the file and then click Extract in the top-right corner of the screen to begin the extraction process. Now, select Extract files from the drop-down menu.
7. Preview your page.
After that, you’ll notice a new menu choice named Extraction Results. Click on the X to close the window. Then, in the centre of the screen, click Reload to restart the game. In the folder, you’ll find the HTML file that was previously unzipped. (You may remove the ZIP file if you choose.) It will have no effect on the HTML page you extracted or any other directories.) Finally, you may get a sample of the page by going to yourdomain.com/FolderName/HTMLFileName.html. Lastly, And that’s the end of it!
Upload HTML Files to WordPress to Build Your Site
In certain cases, uploading HTML files to WordPress is the best option — particularly if you want to construct a fully personalized site that cannot be built using a theme. The WordPress platform is also ideal for those who want to convert their existing websites over to the WordPress platform. The greatest thing is that it’s simple — but make a note of this guide’s URL so you don’t lose track of it while going through the procedure.
Note from the editor: This piece was initially published in July 2019 and has been revised to ensure that it is as complete as possible. Originally published on October 25, 2021 at 7:00 a.m., and updated on October 25, 2021 at 7:00 a.m.
A basic familiarity of HTML might assist you in getting the most out of your WordPress.com site and its features. This post will show you how.
Table of Contents
What exactly is HTML? HTML Basics: Adding and Editing HTMLSome HTML Fundamentals Text formatting in the Classic Editor HTML editing in the Classic Editor In order to alter the HTML of your page or post, WordPress.com offers you with a few different tools. The options that are accessible to you are determined on whatever Editor you are now using. Instructions on how to use the Classic Editor may be found by clicking here.
What is HTML?
In the world of online design, HTML (Hypertext Markup Language) is the primary language used to generate web pages. When working with HTML, you may make use of specific tags such asa and img to add links and pictures, respectively. WordPress.com supports a variety of HTML tags, however not all of them are supported by the platform as a whole. More information regarding which tags are acceptable may be found in ourCode support guide. Section I: Table of Contents
Adding and Editing HTML
In the words of the Editor The Custom HTML block is the quickest and most convenient way to include HTML in a Page or Post. More information on the Custom HTML block may be found here. Alternative to this, practically all of the blocks offer the possibility to be edited in HTML format.
- Select a specific block in your editor by clicking on it. To choose the ellipses (three dots) at the top of the block, click on them. Edit as HTML is selected. To return to the visual editor for the block, click the ellipses a second time and select Edit visually from the menu.
An optional third alternative, available to the bravest of readers, is to open up the entire page or post in the Code Editor. The HTML for the full page or post will be loaded by the Code Editor.
- Editing a Page or a Post is possible. To access the ellipses (three dots) menu, go to the top right of the editor and choose it. Choose Code Editor from the drop-down menu. To return to the Visual Editor, click the ellipses once again and then select the Visual Editor option.
In the case of a Widget It is possible to include a Custom HTML Widget in any widget area that your theme supports. More information may be found by clicking here. ↑ Section I: Table of Contents
Some HTML Basics
Whenever you are working in the HTML editor, you are working with text. This includes hyperlinks, quotations, and even images. However, there are two different types of text here. Approximately half of the text is the actual content of the blog post you produced, and the other half is HTML code. It’s simple to distinguish between the two: Angled brackets, and, are used to begin and end every line of HTML code. Anything contained within a pair of angled brackets is referred to as an HTML tag. Tags are preset HTML commands that indicate how your post will appear and act.
- h1 This is an example of /h1p is the heading for this paragraph.
- /pa href=”This is connected text /a”>/pa href=” In order to italicize a word, for example, we use theemtag, which is an abbreviation for the word emphasis.
- This will open a new tag window.
- ↑ Section I: Table of Contents
The HTML code for making text bold, italicized, underlined, or struckthrough is straightforward. Here are some examples of how to include these modifications into your text: For example, textbold:strong bold text here /strongForitalics:em italic text here /emForunderline:u underlined text here /uForstrikethrough:strike strikethrough /strikeFormatting issues.
For further information, see theHTML Troubleshooting guide. Pages:12View the entire collection
Custom HTML Block
HTML (Hypertext Markup Language) is a markup language that is used to specify the semantic content of web pages. This may be accomplished through the use of the custom HTML block. This section allows you to inject code into your material, allowing you to fine-tune the presentation. In order to maintain security, not all HTML tags are permitted within the Custom HTML Block. Please refer to the list of supported HTML tags to see which ones you can employ. Overview of HTML blocks (editor view) HTML code is contained within this block (result) To insert a customized HTML block, select theBlock Insertericon from the toolbar.
Typing is included in the HTML block.
Editing the Block
Once the block has been added, you may enter your code and inspect it directly from the block settings. In addition, you get access to all of the usual block settings. The HTML block has a preview option. Section I: Table of Contents
Block Settings Panel
While most blocks have additional choices available in the editor sidebar in addition to the options available in the block toolbar, the HTML block does not have any more options available in the sidebar.
Adding HTML to WordPress: A Beginner’s Guide to How It Works
The content on Themeisle is completely free. When you make a purchase after clicking on one of our referral links, we receive a commission. Read on to find out more One of the most appealing aspects of WordPress is how simple it is to use, even for complete beginners. You can practically build a fully working website without having any technological experience. Although it takes some time to become comfortable with the technology, adding HTML to WordPress is a wonderful approach to have greater control over your website.
With even a rudimentary grasp of HTML, you can make a variety of changes to the appearance and functionality of your web sites.
What HTML is and how it works will be explained in detail in this beginner-friendly guide.
Let’s get down to business!
What HTML is (and why it matters)
Just load up a WordPress post or page to see what HTML looks like in its most basic form.
However, if you look attentively, you’ll notice that all of your stuff is still present. The text is printed down exactly as it is, but everything else is HTML, which controls the formatting, style, and layout of your material, among other things.
How adding HTML to WordPress works (a few basic examples)
You’ve probably reached the stage where you’re ready to see what it’s like to add HTML to WordPress in practice. Let’s go through a couple of fundamental examples so you can have a better understanding of how this markup language truly functions. Let’s imagine you’re creating a blog article for your WordPress website on your five favorite dog breeds, and you want to include a list of links to more resources. As a result, you should introduce each breed as a separate part, with a header that is distinct from the remainder of the content.
Locate the text you wish to use as a heading in theTexttab of your editor.
The slash in the second tag specifies the point at which the heading should come to a close.
Other ways to use HTML for formatting
There are fundamental tags for all of the usual (and many rare) sorts of formatting that you would wish to apply to your text, and they are all very similar. If you wanted to italize the word “best” in the following statement, you might do it by using the following syntax: Greyhounds, in my view, are the most ideal breed of dog. You’d need to utilize the emphasis (em) tags in order to do this: Greyhounds are, in my view, theem greatest /em sort of dog. Alternatively, if you wanted to make the term bold, you might usestrongtags: Greyhounds, in my view, are the greatest and most powerful breed of dog available.
- For example, if you wanted to emphasize a certain word by bolding and italicizing it, you might use the following style to achieve your goal: Greyhounds are, in my view, the strongest and greatest /em/ strongest breed of dog.
- It is necessary to utilize an introduction tag to inform WordPress (or whichever platform you are working with) of what you want to accomplish.
- The majority of tags are straightforward and simple to comprehend, despite the fact that they might be combined in a variety of ways.
- Adding HTML to WordPress, on the other hand, allows you to include formatting that isn’t as easy to include by default, such as highlighting text using themarktags or building tables in your post.
When you have HTML in your toolbox, the possibilities for altering content are virtually limitless. You can also add specific formatting within widgets and other sections that are not part of the WordPress editor, which is particularly useful.
Other areas where adding HTML to WordPress is helpful
Beyond the ability to change layout, HTML may also be used to regulate how particular portions of your content behave, such as buttons and links. Addition of a nofollow tag to your links, for example, is a regular activity that you could wish to carry out. In contrast to the examples we provided before, there is no way to accomplish this in the editor. Instead, you’ll need to manually add the rel=”nofollow”tag to your link using the HTML code provided by Google. As an illustration: a href=”href=”href=”href=”href=””/a /a anchor text As a result, the following happens:a href=” rel=”nofollow” “/a /a anchor text As you get more experience with HTML, you’ll discover more areas in which HTML allows you to go beyond the limitations of the standard WordPress editor.
How to learn more about HTML
If you’ve been following along, you’ve already learned some important fundamentals about how HTML is structured and functions. With only a few Google searches to get the tags you need and a little HTML inserted into your WordPress post, you can get a long way. Although it appears to be simple, there is a lot more to this markup language than meets the eye. If you truly want to become good with HTML, it’s worth your time to invest some time studying everything there is to know about it. Here are a few good locations to start learning more about the subject:
- HTML5 Tutorial from W3Schools: If you like to learn by doing, this HTML5 Tutorial may be precisely what you’re looking for. Every step will take you through all you need to know about the most recent version of HTML, allowing you to practice using the tags yourself along the way. When it comes to studying HTML, Codecademy offers a highly comprehensive application that is structured more like a course than a typical learning environment. You’ll even complete two structured projects to help you have a better grasp of the language’s practical applications. Udemy: This website provides a large number of HTML courses from which you may select the one that best suits your demands and ability level. It is recommended that you read Introduction to Basic HTMLCSS for WordPress Users before you begin your journey.
The easiest method to learn HTML completely is to practice using it on a regular basis, just as you would with any technical skill. By the time you’ve finished a few new posts and pages, you should discover that adding HTML to WordPress has become almost instinctive.
It is easy to believe that a language such as HTML is complicated and sophisticated, and that it is only comprehensible by hackers with extensive expertise. As we’ve seen, though, this markup language is incredibly simple and user-friendly, even for non-technical individuals. Comprehending HTML boils down to understanding the notion of tags and how they’re used to enclose the sections of your content that you wish to modify. Once you’ve mastered that, you may move on to studying other tags and experimenting with how to incorporate HTML into WordPress.
Do you have any queries on how to utilize HTML in your WordPress content?
Please share your thoughts in the comments box below!
Guide is available for free download.
How to Edit WordPress Code – HTML, CSS, PHP (Easy Guide)
While WordPress makes it simple for non-coders to maintain a website, there will almost certainly come a moment when you will want to alter WordPress code in order to have a little more influence over how your site appears or works. This guide will show you how to properly alter code in WordPress in a variety of methods to assist you in accomplishing this goal:
- Individual WordPress posts or pages can be edited using the WordPress HTML editor. Editing the HTML/PHP code of your theme
- Adding Custom CSS to Your Site
If you already know what you want to accomplish, you may skip forward to that part by clicking on one of the links above that will take you directly there. Otherwise, let’s go to work on the edits!
Prefer to watch thevideo version?
You may alter your WordPress code to personalize different aspects of your WordPress site, giving you greater control over how your WordPress site appears and performs.
- The new block editor and the old editor both allow you to alter HTML code for individual posts or pages
- However, the block editor is more user-friendly. If you wish to make changes to the source code of your WordPress theme, you need create a child theme. If you want to handle code snippets that you put to the header functions.php file of your theme, consider utilizing a plugin. Alternatively, you may utilize the Additional CSS tab in the WordPress Customizer or a plugin such as “Simple CSS” if you only want to make a few tweaks to your CSS.
How to Edit WordPress HTML for Individual Posts/Pages
The easiest method of editing WordPress HTML is to view the source code for individual WordPress posts, pages, or other post kinds. This is the most straightforward method of editing WordPress HTML. You can accomplish this in both the new WordPress block editor (Gutenberg) and the older classic TinyMCE editor, depending on your preferences.
How to Edit WordPress HTML in Block Editor (Gutenberg)
In Gutenberg, there are a number different methods to interact with HTML code. First and first, if you only want to insert your own HTML code into a piece of material, I would advise against attempting to alter the full source code of your article, as this will make things unnecessarily difficult and time-consuming. Instead, you may just use the dedicatedCustom HTMLblock and paste the HTML that you wish to use into it, like follows: Gutenberg’s HTML block with custom HTML However, there may come a moment when you may need to make changes to the HTML of a separate block directly.
There are two methods in which you might go about this.
Alternatively, you can simply use the following keyboard shortcut to switch between code and visual editing – CTRL + SHIFT + ALT + M: Ctrl + Shift + Alt + M: How to use the Gutenberg code editor in its entirety You should be aware that, in the entire code editor, you’ll have to navigate through all of the markup for blocks – for example,!
Please refer to this simple instruction on how to customize HTML, CSS, and PHP.
How to Edit WordPress HTML in Classic Editor (TinyMCE)
In the Classic WordPress editor (TinyMCE), you can change the HTML for your entire post by going to theTexttab and clicking on the HTML tab: Using the Classic WordPress editor, learn how to modify HTML.
How to Edit the Source Code in Your WordPress Theme
Now, let’s get into the meat of the matter, which is how to make changes to the code of your WordPress theme. Due of the increased stakes, we need to address a few basic questions before moving on to the how-to portion of the discussion. What is the reason for the increased stakes? Simply put, it’s because if you make a mistake here, it might cause your site to go down.
WordPress has made it much more difficult for you to make this mistake in recent editions, but altering the source code of your website is always going to open the door to problems, so you want to be certain that you do it securely before proceeding.
Use a Child Theme for Any Direct Code Edits
If you intend to make direct changes to any of the code in your theme’s files, you must utilize a child theme rather than modifying the “parent” theme, as described above. Unless you use a child theme, any code modifications you make will be overridden the next time your theme is updated. With a child theme, you will be able to quickly update the parent theme without losing any of the customizations that you have done in your child theme. More information on the advantages of child themes, as well as how to develop one, may be found in our comprehensive guide on WordPress child themes.
Consider Using a Plugin Instead of Editing Code in Child Theme
If you want to make changes to the way your theme operates, you’ll most likely have to do it by modifying the source code of your child theme.
Want to know how we increased our traffic over 1000%?
Join over 20,000 other people who receive our monthly email, which contains insider WordPress advice! Now is the time to subscribe. For other purposes, such as adding a tracking script to the header area of your site or including a snippet in a theme’s functions.php file, it may be preferable to use a plugin rather than editing the code directly in the WordPress editor. For example, theHead, Footer, and Post Injectionsmake it simple to inject code snippets where they are needed on the page. Furthermore, because all of these code snippets are contained within the plugin’s interface, it will be much easier to handle them in the future.
In summary, if you wish to change code in WordPress to add snippets to your theme’s code, you may do so by using the.
If you need to make any more changes, let’s have a look at how to alter the theme’s code from the beginning.
Use the In-Dashboard WordPress Code Editor
If you intend to make changes to your theme’s code directly, we strongly advise that you create a backup of your site first (either of your entire site or just the file you’re working on) before proceeding. After you’ve completed this step, you can enter the in-dashboard theme code editor by selecting Appearance Theme Editor from the menu bar. WordPress will offer you a warning identical to the one you received above, which is as follows: The warning that appears before allowing access to the in-dashboard code editor Afterwards, you’ll be able to move between multiple theme files using the right-sidebar navigation bar and the code editor itself to make your real edits: The WordPress code editor integrated into the dashboard
Use SFTP to Edit Code in WordPress
In addition to using the in-dashboard code editor, you may also modify theme files over the SFTP protocol. There are two advantages to using this approach:
- In the event that you mistakenly damage something, you can fix it as soon as possible using your favourite code editing tool
- In contrast, if you alter code through your WordPress dashboard, there is always the possibility that you may damage something that would lock you out of your WordPress dashboard, necessitating the use of SFTP to resolve the problem (though this is less probable now owing to recent modifications)
Here’s how to connect to your website with FTP. Navigate to the theme’s folder –./wp-content/themes/child theme name – once you’ve completed the previous step (see above). Locate the file that you want to modify and choose it with the right click menu. Most FTP systems will provide you with the opportunity to modify the file and will then automatically re-upload the file once you have finished editing it, saving you time.
However, we strongly advise you to save an original version of the file to your computer’s desktop before making any modifications. Then you may just submit the original version again if something goes wrong by mistake. Example: How to make changes to the WordPress HTML using SFTP
How to Add Custom CSS to WordPress
Instead of altering the HTML or PHP code of your WordPress site, you may simply add custom CSS to it without having to utilize the in-dashboard code editor or SFTP techniques. Instead, you may make use of the WordPress Customizer to make changes. Aside from the fact that it is a more straightforward alternative, another advantage of using this method is that you will be able to see your modifications in real time. Go to Appearance Customize in your WordPress dashboard and fill out the form there: Accessing the WordPress Customizer is simple.
This will launch a code editor, where you may type in the CSS you wish to style the page.
This plugin provides a comparable option in the WordPress Customizer, and it also provides the ability to apply custom CSS to specific articles or pages via a meta box.
This is especially useful if you want to include a large amount of custom CSS – hundreds or thousands of lines of code.
If you wish to directly modify HTML in a WordPress post or page, both the new block editor and the old editor provide you with the ability to do so directly. Alternatively, if you wish to alter the source code of your WordPress theme, there are a few things to keep in mind:
- The new block editor and the old editor both provide alternatives for directly modifying HTML code within a single WordPress post or page, if that is what you need. The following are some things to keep in mind if you wish to make changes to the source code of your WordPress theme.
If you still need to make direct code adjustments after taking these precautions, you may access the source code of your child theme from your WordPress dashboard by selecting Appearance Theme Editor from the drop-down menu. Alternatively, you may login to your site using SFTP and make changes to the code that way. Finally, if you only want to make a few changes to your theme’s CSS, you don’t have to make any changes to the theme’s code. Instead, you may simply utilize theAdditional CSSarea in the WordPress Customizer or a plugin like asSimple CSS to achieve the same results.
Fill up the blanks with your questions in the comments!
- Instant assistance from WordPress hosting professionals, available 24 hours a day, seven days a week
- Integration of Cloudflare Enterprise Edition
- With 29 data centers across the world, you can access a global audience. Application Performance Monitoring (APM) is embedded into our platform, allowing for optimization.
That and much more is included in a single plan that includes no long-term obligations, aided migrations, and a 30-day money-back guarantee, among other things. Check out our options or speak with a sales representative to select the plan that is suitable for you.
Converting HTML to WordPress: Step by Step Tutorial
The process of developing a website is no longer that complex; nevertheless, this wasn’t always the case. In the past, if you weren’t a coding wizard, you couldn’t even dream of developing a website for your company. But times have changed. We are fortunate to be living in the software age. Website design has gotten significantly easier as a result of the development of website templates, software applications, and automatic content management systems. Many tools are available to help you with the design and development of your website, and the most of them are completely free.
- But what if you had your site developed some years ago and are still using it?
- And that may be time-consuming at the best of times and prohibitively expensive at the worst of times.
- In no way, shape, or form.
- It is still possible to find static HTML pages, and they still have a place on the current Web.
- Furthermore, this does not have to be a time-consuming or difficult operation.
Techniques range from complex coding to the use of plugins. In this post, we’ll go through some of the approaches. So, how do you go about converting your static HTML website to a WordPress website? Continue reading to find out.
Why Would You Convert HTML Into a WordPress Theme?
If you already have a static HTML website, why would you want to change it to a WordPress theme in the first place. For starters, it’s a lot less difficult to keep track of. If you are not familiar with website code, you will require the services of web developers to make any updates to your site. Additionally, if you want to keep on top of SEO in order to be seen in prominent search engines, you’ll need to update your site on a regular basis as well.
Having Trouble Converting or Want Professional Help?
This is something we do on a daily basis for our clients. Schedule a brief chat with us and we’ll be happy to give you with a free quote for completing this task for you. And that’s where the WordPress platform comes in. WordPress is a content management system (CMS) that is intended to be used by anybody, regardless of their technical expertise. You won’t have to pay a professional to help you with WordPress development, and making modifications is really straightforward. A few clicks of the mouse may frequently result in significant modifications (even over mobile).
A website conversion involves transferring existing data from your present static HTML website and putting it into a WordPress theme.
There are three primary methods for accomplishing this, which we shall discuss further below.
1. Manual Conversion of HTML to WordPress
Manual conversion is not advised for everyone due to the fact that it is the most technically demanding option on our list. Manual conversion begins with the HTML code of your present website as a starting point. We recommend that you have some coding skills if you intend to use this technique for data conversions. To be more specific, you should be familiar with HTML, CSS, and PHP. Fortunately, the majority of this procedure can be completed by copying and pasting, although it is still time-consuming.
Step 1: Create a New Theme Folder
Creating a new theme folder on your desktop will be the first thing you’ll need to do. Consider it to be similar to a directory folder on your PC. It accomplishes the same goal as before. Now, open the code editor and create a few of text documents. Specifically, you’ll want to generate the following five files:
- Style.css, Index.php, Header.php, Sidebar.php, and Footer.php are all PHP files.
Step 2: Copy CSS Code
You’ll then need to copy the CSS coding from your previous website and paste it into a WordPress Style Sheet to complete the process. In order to do so, you’ll need to prepare the WordPress style sheet, which is the style.css file you produced in the previous stage, as shown above. Copy and paste the CSS code from the previous site’s source code into the new style sheet’s corresponding location. When you’re finished with that, it’s time to fill in the blanks in the style sheet header for your new WordPress theme.
- Theme name – You may choose whatever you like for here
- The URL for the theme is the information for the homepage or the site address. Your name as the author
- A link to the author’s homepage, which you are currently developing. Description – This section contains an optional write-up about the theme that appears in the WordPress backend
- It is not required. Version — Begin with the number 1.0
- Licence, license URL, and tags — This section is only required if you want to publish the theme to the WordPress directory for other people to download and utilize. If you’re keeping it for yourself, you shouldn’t be concerned about it.
The following is an example of what that style sheet may look like: As soon as you’re through writing the header, copy and paste the CSS code from the static HTML site into your document.
Save the file in your theme folder and then shut the file browser window.
Step 3: Separate Existing HTML
WordPress accesses database information using the PHP programming language. As a result, your current HTML code must be broken down into smaller chunks so that the WordPress CMS can correctly string them together and display them. Several PHP files will need to be created, and portions of the original HTML content will need to be copied into each of them. To begin, navigate to your index.html file. Go through all of the WordPress files that were produced and paste the code into the appropriate areas:
- Everything from the beginning of your HTML code all the way up to the main content section is contained within the header.php file. You’ll need to copy and paste?php wp head()
- Just before the section labeled/head. This is the file where you will paste all of the code from the part markedaside
- Sidebar.php Filename: footer.php — This part is located at the end of the sidebar and extends all the way to the top of the file. Before closing the bracket with/body, include a call to?php wp footer()
- ?in the code.
Afterwards, save your other data to the theme folder by closing the index.html file and creating a new one in its place. Except for header.php and index.php, all of the files should be closed.
Having Trouble Converting or Want Professional Help?
This is something we do on a daily basis for our clients. Schedule a brief chat with us and we’ll be happy to give you with a free quote for completing this task for you.
Step 4: Change the Header.php and Index.php Files for WordPress
Following that, you’ll be modifying the header.php and index.php files to conform to WordPress’s format. This may be accomplished by looking for a link in theheadsection that looks something like this: href=”style.css” link rel=”stylesheet” href=”style.css” Replace that link with this:link rel=”stylesheet” href=”?php echo get template directory uri();? /style.css” Replace the link with this:link rel=”stylesheet” href=”?php echo get template directory uri();? /style.css” Replace the link with this:link rel=”stylesheet” href=”?php echo get template directory uri();?
- You’re finished with it for the time being.
- It should be completely empty.
- To the right of this field, you will paste yourLoop code.
- After that, save and exit the document.
Step 5: Screenshot and Upload
Create a screenshot of your theme and upload it as the final step. The snapshot will provide a sample of your site as it appears in the WordPress administration area. Take a snapshot of this page and crop it to 880 660 pixels in size. Save the file as screenshot.png in your computer’s hard drive. Now, copy the screenshot and paste it into your theme folder. It is now necessary to upload the theme to WordPress. Take the following five steps to get started:
- Make a zip archive of your work
- Visit WordPress
- Select Appearance > Themes and then Add New at the top of the page
- Click Upload Theme
- Upload your zip file
- And then click Install Now.
After that, you may go ahead and activate the theme!
2. Converting HTML Through a WordPress Child Theme
Using a WordPress child theme to convert your original HTML into a content management system (CMS) format allows you a great deal more flexibility and does not require nearly as much technical knowledge as the previous option. It’s also the quickest and most affordable alternative for converting HTML to WordPress content. In order to do this, you will utilize a pre-made theme as a starting point rather than modeling it after your existing website. It is feasible to make changes to the design of your WordPress parent theme in order to make it look as close to the previous site as possible.
Because you’re developing the new website on top of an existing theme, you won’t have to worry about adding WordPress functionality afterwards.
The child theme customizes the parent theme in a way that is appropriate for your particular website. This tutorial will walk you through the process of transforming your static HTML website into a WordPress site using a child theme.
Step 1: Choose a Theme
Before you can begin, you must first choose a theme for your project. Try to pick one that you like, but that also looks similar to your current design. Install the theme on your WordPress website in the same way that you would any other. Just make sure you don’t turn it on yet.
Step 2: Create a New Theme Folder
In a similar fashion to the last procedure, you’ll create a new folder on your computer’s desktop. The folder should be named the same as the parent theme, with the suffix “-child” appended to the end. It’s important to remember that there should be no spaces in the name.
Step 3: Create a Style Sheet
In this phase, we will repeat the process we went through in the previous technique to create a style sheet. The difference is that this time you’re going to include a tag designated “template.” Make sure to mention the name of your parent theme in your description. This is required in order for the child theme to function properly.
Step 4: Create a Functions.php
Following that, you’ll construct a functions.php file that will allow the child theme to inherit the parent theme’s styles. Create a new file with the name functions.php to do this. Make certain that the?php is at the beginning of the file. Now, enter the following code into the box: child theme enqueue styles is a function that allows you to enqueue styles for your child theme () add action(‘wp enqueue scripts’, ‘child theme enqueue styles’); add action(‘wp enqueue scripts’, ‘child theme enqueue styles’); This code instructs WordPress to navigate to the parent theme and utilize the styles that are provided there for the child theme when it encounters the code above.
Step 5: Activate the Child Theme
You may now make use of the child theme by activating it. Make sure to take a snapshot of the page so that it can be highlighted in the WordPress backend before you do anything further. As we did in the last way, create a zip file containing everything and upload it to your WordPress installation. After that, you’ll be able to customize the design to fit the HTML you originally created.
Having Trouble Converting or Want Professional Help?
This is something we do on a daily basis for our clients. Schedule a brief chat with us and we’ll be happy to give you with a free quote for completing this task for you.
3. Import Your Content From HTML into WordPress Using a Plugin
This strategy is only suggested if you are open to change the look and feel of your website. If you want a completely different design, using WordPress plugins might be a far more straightforward route to go. Here’s a step-by-step instruction on how to use plugins to import your content from HTML into your WordPress site.
Step 1: Set Up a New Site
Start by creating a new WordPress website and installing the WordPress theme of your choice. Make certain that it is a template that you like and that it is simple to change. You will need to make some changes to the appearance in order for it to fit your branding.
Step 2: Install the Plugin
It’s now time to install the plugin that makes this possible on your computer. To accomplish this, you’ll need to locate and install a WordPress Plugin called HTML Import 2 on your site. Install it by clicking on the Install Now button, and then activate it.
Step 3: Upload Pages
As soon as the plugin is installed and operational, you may begin uploading your pages to the same server as your WordPress installation.
To begin, click on Files and fill out the form with the following information:
- Import Directory – This is the location where you copied your existing HTML code to be imported
- Old website URL – The old website URL is mostly used for redirection reasons alone. Input the previous URL of the site
- Fill up the blanks with your index.html file. Add in the file extensions of the files that will be imported
- Otherwise, leave them out. Directories to exclude – Remove anything from the previous site that you do not wish to be moved over to the new one. Keeping file names will be preserved since the plugin will automatically utilize your file names as the new URL
After you’ve completed this step, navigate to the content tab and configure the HTML tag that contains the content of your website. There are various tabs that you’ll need to become familiar with, including the following:
- It is possible to tell the plugin how your titles are marked up in the HTML template by selecting the Title and Metadata tab and entering the appropriate information. The Custom Fields tab is where you may save data that will be imported into custom fields
- It is also where you can create custom fields. On the Categories and Tags tab, you’ll be able to categorize and tag the content you’ve imported. It is on the tools page that you may learn about some of the built-in tools that are included with the extension.
Following the completion of each tab, save your changes and then click Import Files.
The WordPress platform, for example, is an excellent choice for those who already have a static HTML site and want to upgrade to a more effective content management system with established features. With the help of WordPress templates and the simple-to-use WordPress Dashboard, you can convert your HTML website into a WordPress website that is easier to administer and far less expensive to maintain.
Having Trouble Converting or Want Professional Help?
This is something we do on a daily basis for our clients. Schedule a brief chat with us and we’ll be happy to give you with a free quote for completing this task for you.