Some WordPress HTML and CSS tips:

WordPress is pretty easy to use and I am studying up on how to get better at it to improve this site.

As I don’t spend much time building this site, I will mostly be using this page as a reminder to myself of WordPress topics for quick review, but I will also try to write it in an easy to understand format for others trying to learn as well.

Easily setting up a WordPress website:

First off, you need a WordPress host which will guide you through the set up process of what you need for your website.  I’ve only done this once and have no advice to give on what host to use or plan to pay for if the free sites are not an option. Just do a google search of “wordpress website hosts” and compare.

Some books I do not own but look to be worth investigating further.

After you are set up with an account with a WordPress host, open up WordPress with a link they should provide somewhere, and there will be number of options to browse through that automatically determine what your website looks like (appearance) after a few clicks, couple click install programs that add functionality, security, etc. (plugins), and adjustment of other easy to follow settings.

Do a google search of topics you want/need to know more about by searching “WordPress ::followed by topic or word::”. There is a ton of conversations and information out there.

After everything is set up, you will be adding the actual content to your site. The “Visual” tab is pretty easy to use, you simply type what you want, and click the icons provided to change a number of written display options and to add images, videos, links, etc. and it writes the code for you, hopefully exactly how you want it. The “Text” tab is where you can write code or edit the code automatically written from what you added to the “Visual” tab.

HTML Coding WordPress website content:

If you use the WordPress “Visual” tab to set up most of your content, it is a good idea to review the code that was generated by clicking the “Text” tab.

HTML uses starting and ending tags which I added examples of below.  Using WordPress, I type the code into the Text tab to make the changes to the text that you will see. While typing on the Visual tab, I can type the code and it will be displayed as how I typed it. Of course the Visual tab has icons you can click to automatically write the tags for you.

Paragraphs and even single sentences like this one are written within p tags as shown. I never need to use p tags though, I just type text in both the WordPress Visual tab and the text tab.

<p>Paragraphs and even single sentences like this one are written within p tags as shown. I never need to use p tags though, I just type text in both the WordPress Visual tab and text tab. </p>

Heading

Heading

Heading

Heading

Heading
Heading

The 6 heading options are shown above, which were made using the following code…

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

Tags Tags Tags Tags Tags Tags2 Tags2

  • Darkened “Tags” above was made by the code <strong>Tags</strong>
  • Underlined “Tags” was made with <u>Tags</u> ,
  • The “Tags” in italics for emphasis was made with <em>Tags</em>
  • The line through Tags (strikethrough) was made with <del>Tags</del>
  • Second darkened “Tags” was created with <b>Tags</b>
  • Supescripted 2 (smaller and higher 2) was made with Tags<sup>2</sup>
  • Subscripted 2 (smaller and lower 2) was made with Tags<sub>2</sub>

I used an unordered/bullet list (ul) above help organize my comments above. There is also an ordered/numbered lists (ol) you can use. I show both below, followed by the code used to make it.

  • first
  • Second
  • Third
  1. First
  2. Second
  3. Third

<ul>
<li>first</li>
<li>Second</li>
<li>Third</li>
</ul>

<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>


You can make a horizontal line, as shown above and below this text to separate parts of a page by using just  <hr> , which my WordPress changes to <hr /> .


You can align the text to the left side of the page, the center of the page, or the right side of the page as shown below by using the tags shown below that.

Left

Center

Right

<p style=”text-align: left;”>Left</p>
<p style=”text-align: center;”>Center</p>
<p style=”text-align: right;”>Right</p>


Red Green Blue Yellow Orange Pink Gold

<span style=”color: #ff0000;”>Red</span> <span style=”color: #008000;”>Green</span> <span style=”color: #0000ff;”>Blue</span> <span style=”color: #ffff00;”>Yellow</span> <span style=”color: #ff6600;”>Orange</span> <span style=”color: #ff99cc;”>Pink</span> <span style=”color: #ffcc00;”>Gold</span>    …    was used to make the colors above. <span> defines an area to color.


I wanted a simple way to make a button (as shown below). Luckily there’s all kinds of websites for beginners like me where you can make the button look the way that you want by selecting a bunch of options and they will provide the code. I snagged this simpler one from https://www.krisblack.com/journal/create-a-call-to-action-button-using-simple-code where I just had to copy and paste this code into the text portion of my wordpress page…

<div class="button-wrapper">
<a class="button cta-button" href="#">Button Text</a>
</div>

Replace # with the URL you want inserted and replace Button Text with the text you want inserted.

Copying and pasting the code shown above into the Visual tab, and then going into the Text tab to see the code it produced , gave me this code in the Text tab, which I copied from Text tab and pasted into Visual tab so you could read it as follows…

<pre class=”source-code” data-preserve-html-node=”true”><span class=”cm-tag” data-preserve-html-node=”true”>&lt;div</span> <span class=”cm-attribute” data-preserve-html-node=”true”>class</span>=<span class=”cm-string” data-preserve-html-node=”true”>”button-wrapper”</span><span class=”cm-tag” data-preserve-html-node=”true”>&gt;</span><br data-preserve-html-node=”true” /> <span class=”cm-tag” data-preserve-html-node=”true”>&lt;a</span> <span class=”cm-attribute” data-preserve-html-node=”true”>class</span>=<span class=”cm-string” data-preserve-html-node=”true”>”button cta-button”</span> <span class=”cm-attribute” data-preserve-html-node=”true”>href</span>=<span class=”cm-string” data-preserve-html-node=”true”>”#”</span><span class=”cm-tag” data-preserve-html-node=”true”>&gt;</span>Button Text<span class=”cm-tag” data-preserve-html-node=”true”>&lt;/a</span><span class=”cm-tag” data-preserve-html-node=”true”>&gt;</span><br data-preserve-html-node=”true” /><span class=”cm-tag” data-preserve-html-node=”true”>&lt;/div</span><span class=”cm-tag” data-preserve-html-node=”true”>&gt;</span></pre>


More to come! Including…

  • Input and button tags

 

https://www.youtube.com/electronzap please subscribe to my YouTube channel!

Any donations will help me update this site faster and make more YouTube videos! https://www.patreon.com/electronzap

As an Amazon Associate I earn from qualifying purchases

 

  • This website is only intended to provide supplemental information to those already studying electronics. It takes no responsibility for how that information is used and the possible injuries or other damage that may arise