USER’S MANUAL:

GOVERNMENT WEB TEMPLATE FOR WORDPRESS

Version 4.0

For issues and concerns, contact the GWT Support Team at

helpdesk@i.gov.ph
 TABLE OF CONTENTS

Introduction --------------------------------------------------------------------------------------------- 1

Parts of the Government Website Template (GWT) ----------------------------------------------- 2

GWT WordPress Module Map ------------------------------------------------------------------------- 3

Installing and Activating the GWT Theme ---------------------------------------------------------- 4

Editing GWT WordPress -------------------------------------------------------------------------------- 5

Top Bar Menu -------------------------------------------------------------------------------------- 5

Masthead ------------------------------------------------------------------------------------------- 7

Masthead Logo with Text ------------------------------------------------------------------------- 9

Ear Content ----------------------------------------------------------------------------------------- 10

Banner ----------------------------------------------------------------------------------------------- 11

Banner Section ------------------------------------------------------------------------------------- 13

Auxiliary Menu ------------------------------------------------------------------------------------- 14

Breadcrumbs ---------------------------------------------------------------------------------------- 16

Panel Top ------------------------------------------------------------------------------------------- 17

Panel Bottom --------------------------------------------------------------------------------------- 18

Agency Footer -------------------------------------------------------------------------------------- 19

Theme Customization --------------------------------------------------------------------------------- 20

Content Panel and Sidebars Border Width ----------------------------------------------------- 20

Content Panel and Sidebars Border Radius ---------------------------------------------------- 21

Content Panel and Sidebars Border Color ------------------------------------------------------ 22

Content Panel and Sidebars Background Color ----------------------------------------------- 23

 Header Font Rendering --------------------------------------------------------------------------- 24

Header Font Size ---------------------------------------------------------------------------------- 25

Header Inner Post Font Size --------------------------------------------------------------------- 26

Agency Footer Section Background Color ------------------------------------------------------ 27

Creating Mega Menu ----------------------------------------------------------------------------------- 28

Updating the GWT Theme ---------------------------------------------------------------------------- 30

 INTRODUCTION

This document serves as your guide in using the Government Web Template (GWT) in WordPress.
This is not a comprehensive manual on WordPress. It is assumed that the user has basic
knowledge on WordPress or has undergone basic training on the Content Management System
(CMS).

This manual is organized based on the GWT’s basic parts. It discusses how to edit GWT widgets,
add content, and customize the template from the top bar to the footer. Other technical details and
WordPress administration features are not included here.

USER’S MANUAL: Government Web Template for WordPress v4.0 1

 Parts of the Government Website Template
Top Bar

Masthead

Banner

Auxillary Menu
(optional)

Breadcrumbs

Top Panel

Content

Side Bar

Bottom Panel

Agency Footer

Standard Footer

USER’S MANUAL: Government Web Template for WordPress v4.0 2

 GWT WordPress Module Map

 Top Bar — The Top Bar has fixed
components and links that include the
GOVPH link and the Main Navigation.
 Masthead — The Masthead component
must contain the Agency’s logo with
recommended dimensions.
 Ear Content — This component can be
used for setting the Philippine Standard
Time (PST), logo and any minimal contents.
 Banner — The Banner component features
images linked to specific posts or pages, and
display them as a slideshow.
 Banner Section — Other components for
the Banner.
USER’S MANUAL: Government Web Template for WordPress v4.0
 Auxiliary Menu — This component is
optional and can be added for additional
menus.
 Breadcrumbs — This is optional
component that gives info where the page
or post is located in the website.
 Panel Top — This component can be used
for additional content of the website.
 Panel Bottom — This component can be
used for additional content of the website.
 Agency Footer — This contains all the
navigation and links present in the Top Bar,
Auxiliary Menu, and some from the content
area. The layout is the same and present
across all pages of the site.
3
 Installing and Activating the GWT Theme

Download the WordPress Government Web Go to Appearance > Themes >

1 2
Template from: Add New.
http://i.gov.ph/gwhs/government-web-template/

And save the compressed gwt-wordpress file to

your computer.

3 Click Upload Theme > Choose File. After successful installation, go back to
4
Appearance > Themes .

This will be the default look of your

5 Click Activate. 6
website.

