Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Introduction --------------------------------------------------------------------------------------------- 1
Masthead ------------------------------------------------------------------------------------------- 7
Banner ----------------------------------------------------------------------------------------------- 11
Breadcrumbs ---------------------------------------------------------------------------------------- 16
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.
Masthead
Banner
Auxillary Menu
(optional)
Breadcrumbs
Top Panel
Content
Side Bar
Bottom Panel
Agency Footer
Standard Footer
Top Bar — The Top Bar has fixed Auxiliary Menu — This component is
components and links that include the optional and can be added for additional
GOVPH link and the Main Navigation. menus.
Masthead — The Masthead component Breadcrumbs — This is optional
must contain the Agency’s logo with component that gives info where the page
recommended dimensions. or post is located in the website.
Ear Content — This component can be Panel Top — This component can be used
used for setting the Philippine Standard for additional content of the website.
Time (PST), logo and any minimal contents. Panel Bottom — This component can be
Banner — The Banner component features used for additional content of the website.
images linked to specific posts or pages, and Agency Footer — This contains all the
display them as a slideshow. navigation and links present in the Top Bar,
Banner Section — Other components for Auxiliary Menu, and some from the content
the Banner. area. The layout is the same and present
across all pages of the site.
USER’S MANUAL: Government Web Template for WordPress v4.0 3
Installing and Activating the GWT Theme
3 Click Upload Theme > Choose File. After successful installation, go back to
4
Appearance > Themes .
Go to Appearance > Menus after The GWT template has three set menus.
1 2
creating your pages for every item in the Select a menu to edit and click Select.
The Top Bar where the main menu is
Main Navigation.
located has a Left Menu and a Right
Menu.
5 The Top Bar will display the menu that you created.
100px
Click Select Files button and choose Select your logo thumbnail.
3 4
your agency logo from your computer
files.
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.
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.
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.
Click Publish to display your chosen Visit site to view the set image for the
5 6
image on the Banner. Banner.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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
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
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
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
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
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
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
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
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.
Scroll up and navigate to the top of the Check the box for CSS classes, then
6 7
page. Click the Screen Options button click again the Screen Options button
located at the top right side of the page to hide the advanced setup.
to unhide 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.
3 Click Upload Theme > Choose File. After successful installation, go back to
4
Appearance > Themes .
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.