Table of Contents
Welcome 1
Add a New Page 2
Delete a Page/Remove from Site Navigation 3
Manage Footer Links 4
Add a New Heading 5
Add a Paragraph Block 6
Add a PDF (File Block) 7
Add Columns/Add a Button 8
Add an Image 9
Add a List/Add a Quote 10
Add Extra Space/Add a YouTube Video Embed 11
Create a Reusable Block 12
Revert Back 13
YOAST SEO - Focus Keyphrase 14
YOAST SEO - Readability/Rating/Social 15
Emergency Notication System (ENS) 16
Custom Functions (these may not apply to your website)
Add/Delete a News Post 18
Manage the Bootstrap Carousel 19
Edit and Update a Custom Area 20
Create/Add Photos to a Photo Gallery 21
Move/Reorder Photos in a Photo Gallery 22
WordPress | Welcome
If you are reading this, you must have a beautifully designed, well-functioning,
responsive WordPress website created by the GIC. Congrats! We are excited to
work with you!
In this training guide you will learn how to update your website with ease. This
guide will teach you how to use these blocksto update your site. There are
blocks available for all kinds of content: paragraph text, headings,
images, lists and more! With blocks, you can do more with fewer plugins and
create modern layouts that work across all screen sizes and devices.
Keeping your website up to date is a very important job, as you are helping to
connect Delaweareans to their government! Try to have fun while updating
your website, update often, ex your creative muscles and always remember
to call the GIC if you get stuck and need help! The
power is in your hands.
1
WordPress | Add a New Page
1ST STEP
Add a New Page:
Go to “Pages”,
Choose “Add new”.
(To edit - click on page title or edit under it)
Add page title. (Keep short for navigation and
search engines)
Add page content/images/links.
Put all relevant “tags” in the “Tags” section with a
“,” separating each.
If the page is a part of a larger section, for
instance, this page is a “News Archive” page and
should be a part of “News”, select the appropriate
“Parent” page from the right column menu.
Save as Draft or Publish/Update.
Add a Page to the Top Menu:
Go to “Appearance”.
Choose “Menus”.
Select the “Main Navigation” menu from the
select bar.
In the rst column on this page you will see a
mini menu titled “Pages”. Select the
corresponding checkbox to the page you would
like to add to your menu.
Click “Add to Menu”.
Your page is now a menu item in the navigation.
You should see it to the right, listed with the
other menu pages.
You can also edit the title of this page here to
make it shorter on the navigation menu, if
desired.
2ND STEP
Position Page in the Top Menu:
Now that you have added your page to the
navigational menu you must position it to where
you would like it to appear.
Drag and drop where you would like your page
to appear in the navigation.
If you would like your menu item to appear as a
sub-menu item you would drag and drop it so it
is below and slightly indented under the parent
page.
If you would like your page to appear as its own
menu item, make sure it is not indented under
another page. It should line up with the other
“top-level” (parent) pages.
Click the “Save Menu” button.
3RD STEP
Pages Menu:
Choose “Add New”
List of pages, can click on page name or
edit to edit the page or post.
Appearance menu:
Select which page you would like to
add to the navigation here:
Below is an example of menu structure. “Programs” is a top
level (“parent”) menu item. “Programs and Expertise” and
“GIC Current Projects” are sub-menu (“child”) items under
“Programs”. Please note that our responsive menu items
only go one level deep. For example, you cannot place
another page under “Programs and Expertise” as this would
break responsiveness on mobile devices.
2
WordPress | Delete a Page/Remove from Site Navigation
1ST STEP
Delete a Page:
Go to “Pages”.
Locate the page you want to delete.
Hover over the title name of the page. You will
see options appear below it. Click the link that
says “Trash”. An alternate way is to open the
page and under the section “Publish” click the
link that reads “Move to Trash” and click the
“Update” button.
If you delete a page it will automatically be
deleted from the navigation.
2ND STEP
Remove a Page from the Top Menu:
Go to “Appearance”.
Choose “Menus”.
Select the Main Navigation menu from the
select bar.
Under the “Menu Structure” section, nd the
page you would like to remove from the
navigation and click the down facing caret.
Click the link that says “Remove”.
Then, click the “Save Menu” button.
Use these steps when you do not want to delete
a page but want it hidden from the navigation of the
site.
One option is to hovor over the selected page and click “Trash”.
Another option would be to open the actual page and click “Move to Trash”
under the publish section.
If you accidently trash a page, don’t worry. You can restore the page by clicking the “Trash” link at the top of the
“Pages” page. Hover over the page title name you would like to restore and click the “Restore Page” link. It will now
automatically be placed back into the pages listing. You can delete a page permanently but, please be aware if you
do this, the page will be gone and the GIC cannot restore it.
3
2
WordPress | Manage Footer Links
4
1ST STEP
Add a Page to the Footer:
Go to “Appearance”.
Choose “Menus”.
Select 1 of the 3 columns in the footer from the
select bar.
In the rst column on this page you will see a
mini menu entitled “Pages”. Select the
corresponding checkbox to the page you
would like to add to your footer column.
Click “Add to Menu”.
Your page is now a menu item in the
navigation. You should see it to the right, listed
with the other menu pages.
You can also edit the title of this page here to
make it shorter on the Navigation menu, if
desired.
2ND STEP
Remove a Page from the Top
Menu:
Go to “Appearance”.
Choose “Menus”.
Select 1 of the 3 columns in the footer from the
select bar.
Under the “Menu Structure” section, nd the
page you would like to remove from the
navigation and click the down facing caret.
Click the link that says “Remove”.
Then, click the “Save Menu” button.
WordPress | Add a New Heading
HEADING
Add a New Heading:
Click the plus sign in the top left corner.
You can search for “Heading” or scroll through
the block options.
Click the “Heading” block option.
A new “Heading” block will appear.
You can type your new page heading and then
select which type you would like it to be.
(example: H2, H3, H4). Each of these headings
are set and styled to match your site’s
branding.
Heading Block:
5
WordPress | Add a Paragraph Block
PARAGRAPH
Add a Paragraph Block:
Click the plus sign in the top left corner.
You can search for “Paragraph” or scroll
through the block options.
Click the “Paragrah” block option.
A new paragraph block will appear. You can
now add text and links.
There are options to make your text bold
or italicize and/or choose text alignment.
You can utilize the up and down arrows to adjust
the placement of your block.
To add a link highlight the text you would like linked and then click
the chain link icon. A window will pop up that you can add your link
destination to. Make sure to toggle the “new tab” option if linking out
to a site other than your own.
Paragraph Block:
6
7
Add a PDF (File Block):
Click the plus sign in the top left corner.
You can search for “File” or scroll through the
block options.
Click the “File” block option.
A new “File” block will appear.
Select the “Upload” button to add a new PDF.
Select the pdf you want to add from your
computer and click “open”. If you want to edit
the title text of the PDF appearing on the page
simply highlight the text and edit.
Select the “Media Library” button to select a
PDF that has already been uploaded to your
site.
It is a best practice for PDF’s to open in a new
tab. Make sure to toggle the “Open in new
tab” option on.
If you do not want the “Download” button to
appear next to the link you can remove it by
toggling the “Show download button” under
the “Block” section to o.
WordPress | Add a PDF (File Block)
PDF
File Link Options:
File Block:
8
Add Columns:
Click the plus sign in the top left corner.
You can search for “columns” or scroll through
the block options.
Click the “Columns” block option.
A new “Columns” block will appear.
Select which column variation you would like
to start with.
Once you select your column layout, the
column layout will appear with plus icons.
You can then select what type of blocks you
want to place within each column.
WordPress | Add Columns/Add a Button
COLUMNS
Add a Button:
Click the plus sign in the top left corner.
You can search for “buttons” or scroll
through the block options.
Click the “buttons” block option.
A new “buttons” block will appear with the
default black button.
Add your button text. For example “View More”.
Next, style your button but using the options
to the right. (background color, shape, etc.)
To link the button up, you want to place your
cursor on the text and click the chain link icon.
Place your url in the input box. Finally click the
arrow submit button.
BUTTONS
Sample two column block:
WordPress | Add a Image
9
IMAGE
Add a Image:
Click the plus sign in the top left corner.
You can search for “Image” or scroll through
the block options.
Click the “Image” block option.
Select the “Media Library” button.
You can then upload a new image by selecting
the “Upload Files” tab and dragging and
dropping your new image in or by clicking the
“Select Files” button and searching your
computer for the image.
You can select an image that is already
uploaded to your website by selecting the
“Media Library” tab.
When uploading a new
image make sure to ll out the
“Alt Text” portion of the
“Attachment Details” section.
This feature is important for
screen readers. You will want
to describe the image as best
as possible.
To the right there is a menu
of image settings to select from. You
can adjust the alt text and select the
image size.
Image Block:
Media Library - Image Upload:
Attachment Details:
WordPress | Add a List/Add a Quote
LIST
Add a Bulleted List:
Click the plus sign in the top left corner.
You can search for “List” or scroll through the
block options.
Click the “List” block option.
A “List” block will appear with the rst bullet
ready to ll out.
Simply hit return to add another bullet to
your list.
QUOTE
Add a Quote:
Click the plus sign in the top left corner.
You can search for “Quote” or scroll through
the block options.
Click the “Quote” block option.
A “Quote” block will appear ready for you to ll
enter the quote and a special place for the
citation.
10
WordPress | Add Extra Space/Add a YouTube Video
SPACER
Add a Spacer:
Click the plus sign in the top left corner.
You can search for “Spacer” or scroll through
the block options.
Click the “Spacer” block option.
A “Spacer” block will appear.
You can adjust the height of the space by
dragging and the tiyn blue circle up or down.
YOUTUBE
Add a YouTube Video Embed:
Click the plus sign in the top left corner.
You can search for “YouTube” or scroll
through the block options.
Click the “YouTube” block option.
A “YouTube” block will appear.
Paste the URL for the YouTube video you want
to share into the input box.
Click the “Embed” button.
11
WordPress | Create a Reusable Block
REUSABLE BLOCK
Create a Reusable Block:
After creating a block that you feel you will use
a lot throughout your website, click the 3
vertical dot menu to create a “Reusable” block.
From the menu of options select “Add to
Reusable blocks”.
The block you were working on will transform
to an input eld where you can name the
resuable block you just created.
Click the “Save” button.
To using this resuable block in the future, click
the plus sign and type in “Resuable”. You will
now nd all the resuable blocks you have
saved.
12
WordPress | Revert Back
REVERT
Revert Back:
To revert back to an older version of your page
or post, select the “Revisions” button under the
“Document” tab on the right hand side.
A new page will open where you can then use
a scale bar to review previous versions of your
content.
The newer content will be to the right and the
items that are dierent from the previous
version will be highlighted in green and the
older content will be higlighted in red.
Once you nd the version in which you want to
revert back to click the “Restore This Revision”
button.
13
WordPress | Yoast SEO Plugin - Focus Keyphrase
Yoast SEO - “Keyphrase”:
Select “Pages” from the left navigation.
Open a page that you would like to add SEO to.
Please note you should be adding SEO to all of
your pages for the best results.
Scroll down to view the Yoast SEO feature which
will most likely be under the text editor section.
The “SEO” tab should be selected.
In the input box under “Focus Keyphrase” add a
keyphrase that explains the overall purpose of
this page. For example, if you have a page all
about your town’s park, your keyword could be
“park”.
Next, above “Focus Keyphrase”, you will see a
section where you can see your “Google Preview
and you can edit here as well. Click the “Edit
Snippet” button.
Where it says “Meta decsription”, add a short
descriptive sentence pertaining to what this page
is all about. Yoast will let you know if the
sentence is too long. Your meta discription
should have your keyword included in it.
Below the section “Analysis”, you will see some
tips on how you can improve this page’s SEO and
where you have excelled. Simply look at the
colors to guide you on how to improved your
page’s SEO. Green is good, orange is okay and
red needs improvement.
Always strive for a green rating but orange is
okay too! You should never have a red rating.
What is Yoast SEO?
- Yoast provides metrics / ratings for each page to enhance search engine results and yields recommendations to
boost trac based on the content of each individual page using four (4) dierent colors:
o Gray – Neutral rating (or more content needed)
o Green – Optimal / sucient use of keywords and phrases within content a page
o Orange – Some content and keywords may need ne-tuning
o Red – Least optimal rating
14
SEO
WordPress | Yoast SEO Plugin - Readability/Rating/Social
Yoast SEO - “Readability”:
Select the tab that says “Readability.”
Under “Analysis” you will see some tips on how
your page is rated in “Readability”. This section
will give you tips on how to improve your page’s
readability.
Check your SEO Rating:
Check your page’s rating.
In the Publish page section of your page, you will
see a section where your page’s rating will be
displayed.
You will see a rating for “Readability” and “SEO”.
Keep in mind green is great, orange is okay and
red means this page needs some work.
Please note you can also view the pages rating
when you look at the page list view.
Yoast SEO - “Social”:
Select the tab that says “Social”.
Add a custom title, description and image to
narrow down how you would like this page to be
displayed on Facebook and/or Twitter.
Please note the proper image sizes for both
Facebook and Twitter are provided next to the
image upload area. Please make sure to
compress all images.
15
SEOSEOSEO
WordPress | Emergency Notication System
Enable the Emergency Notifcation
Bar:
Click on “Appearance” in the left navigation and
then select “Customize”.
Click on the button that says “Emergency
Notifcation On/O” that is located on the left.
Check the checkbox next to the text “Check box
to enable ENS System”.
Place the desired text you would like the
emergency banner to read in the the text box
where it says “ENS text goes here.”
Place the URL in which you would like the
Emergency Notifcation to link to in the input box
below the text “ENS URL Here”.
Finally, click the blue “Save & Publish” button
at the top.
Make sure to go out to your live site and test to
ensure the emergency notication banner is
displaying correctly.
**Please reference this sample notication.
Disable the Emergency Notifcation
Bar:
Click on “Appearance” in the left navigation and
then select “Customize”.
Click on the button that says “Emergency
Notifcation On/O” that is located on the left.
Uncheck the checkbox next to the text
“Check box to enable ENS System”.
Click the blue “Save & Publish” button at the top.
Make sure to go out to your live site and test
to ensure the emergency notication banner is
displaying correctly.
16
ENS
ENS
17
Custom Functions
**These may not apply to your particular website**
WordPress | Add/Delete a News Post
18
Add a News/Notice Post:
Go to “Posts” in the left side nav.
Choose “Add new”.
Add content. (Post title, text, tags, links,
images, etc.)
Publish or Save Draft.
(if it does not show up on the live site, check your
status in the Publish box. Also in the Publish box, you can
edit publish date, or type by choosing draft, etc.)
Make sure to add tags into your post. Tags
make it easier for people to nd your content.
You can add tags one at a time by clicking the add
button or hitting the enter/return key on your
keyboard. Or you can add multiple tags at time by
separating them with a comma as you type and
then click add.
If you save it as “Draft”, you can preview it in
the Publish box by selecting “Preview”.
Please paste text that is copied from another
le such as Word into NotePad or other text
editor to remove code that is inserted. This code
is not visible to you, but shows up in the
WordPress details editor box.
Posts menu
>
Posts list
>
ADD NEW
Adjust post date. Can have post
in the future if needed.
>
Delete a News/Notice Post:
Go to “Posts” in the side nav.
Hover over the title link to the post you want
to delete.
You will see options appear below the title.
Click on the red “Trash” link.
That post is now in the trash and can only be
restored if you click on the trash link, hover
over the title of the post and click the
“restore” link that appears below.
If you empty the trash the post will be gone.
DELETE
Some websites will have Posts
enabled in order to Post News that
is not in news.delaware.gov
WordPress | Manage the Bootstrap Carousel
19
Add Images to the Carousel:
Click on “Appearance” in the left navigation and then select
“Customize”.
Click on the button that says “Home Page Slide Show
Editor” that is located on the left.
You will see a list of options on the left and your
homepage design on the right.
First, upload a new image from your desktop or from the
media uploader.
Make sure the image is the appropriate size and
orientation.
Fill in descriptive alternative text in the “Alt Text” eld.
Once uploaded to the carousel you should see your image
appear in the slideshow to the right.
Next, ll in the title of the image in the “Title” eld.
Fill in some description text for the image in the
“Description” eld.
Put a link in the “Link” eld, this will make the image
clickable and send a user to the right page that the image
represents.
Repeat until all the images are uploaded to the carousel.
Make sure you are only uploading landscape oriented
photos to the Carousel. Portrait oriented photos will not
display correctly.
Please take note of what size the image needs to be, this is
listed on the carousel page.
When making a caption try to keep it to one sentence.
ADD NEW
What is a “Bootstrap Carousel”?
A “Bootstrap Carousel” is the slideshow of images on your home page. You cannot add more images or take any
images away. But, you can change the image, title, description and link.
Delete an Image from the Carousel:
Click on “Appearance” in the left navigation and then select
“Customize”.
Click on the button that says “Homepage Carousel” that is
located on the left.
You will see a list of all your images and lled in elds on
the left and your homepage design on the right.
Remove an image by clicking on the “Remove” button or by
clicking on the “Change Image” button and uploading
another image in place of it.
If you upload a new image or change the image in a
slideshow please make sure to change the title, description,
and link URl text too.
DELETE
WordPress | Edit and Update a Custom Function
20
Add Images to a Custom Area:
Click on “Appearance” in the left navigation and then select
“Customize”.
Click on the button(s) that describe a feature of your
homepage.
You will see a list of options on the left and your
homepage design on the right.
First, upload a new image from your desktop or from the
media uploader.
Make sure the image is the appropriate size and
orientation.
Fill in descriptive alternative text in the “Alt Text” eld.
Once uploaded to the page you should see your image
appear on the homepage to the right.
Please take note of what size the image needs to be, this is
listed on the Custom Area page.
When making a caption try to keep it to one sentence.
ADD NEW
What is a “Custom Area”?
“Custom Areas” are portions of your homepage that are uniquely designed based o of your agency’s needs and
wants. These may include programs, services, a section featuring your divisions, etc. Each custom area is dierent,
but they will most likely feature a place to upload an image and change text or a link.
Update Text in a Custom Area:
Click on “Appearance” in the left navigation and then select
“Customize”.
Click on the button(s) that describe a feature of your
homepage.
You will see a list of options on the left and your
homepage design on the right.
Fill in a title for a section of the custom area in the “Title”
eld.
Fill in some description text for a section of the custom
area in the “Description” eld.
Put a link in the “Link” eld, this will make the image/icon
clickable and also may put a “Read More” link at the end of
the section.
Please take note of what size the image needs to be, this is
listed on the Custom Area page.
When making a caption try to keep it to one sentence.
UPDATE
Add a New Gallery:
Click on “Photo Gallery” in the left navigation
menu.
Click on the “Add Galleries/Images.
Click on the “Add New” button to add a new
Gallery.
Fill in the “Name”, “Slug” (or link url for this
gallery), and a short description in the
“Description” eld.
Click on the “Save” button and look at “Step 2”
below...
WordPress | Create/Add Photos to a Photo Gallery
Display your New Gallery:
Go to Pages.
Add a new page into your pages list and
title that page according to your “Photo Gallery”
title.
Click on the blue “G” camera icon in the toolbar.
Choose a display option to put your gallery on
the page and then select the appropriate
gallery from the drop down.
Click on the blue “insert” button and then
publish your page to see the photo gallery.
STEP 1
STEP 3
Add Photos to your Gallery:
Click on the “Add Images” button.
In the le browser window click on the “Upload
Files” button to drop in photos from your
computer desktop or another source.
Select all the photo you want and click on the
“Add selected images to gallery” button.
Make sure all the images you want in the gallery
are present on this page. Move on to Step 3...
STEP 2
Gallery menu
>
21
WordPress | Reorder Images in a Photo Gallery
22
REORDER
Re-order Images in a Gallery:
Click on “Photo Gallery” in the left navigation
menu.
Click on the “Add Galleries/Images.
Choose a Photo Gallery from your list.
Notice the four arrow icon under “Select All.”
Grab this icon to move your picture up or down
on the photo list.
Click the “Save” button in the upper right hand
side.
