How to add html code to wordpress page

New Page

How to Add Custom HTML in WordPress

WordPress is a simple content management system (CMS). Most of the time, you won’t need to touch a single code to post content on your website. However, there are advanced tasks that require you to modify a couple of HTML codes in the editor, so understanding HTML can be helpful.

So sit back and relax. Cet article explain comment ajouter des HTML codes on the WordPress website.

What is HTML?

Significa Hypertext Markup Language, which is the backbone of website building.

HTML allows you to organize documents online using tags and attributes, a set of codes. They will then be saved as an HTML file. Every time a browser opens the file, it displays only readable text, which means no labels are displayed.

Work with HTML , note that most elements have opening and closing tags like paragraphs, <p>an example</p> . However, there are also some self-closing tags, such as line breaks, <br> .

If you get more information about HTML, HostingWiki is a great tool to get those references.

¿Who needs to aggregate HTML and WordPress?

The new WordPress editor, Gutenberg, offers a more intuitive way to handle content formatting. Not only that, inserting media files like images or videos, adding design elements and widgets doesn’t take a minute. In short, use the default editor is sufficient for the fondamentaux kisses of format.

However, there is a drawback. To handle specific tasks, relying only on the default editor can be challenging. For example, there are times when you may want to create a custom table, modify images, add borders, etc. for aesthetic reasons.

In any of these situations, inserting the custom HTML code into your WordPress publication can be a good option.

How to Aggregate HTML and WordPress (With Examples)

There are three common ways of how you can add custom HTML codes in WordPress. Ya mer for publications, pages or widgets like.

Aggregate HTML in WordPress Posts

If you want to insert HTML codes in your posts, follow these steps:

  1. Start a session in your WordPress panel .
  2. Click on Todas las publicaciones , in the navigation menu.wordpress html
  3. Elija the post that desea editar there will be led by the visual editor of WordPress.publication de wordpress
  4. Click the Plus icon in the block area or at the top of the editor.
  5. Choose Custom HTML icon under Formatting custom html
  6. Alternatively, you can switch to editor mode. Click the three-dot menu in the upper right corner, then select Code Editor. test post
  7. Feel free to add your desired code. As an example, the code for making a simple table will be used. <table style=”background-color: #87ceeb;”> <tbody> <tr> <td>Games</td> <td>Ranking</td> </tr> <tr> <td>PUBG Mobile</td> <td>1</td> </tr> <tr> <td>Stardew Valley</td> <td>2</td> </tr> </tbody> </table>
  8. The result will look like this: wordpress preview html publication

Adding HTML in WordPress Pages

This method has a similar process to WordPress posts. The steps are:

  1. Click All Pages on your WordPress dashboard. all pages
  2. Add a new page or edit an existing one.
  3. Click thePlus icon, either on the block area or from the top of the editor.
  4. Select the Custom HTML optionunder the Formatting Another way is by picking from the Most Used segment or switching the editor mode to Code Editor.
  5. Add the custom HTML code to modify your WordPress page. custom html
  6. Click Preview if you want to see the results before publishing. wp post preview before posting
  7. Here is the outcome: Leave

Adding HTML in WordPress Widgets

To insert HTML code in your widgets, please do the following:

  1. From the WordPress dashboard, go to the Widgetspage under the Appearance menu. appearance
  2. Choose the Custom HTML option and click Add Widget. add widget wp
  3. Fill out the widget’s title and insert your HTML code. code HTML
  4. Savethe changes.
  5. The result: results

Extra Tips

You’ve learned how to add HTML in WordPress. It’s not as hard as it seems, right? Before you continue, there are important keys that you need to keep in mind.

Always Use the Clean Code

There is a time when you don’t write the code from scratch in WordPress, but copying from other sources like Google Docs. This is fine.

However, make sure to clean up any borrowed characters from those sources like  for line breaks, or <span style=”font-weight: 500;”> </span> for span style.

It’s necessary because too many cluttered characters will affect your site performance.

Learn More HTML Tags

It is recommended to learn basic HTML tags. With this knowledge you can cover elemental needs for making attractive content. Here are a few of the basics:

  • Rubriques : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • Unordered lists : <ul>
  • Ordered lists : <ol>
  • Insertion d’images : <img>
  • Inserting links  : <a>

Conclusion

Adding HTML in WordPress is a breeze. Just make sure the code is correct. You can add HTML codes to your posts/pages or widgets.

However, if you’re only dealing with basic formatting and insertion, the default WordPress editor can handle the trick.

Happy customizing!

2cd9e676ba994788aef3447a989990deEditeur HTML by the author Posted on2019-09-062019-09-06 Categories Articles , HTML

How to Upload HTML Files and Pages to WordPress

Precio Shayla

