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.

  • First – I briefly explain the basic process of setting up a website that uses wordpress. I’ve only done it once. What I write is based primarily on my memory of the experience. There’s probably many more ways to go about this, but I still hope sharing my experience will help someone. Definitely consult with more in depth web design websites/books for much better tips on setting up and running a website.
  • A bit down the page, I have the “HTML Coding WordPress website content:” heading. This is where I briefly explain some HTML basics and then demonstrate some of the Tag/element codes. Remember, you can always right click a part of any website text and click the “view page source” option to view the coding for that website. After a little bit of studying, you will quickly recognize more and more of the code, and what it is does on the page.

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.

  • 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.

After you are set up with an account with the WordPress host of your choosing, open up WordPress with the link that they provide. There will be number of options to browse through that automatically determine what your website looks like (appearance).  At some point you can easily install programs called plugins that add functionality, security, etc. (plugins), and adjustment of other easy to follow settings.

As always, make sure to google search topics you want/need to know more about by searching “WordPress” followed by the topic or word you are interested in. 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 that was 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.

  • 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. This is a good way to see how different tags and elements affect the page once you start understanding some coding. If you see the code starting with <!DOCTYPE html> declaration, then you know it is HTML5. HTML4.01 has multiple declarations, that I don’t even want to learn about. So, that’s something to google if you want more information.

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