USER’S MANUAL: Government Web Template for WordPress v4.0 4

 Editing the Top Bar Menu

Go to Appearance > Menus after
1 2
creating your pages for every item in the
Main Navigation.
The GWT template has three set menus.
Select a menu to edit and click Select.
The Top Bar where the main menu is
located has a Left Menu and a Right
Menu.

Click the View All tab in the Pages module to display

3
all the pages you created. Check the pages that will go
under the menu you selected. Click Add to Menu.

All the pages you selected will appear under the

Menu Structure. Click on the small inverted
triangle at the rightmost end of every page title
to display more options about your menu item.
The Navigation Label is the exact menu text
that will appear in your Top Bar main navigation.
Click Remove if you want to delete the menu
item.
You can drag your pages to rearrange their order
or make them sub items.

USER’S MANUAL: Government Web Template for WordPress v4.0 5

 Editing the Top Bar Menu (cont..)

Under the Menu Structure is the

4
Menu Settings for menu locations.
Select the option where you want to
position your menu item.
Click Save Menu when you’re done.

5 The Top Bar will display the menu that you created.

LEFT MENU TOP BAR RIGHT MENU TOP BAR

USER’S MANUAL: Government Web Template for WordPress v4.0 6

 Editing the Masthead
Prepare your agency logo according to the To add your agency
1 2
specifications of the GWT. Dimensions logo to the Masthead,
should be 100 pixels (H) and less than go to Appearance >
1250 pixels (W). Theme Options
Page.
1250px

100px

Click the Upload Logo button.

Click Select Files button and choose Select your logo thumbnail.
3 4
your agency logo from your computer
files.

Once uploaded, your agency’s logo thumbnail

will appear in the Media Library.

Enter an alternative text or image Click the Choose Image button at the
5 6
description on the Alt Text field for your lower right of the screen to place your
logo in case it does not display properly
logo in your website.
on the Browser.

This is also the content that will be read

aloud for users of a screen reader.
USER’S MANUAL: Government Web Template for WordPress v4.0 7
 Editing the Masthead (cont..)
You will be brought to the Theme Click the Save Changes button at the
7 8
Options Page. This time you can see the bottom to place your logo in the
path of the image you chose. Masthead.

USER’S MANUAL: Government Web Template for WordPress v4.0 8

 Editing the Masthead Logo with Text
To enable the Image Logo with text, go to Insert the Agency name and Tagline on
1 2
Appearance > Theme Options page the following text fields.
and disable the Image Logo option.

Select an image with a 100x100 pixels dimension. Then click the Save Changes button at
3
the bottom of the page to save the settings.

Visit site to view the set Masthead logo and text.

5

USER’S MANUAL: Government Web Template for WordPress v4.0 9

 Editing the Ear Content

1 Go to Appearance > Widgets.

The boxes on the left side of the screen are the Available Widgets and the boxes on the
2
right side are the sections of the template. Choose a widget and drag it into either of the
two Ear Content columns where you want it to be inserted.

Edit content of the widget then click the Visit the site to view the Ear Content
3 4
Save button when you’re done. appearance.

USER’S MANUAL: Government Web Template for WordPress v4.0 10

 Editing the Banner

Add a Title to your post and click Set

1 Click on Slider Images > Add New. 2
Featured Image.

Choose the image that you want to ap-

3 4 Click Set featured image button.
pear on the Banner. The recommended
size should be 1250 pixels for the width
and less than 400 pixels for the height.

Click Publish to display your chosen Visit site to view the set image for the
5 6
image on the Banner. Banner.

USER’S MANUAL: Government Web Template for WordPress v4.0 11

 More Options for the Banner
If you want to change the Header
7 2 Click Select Color.
Background Color and the Slider
Background Color, go to Appearance >
Theme Options.

You can choose a color from the Check if the color is correctly selected.
3 4
box or insert hex code on the text
field between the Default and
Current Color button.

Scroll down and click Save Changes Visit the site to check the display of the
5 6
button located at the bottom of the page. Banner or Slider color.

USER’S MANUAL: Government Web Template for WordPress v4.0 12

 Editing the Banner Section

The content of the Banner Section is divided into two columns. To edit the Banner Section,
1
go to Appearance > Widgets.