Precio Shayla

Updated: May 10, 2022

Publication : 25 octobre 2021

Why upload HTML files to WordPress? If you’re building or growing a WordPress website, importing HTML files and pages can save you significant time when setting up your website or when adding new, customized content. Sometimes you might want to build a custom HTML page or use pages from an older website and then add them to WordPress.

WordPress website owner uploading an HTML file to WordPress

In this post, we’ll show you how to add your HTML files and pages to your WordPress site.

Download Now: How to Launch a WordPress Website [Free Guide + Checklist]

We’ll cover: 

  • What is an HTML file?
  • Why Upload HTML Files to WordPress
  • How to Upload an HTML File to WordPress
  • How to Add an HTML Page to WordPress

What is an HTML file?

HTML stands for “hypertext markup language,” which is a language used to create and structure webpages. HTML files are text-only documents, and they contain highly interactive content that’s designed to be viewed on a web browser. HTML files can be created from scratch, or you can take existing files — like Google Docs — and convert them into HTML.

Below is an example of what an HTML file could contain.

HTML files can be loaded on any type of web browser. This makes them more mobile-friendly, because they’ll render properly regardless of the device or operating system being used. If you have multiple people working on your website, or if you have outsourced the job to an external developer, HTML files are a great way to distribute content before publishing it on your website.

But, this isn’t the only benefit of using HTML files. When you’re working in WordPress, HTML files are great for creating customized content that may not be offered natively with your current WordPress theme.

Read on for some additional reasons to upload HTML files and webpages when building your site on WordPress.

Why Upload HTML Files to WordPress

WordPress isn’t just a website builder, it’s a content management system. Which means, even if your site is hosted on WordPress, you don’t have to create every single page within the WordPress interface.

When it comes to creating webpages, WordPress has its benefits. You can create beautiful pages with pre-designed themes, and you can even install page builders like Elementor to create sales pages, landing pages, and product pages.

However, you may want to store custom HTML files in your WordPress dashboard. Here are some of the reasons you’ll want to.

You don’t want to rebuild pages from scratch.

You might have an existing HTML page that converts well, and rather than rebuilding it on WordPress, you can save time by just uploading the page directly. This also reduces the risk of human error, because rather than manually copying and pasting code, you can simply upload the content altogether via an HTML file.

You want to customize your page beyond a bottled theme.

Another benefit of uploading HTML files is that it allows you to customize your content outside of what your theme may allow. For instance, let’s say your old site used a template or page that you really liked, but it’s not offered on WordPress. You can copy the HTML for that content, and then upload it to your WordPress site.

Or, you can recreate the content from scratch and write the HTML yourself. Once complete, upload your HTML file to WordPress, and presto! You now have a new, customized page or feature at your disposal.

It’s easier to verify your website with services such as Google Search Console.

Lastly, one big benefit of uploading HTML to WordPress is that it helps you verify your site on Google Search Console. To use Google Search Console, you first need to verify your website, which involves uploading a special HTML file to WordPress. This gives Google access to your data and ensures your site is indexed properly by Google’s search engine.

Ready to start uploading? Read on for a step-by-step guide to uploading HTML files to WordPress.

How to Upload an HTML File to WordPress

  1. Navigate to your Admin Dashboard.
  2. Click ‘Pages’ in the left sidebar.
  3. Choose an existing page or create a new one.
  4. Click ‘Add Block.’
  5. Add a ‘File’ block.
  6. Choose your HTML file.

1. Navigate to your Admin Dashboard.

You can use the WordPress Visual Editor to quickly add HTML files to your website. To access the Visual Editor, first go to your admin dashboard.

upload an html file to wordpress: access your admin dashboard

2. Click ‘Pages’ in the left sidebar.

Next, look at the left-hand sidebar. There should be an option labeled “Pages.” Click it. That should load a new screen to the right, similar to the example below, where you see all the pages you’ve created.

upload an html file on wordpress: click on the pages in the left sidebar

3. Choose an existing page or create a new one.

Now, you should have the option to either edit an existing page or add a new one. To add a new page, simply click the button next to the “Pages” title that sasys “Add new.”

upload an html file to wordpress: add pages buttonIf you would like to edit an existing post, click on the post name itself, and you’ll immediately load the editor. The Visual Editor should open by default, but if you’re also using a page builder such as Elementor, you’ll want to hover over the page’s name and click “Edit,” instead of “Edit with Elementor.”

4. Click ‘Add Block.’

Once you’ve accessed the Visual Editor, click the option in the top left to “add block.” This will trigger a dropdown menu on the left-hand side of the screen.

upload an html file to wordpress: Add a WordPress block

5. Add a ‘File’ block.

