How to Use WordPress for Beginning Coders

Posted by Gretchen on February 25, 2020
Web Development

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.