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.

Quick list of first things often done before coding HTML

  • Get a website host that supports wordpress
  • Pick a domain name
  • Choose a theme (automatically organises your page
  • Plugin protection from attacks: Plugins quickly and easily add functionality. I recommend clinking in this order… Plugins (link) – Add new (link). And in the box where it says “Search plugins…” type “security”. A list of plugins will appear that can help protect your site from attacks. I like Wordfence. Click the install now button. And then when that same button says “activate” click it again, and you should be set! It should be added to your wordpress menu. Just follow the instructions. Always update plugins when there are updates. That helps fix vulnerabilities.
  • Practice building a simple page with the page builder visual (what you see is what you get) tab. Look through all the options available and do a google search (“wordpress ::insert topic here::”) to learn more. Use the “text” tab to see the coding used to get the results on screen.
  • As desired/required, study up primarily on HTML (the primary coding for building websites) plus CSS and other coding languages you think will be helpful.

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:

  • W-Y-S-I-W-Y-G (What You See Is What You Get) – This is what I like about WordPress. You can quickly make a site without knowing any coding. I knew literally no website coding when I started this electronzap.com site and I had a functioning site in less than a day. You simply type what you want and select options and follow directions to add things. What is displayed is pretty close to what your site will look like. There’s also ways to preview your site to see exactly what it will/or does look like. You can always change your site whenever and however often you want. Still learn at least basic HTML coding though. You can jump back and forth from the W-Y-S-I-W-Y-G visual tab, and the text tab, where you can view, and edit, the code that was produced in the visual tab.

Some books I do not own but look to be worth investigating further. As an Amazon Associate I earn from qualifying purchases

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.

  • Syntax – The words used to make up a language. In this case, it’s the code that your browser(s) know what to do with.

NOTE: If you are on any website, you can right click a part of the page where there is regular text, and select the “view source code” option to see the code that is used to make the page. 

<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 usually 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>


Anchor links to jump to specific parts of a page

  • Header – Go to the header.

Code used above

<ul>
<li>Header – Go to the <a href=”#Header”>header</a>.</li>
</ul>
<h4 id=”Header”>This is a H4 header</h4>

Click this to go to the top of the page Top

Code for the link, added after the text, is

<a href=”#top”>Top</a>


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