Using the search bar at the top of the left-hand menu, search for the term “File.” Then, click on it to upload a new file.

upload an html file to wordpress: add a file block in the visual editor

Alternatively, you can also search for “HTML.” This block will allow you to input HTML, but you’ll have to copy and paste it manually into a code block. This works if you’re uploading short snippets of code, but it’s more efficient to use the media option for larger uploads.

uploader un fichier html sur wordpress : Ajout d'un bloc HMTL WordPress

6. Choose your HTML file.

In the module that appears, select the option to “upload.” Then, choose the HTML file that you wish to add to the post. Once your file is selected, it should be automatically added to your post.

f2O6XvR99f9zEhqpl7gXaF11z9S1rxxXGMnmVJEKITicztsGt_FaAfHBfJMz-FiaYEm6yELn1prCkx5Wx9w9ALflH_Sn_ZHB9ft-B9XVJ_OzzgDNdERMn_tSg4ib-hOf1VCs2Xki=s1600

You can also add the file to your media library. This will allow you to reuse the HTML file in other blog posts.

How to Fix “File Type is Not Permitted for Security Reasons” Error

In some cases, you may encounter this error when trying to upload your HTML file to your blog post or media library.

upload an html file to wordpress: file type not permitted error

The easiest way to navigate this is to use an HTML block instead. With an HTML block, you can copy all of the code in your HTML file and paste it directly into your WordPress page — similar to the example below.

HTML file example WordPress

How to Add an HTML Page to WordPress

Let’s say we were the proud designers of the site, Lonéz Scents, and we wanted to migrate this page to WordPress.

Lonez Scents about page

Image Source

Let’s take a look at the process of migrating this page to WordPress.

1. Compress the HTML page into a ZIP folder.

Export the webpage from your current CMS. You don’t need to touch any of these files, unless you want to customize them before uploading them to WordPress.

Make sure this HTML file is compressed into a ZIP folder. 

2. Navigate to your WordPress website’s cPanel.

Excellent! Now you have the HTML file you’ll be migrating to your WordPress website.

Next, it’s time to access your cPanel, where your website’s database is located. You get these logins from your hosting provider.

Pro Tip: If you’d rather someone else do the heavy lifting for you, some hosting providers will migrate your webpages for you for free. Make sure to check with your hosting service.

To navigate to the cPanel, login to your hosting provider’s website and find out where they keep the link to your cPanel.

In Bluehost, click “Advanced” on the sidebar, scroll down to “Files,” then click “File Manager.”

upload an html file to wordpress: file manager inside the hosting website

3. Enter your public_HTML folder inside your cPanel.

Your public_HTML folder will be found in the left sidebar. If you host several websites, you’ll need to choose the website where you want to migrate the page to.

upload an html file to wordpress: public_html folder inside cpanel

4. Add a new folder to your website’s public_HTML folder.

Click the “+Folder” button at the top of the screen to create a new folder. Now, name your new folder and then click Create New Folder. (This folder name will be a part of your HTML page’s URL.)

upload an html file to wordpress: create new folder inside cpanel

5. Upload the zipped HTML file to the new folder.

Once the folder is created, click on it. Then, click on the Upload button at the top of the screen. There should be an option Select File and you can choose the zipped HTML file you want to add.

6. Extract the files.

Once uploaded, your zipped HTML file is now in the folder. Select the file and click Extract at the top-right corner of the screen. Now, click Extract files.

subir un archivo html a wordpress: extraer archivos

7. Preview your page.

You’ll now see an option called Extraction Results. Click Close. Then, click Reload in the middle of the screen. You’ll see the unzipped HTML file in the folder. (If you like, delete the ZIP file. It won’t affect your extracted HTML page or any other folders.)

Finally, you can preview the page by visiting yourdomain.com/FolderName/HTMLFileName.html.

And you’re done! You now know how to upload HTML files to your WordPress website.

Upload HTML Files to WordPress to Build Your Site

Uploading HTML files to WordPress may just be the way to go — especially if you want to create a highly customized site that you can’t build with a theme. It’s also a great option for you if you want to migrate your old site to the WordPress platform. The best part is that it’s easy — but make sure to bookmark this guide, so you never get lost during the process.

Editor’s note: This post was originally published in July 2019 and has been updated for comprehensiveness.

palabra clave

Topics: WordPress Website

Don’t forget to share this post!

Adding HTML to a WordPress Page/Post

Updated on April 21, 2022 by John-Paul Briones

2 Minutes, 54 Seconds to Read

AddThis Sharing Buttons

Share to Facebook Share to Twitter Share to LinkedIn Share to Email Share to More

In this tutorial, we will show you all the methods to display and add HTML code to a page or post in WordPress. There may be times when you want to use HTML in your WordPress website . For example, you can code a hyperlink by hand or view the entire post in HTML and make multiple changes at once.

