About the Main Site + Posting

← Back to Tutorial Categories

CHOOSE A SECTION

1. About WordPress
• Log In/Out & Profile
• Dashboard

2. Making Posts
• Types of posts (images, interview, new music, news)
• Make/Edit a post

3. Making Pages
• Types of pages (discography/movie, info, table, list)
• Make/edit a Page

4. Plugins
• The list (purpose)
• Add new

5. Aspects to add to Posts/Pages
• Upload/Add Media (photo, video, audio)
• Types of Links + Insert Links

1. ABOUT WORDPRESS

Log In/Out & ProfileDashboard
1. to Login: go to https://cari-fletcher.com/wp-login.php

  • Username: nicole
  • Password: temporaryCF
Once you log in, there will be a black bar on top – which will always be visible when logged in.

2. to Logout: (in the black top-bar) hover over “Howdy, nicole” & click “Log Out”
3. to Edit/View your profile: from the black sidebar menu, click “Profile”
OR from the black top bar, up in the right hand corner, hover over “Howdy, Nicole” and click “Nicole” or “Edit Profile” (they do the same thing)
Here, you can edit:

  • The color scheme of the dashboard (just for you) [yellow outline]
  • Show/Hide the black toolbar (keep this checked) [blue outline]
  • Personal information (please change password & email) [red outline]

and more

PS: Your name will never be displayed as “Nicole” — I have edited the theme settings to always post as “admin” (display name publicly as)

(full size)

 

The dashboard is the main/start page of the whole site. You get a quick look at everything (number of posts/pages, recent activity, etc)

The dashboard has 2 menus:

  1. Admin Menu – top bar (blue bracket)
  2. Sidebar Menu – dashboard navigation (red bracket)

(full size)
The Admin menu features:

  • “WordPress” icon link (hover) — use this to learn about wordpress.org
  • Website/Dashboard link titled “Introducing FLETCHER” — use this to go between the site (cari-fletcher.com) & the dashboard (/wp-admin)
  • + New button — create new post, page, etc.
  • User Menu “Howdy, Nicole” — use this to edit/view your profile or logout
The Sidebar Menu features:

  • Posts — View all posts, Make a post, View/edit/add categories, View/edit/add tags
  • Media — Upload/Edit/View all photos, videos & audio files uploaded via WordPress
  • Pages — View all pages, or make a new page
  • TablePress — HTML table maker (with advanced options – import/export & mobile friendly)
  • Contact — Make or edit a contact form (contact, affiliate application)
  • Profile — Edit/View your profile

 

════════════════════════════════════════

2. MAKING POSTS

Types of PostsMake/Edit a Post

There are a few different types of posts that are posted to the website. Most of them follow same format. Each type of post will have a template.

1. Photos (added to the gallery)

This post usually includes:

  • Description
  • Photos (from the gallery)
  • Gallery links

(full size)
2. Video/Audio (music, interview, etc)

This post usually includes

  • Description
  • Embed of video/Audio
  • Photos (if any – ex: screenshots)
  • Gallery links (if photos)
3. Written Interview (Magazine/Website)

This post usually includes:

  • Description
  • Photos (if any – ex: photoshoot)
  • Gallery links (if photos)
  • Cut/ “Read More” link
  • Interview text in a blockquote

(full size)
4. Announcement / New Music

This post usually includes:

  • Decription
  • Big Link
  • Photo (cover artwork / poster)

 

1. from the sidebar menu, hover over “Posts” and click “Add New”
OR from the topbar, hover over “+ New” and click “Post”
You’ll be taken to the post editor. There you will see:

  • Post Title (blue outline)
  • Post Editor (red outline)
  • Post Settings (sidebar – green outline)
  • Post options (yellow outline)
View Post Options

= Bold Text

= Italic text

= Bullet point list

= Numbered list

= quote block

= Text align left (default)

= Text align center

= Text align right

= Insert link (text/photo)

= Insert Read more link / cut off

= Show/Hide toolbar (second row)

= Striketrough (cross out / line through text)

= Insert horizontal line / divider

= Font color

= Paste text

= Clear / Erase formatting

= Insert a Symbol (heart, arrows, etc)

= Decrease indent

= Indent text

= Undo

= Redo

= help

Visual (Tab) = Visual editor (current view)

Text (Tab) = HTML (code) editor

2. Write out the post in the editor

3. Select the Category(ies) that the post fits under

4. Click “Publish” to post

(full size)
To Edit a Post:

1. from the dashbiard sidebar, hover over “Posts” and click “All Posts”

2. Hover over the post you want to edit and click “Edit”

You can also delete (“Trash”) posts here

(full size)

 

════════════════════════════════════════

3. MAKING PAGES

Types of PagesMake/Edit a Page

The website features a few different types of pages

1. List

This stype of page usually includes links to other pages (ex: child pages)

  • Related icon (from fontawesome.com)
  • Page title as link
  • Description of page

(full size)
2. Table

This style of page is usually used to display images (as links) and includes:

  • Sections with HTML Tables
  • Image (poster / album artwork) linked to child/related page
  • Title or project/page (as a link)
  • The year (as a link)

*Red lines represent table

(full size)
3. Simple Information

This style of page is used to display information (text) and includes:

  • Text / Information
  • Headings (if needed)
  • Embeds (if needed ex: form)
  • Links

(full size)
4. Project Information

This style of page is used to display the various information that goes along with one of FLETCHER’s projects. It includes:

  • HTML table (to help with the layout)