The boxes on the left side of the screen are the Available Widgets and the boxes on the
2
right side are the sections of the template.

Choose a widget and drag it into

either of the two Banner Content
columns where you want it to be
inserted.

Edit content of the widget then click the Visit the site to view the Banner Section
3 4
Save button if you’re done. appearance.

USER’S MANUAL: Government Web Template for WordPress v4.0 13

 Adding an Auxiliary Menu (optional)

Create the pages that will link to your In Select a menu to edit choose
1 2
Auxiliary Menu first, and then go to Auxiliary Menu then click the Select
Appearance > Menus. button.

Click the View All tab in the Pages Click and drag the menu items to
3 4
module to display all the pages you rearrange their order.
created.

Check the pages that

will go under the
Auxiliary Menu.

Click Add to Menu.

Check on Auxiliary Menu under the To display the Auxiliary Menu. Go to

5 6
Menu Settings. Appearance > Theme Options.

Click Save Menu when you’re done.

USER’S MANUAL: Government Web Template for WordPress v4.0 14

 Adding an Auxiliary Menu (cont..)

Click on Check to display Auxiliary The Auxiliary Menu will appear below the
7 8
Menu then scroll down and don’t forget Banner.
to click Save Changes.

USER’S MANUAL: Government Web Template for WordPress v4.0 15

 Adding the Breadcrumbs (optional)

The Breadcrumbs is located below the Scroll down the page then click the
1 2
Auxiliary Menu. To edit this, go to checkbox for Enable Breadcrumbs to
Appearance > Theme Options. display the breadcrumbs.

3 Scroll down and click Save Changes button located at the bottom of the page.

4
Visit the website to check if the breadcrumbs will appear. Note that it only appears when
a post or page is selected.

USER’S MANUAL: Government Web Template for WordPress v4.0 16

 Editing the Panel Top

The content of the Panel Top is divided into four columns. To edit the Panel Top, go to
1
Appearance > Widgets.

Choose a widget and drag it into either of the four Panel Top sections where you want it to
2
be inserted.

These sections have different

layouts depending on where
and how many widgets you
place. Use your own
creativity for better output.

Edit content of the widget then click the Visit the site to view the Panel Top
3 4
Save button when you’re done. appearance.

USER’S MANUAL: Government Web Template for WordPress v4.0 17

 Editing the Panel Bottom

The content of the Panel Bottom is divided into four columns. To edit the Panel Bottom, go
1
to Appearance > Widgets.

Choose a widget and drag it into either of the four Panel Bottom sections where you want it
2
to be inserted.

These sections have different

layouts depending on where
and how many widgets you
place. Use your own
creativity for better output.

Edit content of the Widget then click the Visit the site to view the Panel Bottom
3 4
Save button when you’re done. appearance.

USER’S MANUAL: Government Web Template for WordPress v4.0 18

 Editing the Agency Footer

The Agency Footer contains all the navigation and links present in the Top Bar, Auxiliary
1
Menu, and some from the content area. It is present in all pages within the site and looks
the same across all pages.

The content of the Agency Footer

is divided into three columns. To
edit the Agency Footer, go to
Appearance > Widgets.

The boxes for the three Agency Footers are on the right side of the widgets screen. Choose
2
a widget and drag it to the sidebar where you want it to appear.

Edit content of the Widget then click the Visit the site to view the Agency Footer
3 4
Save button when you’re done. appearance.

USER’S MANUAL: Government Web Template for WordPress v4.0 19

 Customizing Border Width

To customize the border width for content panel and sidebars, go to Theme Options page.
1

Under the Theme Styling options, select a desired value for the Border Width. Then
2
scroll down and click Save Changes button located at the bottom of the page to save the
settings.

Visit the site to see the changes on content panel and sidebars border width.
3

USER’S MANUAL: Government Web Template for WordPress v4.0 20

 Customizing Border Radius

To customize the border radius for content panel and sidebars, go to Theme Options
1
page.

Under the Theme Styling options, select a desired value for the Border Radius. Then
2
scroll down and click Save Changes button located at the bottom of the page to save the
settings.

Visit the site to see the changes on content panel and sidebars border radius.
3

USER’S MANUAL: Government Web Template for WordPress v4.0 21

 Customizing Border Color

