You are on page 1of 42

WORDPRESS

Content Management
• Introduction 

PART • Login 
• Dashboard 

1
• Draft Content
• Media Library 
• WordPress Media Library
• Media Library Folders 
• Media Content 
• Images, Videos 
• Featured Image
Login
• To get access to the Admin
Dashboard, you need to login
through www1.dti.gov.ph/wp-
login.php .
• Enter your username and
password in the login form.
• After successful login, you will
now see the Dashboard.
Screen Options/Help

Navigation Menu Toolbar

Dashboard Widget
Draft Content
1. Select Pages > Add New to start
creating a page.
2. You'll be redirected to Editor
Screen.
3. Select Add title block, enter “My
Page title”.
4. To add content, type "Hello
World!" in the Paragraph block
below the Title.
Draft Content
5.Click the Preview button
to preview web content.
6.Replace “Hello World!”
with the draft title.
7.Select Align Center
symbol.
Draft Content
8. As you select the Paragraph
block, you can see the block
settings at the right part of the
Screen. Make the font size Large.
9. Select the whole text and then
click the B button to make it Bold.
10.Save the content by clicking the
Save Draft button.
11.Click Preview.
Draft Content
11.Select the first block and then
press Enter to add a new
Paragraph block.
12.Add text with hyperlink using
the paragraph block.
13.Save Draft.
14.Click Publish>Submit For
Review.
Media Library
1. To add media files to WordPress
Media Library, select Media from
the sidebar navigation menu.
2. Click Add New button.
3. A file explorer will show up on the
screen. Click select files or drag
and drop the media to upload.
Media Library
5. To add Alternative Text to your
recently uploaded media, select
the media thumbnail and a pop
up will show up on the screen.
6. Add text to Alternative Text
textbox.
7. Close the pop-up to save
changes.
ML Folders
1. From the sidebar navigation
menu, select Media Library
Folders.
2. You’ll see list of folders and files
on the Media Library Folders
Screen. Click Add File to add
media files.
3. Upload files by drag and drop or
by clicking choose file button.
ML Folders
4. To create media folder click the Add
Folder button.
5. Add folder name then click Create
Folder. You can create folder within a
folder.
6. To rename/delete/move files, check the
files first then click
rename/delete/move button.
7. To delete a folder right click the folder
name then click Delete this folder?
Media Content
1. Go back to Pages and click the
title of your draft.
2. Click “plus” icon in the editor.
3. Type “image” in the search
box then click the search
result “Image”.
Media Content
4. A Image block will appear in the editor,
click Media Library to add an image from
the library. You can select upload to add a
new image and select Insert from url if the
image is not in the website.
5. Media Library will be shown on the screen,
click the image you want to add then click
the Select button to confirm. You can also
locate images by typing the image name
or the path of the image in the search box.
(Ex. Folder1/folder2/my_image.jpg)
Media Content
6. Align the selected image to center by
clicking the Align center button.
7. Set the image size to “Thumbnail”. Do
it by changing the Image size property
at the right section of the editor.
8. Link the image to a custom URL by
selecting “Custom URL” in the Link
Settings.
9. Click Save Draft, Preview.
Media Content
10.Insert a video file to your page.
Use Video block to add video
content to your page.
11.Modify the video block settings at
the right part of the screen.
12.Preview.
13.Save Draft to save changes.
Media Content
14.Click Document tab on the
right part of the screen.
15.Click Featured Image>Set
featured Image and then
select a image that will set as
the page thumbnail.
16.Save Draft.
•Content Editor
PART •Gutenberg Blocks 
•Classic Paragraph Block

2
•Reusable Blocks  
•Shortcodes
Gutenberg Blocks

1. Select your page in-body title “My


Page Title” and then click change block
type button at the upper left section of
the block.
2. Click the Heading block to replace the
current block.
3. Change the text alignment into center.
4. Select paragraph block below in-body
title and then click the move down
button.
Gutenberg Blocks
5. Remove Video block in the editor. Click More
Options button at the top right section of the
block, select Remove block to remove the
block.
6. Add a new block Table and then set column
and row count to 3.
7. Click Create to generate 3x3 table.
8. Populate the table.
9. Try to add and format some blocks like List,
Columns, and Separator.
10. Preview.
Reusable Blocks

1. Click add block button then select Reusable.


2. Select PDF Embedder.
3. Convert PDF Embedder block into Regular
block by clicking More Options icon and then
Convert to Regular Block option.
4. Just replace the ADD PDF URL HERE text with
the pdf link.
• PDF Embedder – ADD PDF URL
• Office Embedder (Word, Excel, etc) -
ADD_SOURCE_HERE
i
n
d

Classic Paragraph i
c
a
t
o
r
1. Insert a Classic Paragraph/Classic block.
2. Cut the paragraph block content and paste it to classic
block.
3. Move the write indicator at the first character of the
paragraph.
4. Click Add Media icon (Shift+Alt+M).
5. Select an image you want to add and view it by
clicking Preview.
6. To wrap image in a paragraph, select the image and
click the pencil icon.
7. Click Advance Options, and then add “wrap-left” in
Image Css Class to wrap the image on the left section.
“wrap-right” if right.
Classic Paragraph