Left side:

  • Project Image (poster / album artwork)
  • Links to the project (official websites)

Right Side:

  • Quick stats
  • Description of project
  • Information (extended version of quick stats)
  • Track list
  • Information about each song (using show/hide sections)
  • Music videos (linked to youtube)
  • Photos (linked to photo gallery)

(full size)

 

1. from the sidebar menu, hover over “Pages” and click “Add New”
OR from the topbar, hover over “+ New” and click “Page”
You’ll be taken to the page editor. There you will see:

  • Page Title (blue outline)
  • Page Editor (red outline)
  • Page Settings (sidebar – green outline)
  • Post options (yellow outline)
View Post Options

= Bold Text

= Italic text

= Bullet point list

= Numbered list

= quote block

= Text align left (default)

= Text align center

= Text align right

= Insert link (text/photo)

= Insert Read more link / cut off

= Show/Hide toolbar (second row)

= Striketrough (cross out / line through text)

= Insert horizontal line / divider

= Font color

= Paste text

= Clear / Erase formatting

= Insert a Symbol (heart, arrows, etc)

= Decrease indent

= Indent text

= Undo

= Redo

= help

Visual (Tab) = Visual editor (current view)

Text (Tab) = HTML (code) editor

2. Write out the page contents in the editor

3. Select a parent page (if applicable) that the page fits under

4. Click “Publish” to post

(full size)
To Edit a Post:

1. from the dashbiard sidebar, hover over “Pages” and click “All Pages”

2. Hover over the page you want to edit and click “Edit”

You can also delete (“Trash”) pages here

(full size)

 

════════════════════════════════════════

4. PLUGINS

The PluginsShortcodes Ultimate (plugin)

The website uses plugins to help add extra functionallity. Due to your current user role, you will not have access to editing the plugins (add / delete / settings)

But you will be affected by them and able to use them.

1. Contact Form 7 — Create contact / Submission forms (learn more)

2. CookieYes | GDPR Cookie Consent & Compliance Notice — Adds “Accept Cookies” banner on website

3. Loginizer — Limits the amount of tries to log in (security)

4. Table Press — Make HTML tables

5. Shortcodes Ultimate — Insert things into posts & pages (learn more)

This plugin is used to add many elements to posts and pages. I use BOX and SPOILER the most

Box

This plugin is used to add many elements to posts and pages. I use BOX and SPOILER / ACCORDION the most

[shortcode here]
1. Click “Box”

(full size)
Here you will see a window with all of the settings

Red Outline = Sections to edit (Box Title, Box content)

Yellow Outline = Settings usually kept as it (edit if needed)

Green Outline = Box Preview

  1. Give the box a title
  2. Type out the content (add html style if wanted <b> <em>, etc)
  3. Click “Insert shortcode”
4. Edit the content by using the editor (bold, italic, link, etc)

 

Spoiler
1. Click “Spoiler”  

(full size)
Here you will see a window with all of the settings

Red Outline = Sections to edit (Box Title, Box content)

Yellow Outline = Set as shown (edit if needed)

Green Outline = Spoiler Preview (in open position)

  1. Give the box a title
  2. Type out the content (add html style if wanted <b> <em>, etc)
  3. Click “Insert shortcode”

(full size)
4. Edit the content by using the editor (bold, italic, link, etc)

════════════════════════════════════════

ASPECTS TO ADD TO POSTS/PAGES

Upload/Add MediaTypes of Links & Insert Links

There are 2 ways to insert media (photo, video, audio) into a post or page

From the editor, click “Add Media”
Option #1 – Upload from Computer

Under the “Add Media” tab, drag file(s) over or click “Select Files” to choose the files

(full size)
Option #2 – Insert from URL
1. Click “Insert from URL”2. Paste the URL in the box

All urls must end in .jpg, .png, .gif, .mp4, mp3

*ps: click “Media Library” to insert media that has already been uploaded (yellow outline)

(full size)

 

There are a few different to inser a link into a post

REGULAR LINK

  1. Highlight the text you want to link
  2. Click the “Insert Link” icon
  3. Type the link (with https://)
  4. Click the blue arrow icon or hit enter
OUTGOING LINK

If the link is not cari-fletcher.com/… I like for it to open in a new tab.

follow the first 3 steps from Regular Link

  1. Click the “Links option” icon
  2. Click/Check “Open link in a new tab”
  3. Click “Update”
 <p
EXISTING POST / PAGE LINK

If you’d like to link to an existing page or post, follow the first 2 steps from Regular Link

  1. Click the “Link Options” icon
  2. Search for or Select a page or post from the list
  3. Click “Update”

 

BIG LINK

“Big Links” are what I use to make a link stand out. For example, a link to tickets, song download/streaming, etc.

follow the first 4 steps from Regular Link

  1. Select/Highlight the link
  2. from the “Paragraph” dropdown, click “Heading 3”
  3. Center the link by clicking the “align text center” icon

GALLERY LINK

“Gallery Link(s)” is the box at the bottom of a post that have the links to the albums in the photo gallery – of the photos featured in a post

1. Go the album you want the link of

2. Copy the breadcrumb navigation from the photo gallery album (leaving out HOME)

Paste it as plain text (CTRL + SHIFT + V) into the post

4. Copy the photo gallery URL

5. Insert the link in the album title

6. Click the “Text” tab

7. Put <div class=”glink”> BEFORE the breadcrumb

8. Put </div> AFTER </a>

You can add as many links as needed between <div class=”glink”> and </div>

(full size)

(full size)

(full size)