If you want to change the border color for content panel and sidebars, go to Theme
1
Options page.

Under the Theme Styling options, select a desired color or insert a hex value on the text
2
field to customize Border Color. Then scroll down and click Save Changes button located
at the bottom of the page to save the settings.

Visit the site to see the changes on content panel and sidebars border color.
3

USER’S MANUAL: Government Web Template for WordPress v4.0 22

 Customizing Background Color

If you want to change the border color for content panel and sidebars, go to Theme
1
Options page.

Under the Theme Styling options, select a desired color or insert a hex value on the text
2
field to customize Background Color. Then scroll down and click Save Changes button
located at the bottom of the page to save the settings.

Visit the site to see the changes on content panel and sidebars border color.
3

USER’S MANUAL: Government Web Template for WordPress v4.0 23

 Customizing Header Rendering

To customize the title headings of a post inside the content panel, go to Theme Options
1
page.

Under the Theme Styling options, change the value of Header Rendering to desired text
2
rendering. Then scroll down and click Save Changes button located at the bottom of the
page to save the settings.

Visit the site to see the changes on headers inside the content panel.
3

USER’S MANUAL: Government Web Template for WordPress v4.0 24

 Customizing Header Font Size

To customize the title headings of a post inside the content panel, go to Theme Options
1
page.

Under the Theme Styling options, select a desired size for Header Font Size. Then scroll
2
down and click Save Changes button located at the bottom of the page to save the set-
tings.

Visit the site to see the changes on header font size inside the content panel.
3

USER’S MANUAL: Government Web Template for WordPress v4.0 25

 Customizing Header Inner Post Font Size

To customize the title headings inside a post, go to Theme Options page.

1

Under the Theme Styling options, select a desired size for Header Inner Post Font
2
Size. Then scroll down and click Save Changes button located at the bottom of the page
to save the settings.

Visit the site to see the changes on header font size inside the content panel.
3

USER’S MANUAL: Government Web Template for WordPress v4.0 26

 Customizing Agency Footer Background Color

To customize the background color of Agency Footer, go to Theme Options page.

1

Under the Theme Styling options, select a desired color or insert a hex value on the text
2
field to customize Background Color. Then scroll down and click Save Changes button
located at the bottom of the page to save the settings.

Visit the site to see the changes on Agency Footer’s background color.
3

USER’S MANUAL: Government Web Template for WordPress v4.0 27

 Creating a Mega Menu Structure

This is an added feature for the template Insert an initial Menu Title then click
1 2
to handle large contents of menus. To Save.
activate the mega menu, go to Mega
menu > Add menu page.

Add another menu title and select a parent under the Attributes box. Click Publish button
3
after editing.

Go to Appearance > Menus and col- Tick the box of a Parent menu which
4 5
lapse the Mega Menu box. will be added to your Menu, then click
the Add to Menu button.

USER’S MANUAL: Government Web Template for WordPress v4.0 28

 Creating a Mega Menu Structure (cont..)

Scroll up and navigate to the top of the
6 7
page. Click the Screen Options button
located at the top right side of the page
to unhide the advanced setup.
Check the box for CSS classes, then
click again the Screen Options button
to hide the advanced setup.

Check the added parent menu of mega menu setup, then add the ‘has-megamenu’ on the
8
CSS class textfield. Save the menu after editing.

This will be the look of the created Mega Menu.

4

USER’S MANUAL: Government Web Template for WordPress v4.0 29

 Updating the GWT Theme

Download the WordPress Government Web Go to Appearance > Themes >

1 2
Template from: Add New.
http://i.gov.ph/gwhs/government-web-template/

And save the compressed gwt-wordpress file to

your computer.

3 Click Upload Theme > Choose File. After successful installation, go back to
4
Appearance > Themes .

This will be the look of your website

5 Click Activate. 6
upon applying the new template.

USER’S MANUAL: Government Web Template for WordPress v4.0 30

 Updating the GWT Theme (cont..)

To reposition the menus, go to Navigate to Manage Locations Tab.

7 8
Appearance > Menus.

9 Select a proper menu to its designated locations where you wanted to reposition.

Click Save Changes button after edit- Visit your website to check if the menus
10 11
ing. were re-positioned properly.

USER’S MANUAL: Government Web Template for WordPress v4.0 31