Adding HTML Code to WordPress
In our latest YouTube tutorial, we walk you through HTML in WordPress.
We used two methods to acomplish this. First using the HTML block in the standard WordPress editor (Gutenberg).We also use the free version of Elementor page builder to add HTML. This uses the HTML widget.
The most common use for this is to embed content and functions from other websites.
For example, we can embed the HTML code to share a google map, or a facebook feed. There are loads of other things you can add to your page using HTML embded code.One thing you will need to bear in mind is that the code will often be aligned to the left margin.
If your layout relies on a centered style you can wrap your code in a <div> to make it all centered.
For example:
<div style="text-align:center;">
<!-- Insert your HTML code here -->
</div>So our example of adding the embed code for a google map now looks like this:
<div style="text-align:center;">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3540.012385155034!2d153.02230601505678!3d-27.468873782891276!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b915a03617032ab%3A0x80626cde56d40c7c!2sAlbert%20St%2C%20Brisbane%20City%20QLD%204000!5e0!3m2!1sen!2sau!4v1595225726124!5m2!1sen!2sau" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>We just paste these into our HTML block in the WordPress editor and we are done!