So, follow along as we cover the steps for the latest editor (Gutenberg) as well as the classic editor.

  • How to add HTML to a page/post
  • Add HTML to a page/post with the classic editor

Don’t have time to read our full guide? Watch our presentation video. How to add HTML to a page/post

In the latest version of the WordPress editor, there are 3 ways to add HTML to a page or post. You can add a Custom HTML block, edit a single block as HTML, or edit the entire page/post HTML with the code editor.

Add a Custom HTML Block

Keep in mind that if you use this option, you will not be able to switch back to the visual editor.

  1. Login to your WordPress Dashboard.
  2. In the navigation menu click the Pages or Posts link, depending which one you want to add HTML to. For the purpose of this tutorial we’re modifying a Post. Acceder a la lista de publicaciones en WordPress
  3. Roll your mouse over the one you want to add HTML to and click the Edit button. Edición de una publicación en WordPress
  4. Navigate to the section you want to add HTML to and click the plus + button. Agregar nuevo bloque a la página/publicación
  5. Type HTML in the search box.
  6. Click the Custom HTML option. Selección del bloque HTML personalizado
  7. A new block will be created where you can add your HTML code as needed. Agregar código a un bloque HTML personalizado

Edit A Single Block as HTML

If you have an existing block WordPress allows you to switch to the code editor. You can then view and modify the HTML as needed. This is a good option if you only want to make changes to a single section of the page or post.

  1. Edit a page or post in the WordPress Dashboard.
  2. Click the block you want to modify.
  3. Select the options link, it looks like 3 dots. Opciones de bloqueo de WordPress
  4. Choose the Edit as HTML option. Block editing as HTML
  5. You will then see the HTML code for that block and can modify it as needed. Using the code editor
  6. If you want to switch back to the Visual editor click the block again, select option, then choose Edit visually. Edit page/post visually

Edit Full Page/Post With the Code Editor

The third option is to edit the entire page or post with HTML. This method is a quick way to make HTML changes to several sections of the page or post at the same time.

  1. Edit the page or post you want to modify.
  2. Click the Options menu on the top right of the screen. It looks like 3 vertical dots. Edit page options in WordPress
  3. Choose the Code editor section under Editor. Another option is to click the Ctrl+Shift+Alt+M keys at the same time. Access the page/zip editor
  4. Will then see the entire page/post as HTML and can add code as needed. Full Page Code Editor in WordPress

Add HTML to a Page/Post With the Classic Editor

  1. Navigate to the page or post you wish to edit and edit it.
  2. Click on the Text tab . You will then see the text of the page or post and be able to enter the HTML.Access to the Text tab in the Classic Editor
  3. Add your HTML as needed.Classic text editor in WordPress

Congratulations, you now know how to add HTML to a WordPress page or post! Looking for more guides? Check out our WordPress how-to articles!

Guide to WordPress for Small Business Owners

Get our free step-by-step guide to creating a WordPress website

Learn the ins and outs of creating a winning WordPress site step by step, from start to finish.

Free download

 

J. B.

John-Paul Briones Content Writer II

John-Paul is an electronics engineer who has spent most of his career in IT. He has been a technical writer for InMotion since 2013.

More articles from Jean-Paul

Google Google translator

Google Google Translate


Video How to add html code to wordpress page

Related Posts

How to add seo keywords in wordpress

Contents1 Cómo agregar palabras clave de SEO en WordPress (aumentar el CTR y las clasificaciones)1.1 Post Title1.2 Headline1.3 Header Tags1.4 Introduction and Conclusion1.5 Body Copy1.6 URL1.7 Meta…

How to embed google calendar into wordpress

Contents1 How to Add a Google Calendar in WordPress (Step by Step)2 Add a Google calendar to your website3 calendario de Google3.1 Versatile plans and pricing4 Video…

How to change the logo in wordpress

Contents1 How to Add a Custom Logo to Your Site Header2 Site Logo2.1 Planes y precios versátiles3 Add, remove or edit a custom logo4 Video How to…

How to add a popup on wordpress

Contents1 Easily create a WordPress emergent form (2 forms)1.1 ¿Por qué usar un formulario emergente de WordPress?1.2 Método #1: Crear un formulario emergente con OptinMonster + WPForms1.3…

How to roll back wordpress version

Contents1 How to Revert WordPress: Undo WordPress Updates (Easy Way)2 How to Downgrade WordPress & Roll Back to a Previous Version2.1 1. A WordPress update included significant changes…

How to rollback wordpress version

Contents1 How to Downgrade WordPress and Revert to an Older Version1.1 1. A WordPress update included significant changes that are not compatible with your theme or plugins1.2…