How to Use WordPress for Beginning Coders

Once you have created a database using MAMP/PHPMYADMIN and have downloaded WordPress to the folder on your desktop that MAMP is pointing to, do the following:

Sketch out in a notebook:

The pages you will have in your website. My website has six main pages:

  • Home
  • Portfolio
  • Services
  • Blog
  • About
  • Contact

The elements you will use for each page:

  • Header: Nav
  • Main
  • Footer
  • Sidebar
  • Banner
  • CTA Buttons
  • Sections
  • Forms
  • Bread Crumbs Nav

My website’s home page contains the following elements:

  • Nav bar
    • Logo
    • Main Navigation
    • Search Icon
    • Mobile Menu Icon
  • Banner
    • Hero (Splash) Image
    • H1 or H2 Tagline
  • Two Call-To-Action (CTA) Buttons
  • Section
    • Short description of website
  • Footer
    • Social Media Icons
    • Copyright Information
    • Link to Privacy policy

My Portfolio page contains the following elements:

  • Nav bar (same as home page)
  • H1 Portfolio
  • FooGallery plugin
    • Thumbnail images of my work
    • Full-size images of my work
  • Footer (same as home page)

My Services page contains the following elements:

  • Nav bar (same as home page)
  • H1 Services
  • Section 1
    • 2 H2 Website, Graphic Design, Links to Graphic Design Categories
    • 2 Images
    • Javascript to flip Images so Prices can be seen
  • Section 2
    • Same as Section 1 but no links to Graphic Design
  • Footer (same as home page)

My Blog page does not contains the same Nav bar and Footer as my home page. I have gone into Settings/Reading and selected this page as the destination for my blog list. I think it will populate the page automatically.

My Contact page contains the following elements:

  • Nav bar (same as home page)
  • Plugin: Fluent Forms
  • Footer (same as home page)

Add your Website Pages

Go to the WordPress Dashboard and select Pages/Add New. Add all of your Website Pages.

Create Blog Posts by selecting Posts/Add New from the Dashboard

  • Nav Bar (same as home page)
  • H1 Title of Post
  • Section
    • H3 or H4 & Paragraphs
  • Breadcrumbs Navigation will be in these posts
  • Footer (same as home page)

On the Dashboard, go to Posts/Add New. Add all of your blog posts here. In the top left is a gear icon. This is settings for individual posts. Click it and select the document tab. Create/select a category for each post. The categories should be more general. Use tags for specific categories. You can create sub-categories if you write a lot about a specific sub-category. But if you only write about it once, then just use the tags. You can delete/add/edit categories by going to the Dashboard/Posts/Categories.

Add Your Images

On the Dashboard, go to Media/Add New. Drag and drop all the images for your site here.

Add Your Logo & Favicon

On the Dashboard, go to Appearance/Customize/Site Identity. Either select your logo from your media images or upload your logo if you didn’t upload it with your other images in the previous steps. Go to “select site icon” and upload your favicon.

Insert Your Images on your Pages & Posts

Go to each page and post that you should have an image and insert the correct image.

Create a Contact Form

First choose a Contact Form Plugin from Dashboard/Plugins. I chose Fluent Forms. The new Plugin will show up in your Dashboard as a separate item. Go into it and select New Form. Create a new form. My plugin has me copy the shortcode and paste it into my Contact page. I did that and nothing happened. But when I went into the block selections, I saw the “Fluent Forms” icon. I clicked on that and on the dropdown menu and selected the form I just created. I saved the page and upon viewing the page, the form was there.

What is PHP?

WordPress and Facebook are run using PHP.

PHP is the most widely used scripting language for web development. In general, scripts are short computer programs that quickly complete tasks that one person could complete one step at a time. A scripting language is the programming language used to write those short computer programs.

How is this scripting language used?

It is embedded in HTML code.

What does PHP enable web developers to do?

PHP can generate dynamic page content. It can perform actions on files that are on the server such as create, open, read, write, delete, or close. It can interact with a database by adding, deleting, and modify the data stored there. It can be used control user-access to a website or certain parts of it. It can also encrypt data.

PHP also collects form data, generates dynamic page content, and sends and receives cookies.

What is form data?

There are various forms used on websites to collect information such as login, password, name, address, e-mail address, phone number, and comments. This information is form data.

What is dynamic page content?

It is web content that changes based on the behavior, preferences, and interests that are expressed by the user.

What does it mean to generate dynamic page content?

When users select a button or a choice on a webpage and these choices are submitted, the information is sent to the server, which processes the information and then sends back a different page or section of a page based on the users’ choices.

What are Cookies?

Cookies enables the exchange of information between the browser and server to provide a customized user session, and for servers to remember the user’s past requests.

When we go to a website, the links, buttons, and choices we select as well as the information we input are recorded in a file that is stored by the browser on our computer. The next time we go to that website, this file is uploaded automatically so the website can personalize our experience.

For example, if we create a user name and password on the website, this information can be saved and used for the next time we visit that site. This facilitates our use of that website and makes the experience more enjoyable. If we have to spend too much time looking for our username and password, we may experience frustration and associate it with the use of this website. In the future, we may avoid using the site.

What does it mean to send and receive cookies?

Cookies are sent by the browser to the server when an HTTP request starts. An HTTP request is when we enter and submit a URL or keywords into the browser address bar. The request itself sends no personal information. When Cookies are sent along with the request, they edit, personalize, and control the information that is sent back to the user.

What are the advantages of using PHP?

  • It runs on various types of operating systems. It’s compatible with most servers.
  • It supports many different databases.
  • It is easy to learn and runs efficiently on the server side.
  • It’s free. You can download it from www.php.net.

What I Want to be When I Grow Up

I’m pretty sure I’m already grown up. That said, I’m always learning and growing. What I hope to become in the next five years is an expert web designer/developer.

This is how I plan on obtaining that goal:

  • Learn WordPress
  • Create my Website in WordPress
  • Create CAPE Website in WordPress
  • Create Savage Automation Website in WordPress
  • Get an entry-level job or internship as a web designer/developer
  • Do websites and other designs for small businesses on the side
  • Learn Adobe Premiere, InDesign, XD, and AfterEffects
  • Learn JavaScript

Where am I at now?

I am presently on my first Module in WordPress DMDC 2820. After this class, I will begin JavaScript. I could create websites for CAPE and Savage Automation now, but I’d like to wait until I know WordPress. I have recently submitted five applications for job postings on UpWork and Indeed. I plan on submitting one or two a week until I am hired. I have started a business called Zade Balance. The website is online. As soon as I have time and feel confident enough to start, I will begin social media advertisements. I hope to learn the other Adobe apps and Javascript simultaneous to my first job.

I will update this post as I make further progress.