8. Set the image size to 480x320 by selecting


Custom Size on the Size dropdown and by
setting custom width and height values.
9. Click Update button below to make
changes.
10.To add media from other sources like
Youtube, select Insert from URL and input
any media links you want. Click update to
make changes.
11. Save Draft.
Shortcode
1. Add classic block then click the Insert
Shortcode button.
2. Select Spoiler in the list.
3. Add title and content. Set Title to “My Spoiler
Title” and “My First spoiler content” as the
content.
4. Click Preview to see how the shortcode will
look on the website.
5. Insert shortcode to generate spoiler
shortcode.
6. Preview page.
Shortcode
7. Insert an Accordion shortcode then
add attributes like title and content.
You can also change the shortcode
attributes in the editor.
8. Click Preview.
9. Try other available shortcodes.
10.Click Shortcodes menu in sidebar to
see available shortcodes and how you
can use them.
• Photo Gallery (Banners/Sliders) 

PART • Creating a Gallery 


• Displaying Photo Gallery  

3
• Downloads 
• Adding a New Download 
• Displaying Downloads
Photo Gallery
1. Click Photo Gallery > Add Galleries/Images.
2. Click Add New.
3. Add gallery title.
4. You can add images by directly uploading or
by importing images from the media library.
Click Import from Media Libray button to
select images from the library.
5. Select the image/s then click Insert. Hold
control key + left mouse button to select
multiple images.
Photo Gallery
6. Images will be added below with
attributes title, description, redirect url
and Tags. Add description and title for
each images. d
r
7. Change the order of the images by doing a
drag and drop. g

8. Add title, description, and redirect url.


9. Click Publish button.
10.Click Preview to view the created gallery. drop
Photo Gallery
11.Go to Pages and edit “My Page Title”.
12.Add a Photo Gallery block.
13.Select Thumbnails as template.
14.Select the created gallery on the
Gallery dropdown.
15.Click Insert into post at the bottom
right of the screen.
16.Preview.
Photo Gallery
17.Select the Photo Gallery icon in the
block editor.
18.Select Slideshow template.
19.Click Update and then Preview.
20.To change the slideshow background.
Click Photo Gallery block and change
Theme into Dark.
21.Save Draft.
22.Preview.
Downloads
1. Go to Downloads > Add New.
2. Enter title and description.
3. Assign Category.
4. Select the file from the computer
and upload it (or insert an
external file url).
5. Click Publish (Submit for Review).
Displaying Downloads

To display downloads by category To Sort by title or date


• [sdm_show_dl_from_category ca • [sdm_show_dl_from_category category_s
tegory_slug=“category- lug="test-download-category"
slug" fancy="1"]​ fancy="1" orderby="date" order="desc"]​
• [sdm_show_dl_from_category category_s
To display five recent downloads lug="test-download-category"
• [sdm_latest_downloads number fancy="1" orderby="title" order="asc"]
="5" fancy="1"] To add pagination to Downloads
To display popular Downloads • [sdm_show_dl_from_category category_s
• [sdm_popular_downloads fancy= lug="test-download-category" fancy="1"
pagination="20"]
"1"]
•DTI WordPress Tips 
PART • Update existing pages
• Media

4
• Banners/Sliders/Slideshows
• Menus 
•Accessing AWS Bucket 
• Managing Files and Folders 
Update Existing Page

1. From the Pages Screen, hover


to title row.
2. To add new page content to an
existing page, click the Clone
or New Draft action link
below the page title.
Update Existing Page

4. Click Quick Edit. 


5. Edit the page title from the Title textbox.
6. Then insert a short description about the page
changes going to be made. Ex. Region 1 -
Regional Profile
(UPDATE DEMOGRAPHICS)
7. Click Update to save changes on title.
8. Then click Edit action link to
redirect to Editor Screen.
9. Click Save Draft when done.
Publishing Page Content

START

Admin will Admin will notify


Notify Admin for
Crate Draft that the draft has END
review review the draft been published

Admin will notify to NO Is draft YES Admin will


update the draft ready? publish the draft
N O T E
• Optimize Images.
• https://tinypng.com/
• Photoshop/Illustrator
• Sips (Mac)
• Follow media naming format.
• Just manage own Banners/Slider in the Photo Gallery
• Use standard size
Want to customize some
parts of the website but can’t
do it?
Some of the customization options were
disabled for non-administrator users.

Contact the Administrator.


Accessing AWS
Bucket
1. Go to console.aws.amazon.com/s3
2. You’ll be redirected to console
sign in page. Enter mis0001 as the
account ID.
3. Enter username.
4. Enter password.
5. Click Sign In in to access the AWS
Bucket.
Accessing AWS
Bucket
6. You’ll see a list of buckets in the
page. Look for “dtiwebfiles”.
7. Click “dtiwebfiles” bucket.
8. You can add files by clicking
upload button or by drag and
drop. You can also create folders
by clicking Create folder button.
Uploading a file
9. When you upload a file, upload
configuration settings will show up.
10.Do not click the Upload button yet,
click Next.
11.In Manage public permissions, select
Grant public read access to this
object(s) on the dropdown. This will
make the object accessible to public.
12.Click upload.
♦♦♦♦♦♦♦♦
Thank You!

You might also like