WordPress-GWT Manual

Last modified by AJ Solero on 2015/11/25 02:29

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.


Parts of Government Web Template

gwt-parts.png


GWT WordPress Module Map

gwt-wp-map.jpg

  • 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.
  • 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. It is present in all pages within the site and looks the same across all pages.

Installing and Activating the GWT Theme

1.pngBefore installing, download the WordPress Government Web Template from:  http://i.gov.ph/gwhs/government-web-template/

wordpress-gwt.PNG

2.pngGo to Appearance > Themes > Add New.

appearance-themes.png

themes-add-1.1.png

3.pngClick Upload Theme > Choose File.

themes-add-2.png

themes-add-3.png

4.pngAfter successful installation, go back to Appearance > Themes.

appearance-themes.png

5.pngClick Activate.

themes-add-4.1.png

6.pngThis will be the default look of your website.

default-page-wp.PNG


Editing GWT WordPress

Top Bar Menu

1.pngGo to Appearance > Menus after creating your pages for every item in the Main Navigation.

appearance-menus.PNG

2.pngThe 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.

appearance-menus-top-bar.png

3.pngClick the View All tab in the Pages module to display all the pages you created. Check the pages that will go under the menu you selected. Click Add to Menu.

add-menu.png

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.

add-menu-1.png

4.pngUnder the Menu Structure is the Menu Settings for menu locations. 

Select the option where you want to position your menu item. 

Click Save Menu when you’re done.

add-menu-2.png

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

add-menu-3.png


Masthead

1.pngPrepare your agency logo according to the specifications of the GWT. Dimensions should be 100 pixels (H) and less than 1250 pixels (W).

masthead-1.png

2.pngTo add your agency logo to the Masthead, go to Appearance > Theme Options Page.

masthead-2.png

masthead-3.png

3.pngClick Select Files button and choose your agency logo from your computer files.

masthead-4.png

Once uploaded, your agency’s logo thumbnail will appear in the Media Library.

4.pngSelect your logo thumbnail.

masthead-5.png

5.pngEnter an alternative text or image
description on the Alt Text field for your logo in case it does not display properly on the Browser.

masthead-6.png

This is also the content that will be read aloud for users of a screen reader.

6.pngClick the Choose Image button at the lower right of the screen to place your logo in your website.

masthead-7.png

7.pngYou will be brought to the Theme Options Page. This time you can see the path of the image you chose.

masthead-8.png

8.pngClick the Save Changes button at the bottom to place your logo in the Masthead.

masthead-9.png


Ear Content

1.pngGo to Appearance > Widgets.

ear-content-1.png

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

ear-content-2.PNG

Choose a widget and drag it into either of the two Ear Content columns where you want it to be inserted.

3.pngEdit content of the widget then click the Save button when you’re done.

ear-content-3.png

4.pngVisit the site to view the Ear Content appearance.

ear-content-4.png


Banner

1.pngClick on Slider Images > Add New.

slider-1.png

2.pngAdd a Title to your post and click Set Featured Image.

slider-2.png

slider-3.png

3.pngChoose the image that you want to appear on the Banner. The recommended size should be 1250 pixels for the width and less than 400 pixels for the height.

slider-4.png

4.pngClick Set featured image button.

slider-5.png

5.pngClick Publish to display your chosen
image on the Banner.

slider-6.png

6.pngVisit site to view the set image for the Banner.

slider-7.png


More Options for the Banner

1.pngIf you want to change the Header Background Color and the Slider Background Color, go to Appearance > Theme Options.

masthead-2.png

2.pngClick Select Color.

slider-8.png

3.pngYou can choose a color from the box or insert hex code on the text field between the Default and Current Color button.

slider-9.png

4.pngCheck if the color is correctly selected.

slider-10.png

5.pngScroll down and click Save Changes button located at the bottom of the page.

masthead-9.png

6.pngVisit the site to check the display of the Banner or Slider color.

slider-11.png


Banner Section

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

ear-content-1.png

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

banner-section-1.png

Choose a widget and drag it into either of the two Banner Content columns where you want it to be inserted.

3.pngEdit content of the widget then click the Save button if you’re done.

banner-section-2.png

4.pngVisit the site to view the Banner Section appearance.

banner-section-3.png


Auxiliary Menu

1.pngCreate the pages that will link to your Auxiliary Menu first, and then go to Appearance > Menus.

appearance-menus.PNG

2.pngIn Select a menu to edit choose Auxiliary Menu then click the Select button.

auxiliary-1.png

3.pngClick the View All tab in the Pages module to display all the pages you created.

add-menu.png

Check the pages that will go under the Auxiliary Menu.

Click Add to Menu.

4.pngClick and drag the menu items to rearrange their order.

auxiliary-2.png

5.pngCheck on Auxiliary Menu under the Menu Settings.

auxiliary-3.png

Click Save Menu when you’re done.

6.pngTo display the Auxiliary Menu. Go to Appearance > Theme Options.

masthead-2.png

7.pngClick on Check to display Auxiliary Menu then scroll down and don’t forget to click Save Changes.

auxiliary-4.png

8.pngThe Auxiliary Menu will appear below the Banner.

auxiliary-5.png


Breadcrumbs (optional)

1.pngThe Breadcrumbs is located below the Auxiliary Menu. To edit this, go to Appearance > Theme Options.

masthead-2.png

2.pngScroll down the page then click the checkbox for Enable Breadcrumbs to display the breadcrumbs.

breadcrumbs-1.png

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

masthead-9.png

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

breadcrumbs-2.png


Panel Top

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

ear-content-1.png

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

panel-top-1.png
These sections have different layouts depending on where and how many widgets you place. Use your own
creativity for better output.

3.pngEdit content of the widget then click the Save button when you’re done.

panel-top-2.png

4.pngVisit the site to view the Panel Top appearance.

panel-top-3.png


Panel Bottom

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

ear-content-1.png

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

panel-bottom-1.png
These sections have different layouts depending on where and how many widgets you place. Use your own
creativity for better output.

3.pngEdit content of the Widget then click the Save button when you’re done.

panel-bottom-2.png

4.pngVisit the site to view the Panel Bottom appearance.

panel-bottom-3.png


Agency Footer

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

ear-content-1.png
The content of the Agency Footer is divided into three columns. To edit the Agency Footer,
go to Appearance > Widgets.

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

footer-1.png

3.pngEdit content of the Widget then click the Save button when you’re done.

footer-2.png

4.pngVisit the site to view the Agency Footer
appearance.

footer-3.png


Updating the GWT Theme

1.pngBefore installing, download the WordPress Government Web Template from:  http://i.gov.ph/gwhs/government-web-template/

wordpress-gwt.PNG

2.pngGo to Appearance > Themes > Add New.

appearance-themes.png

themes-add-1.1.png

3.pngClick Upload Theme > Choose File.

themes-add-2.png

themes-add-3.png

4.pngAfter successful installation, go back to Appearance > Themes.

appearance-themes.png

5.pngClick Activate.

themes-add-4.1.png

6.pngThis will be the look of your website upon applying the new template.

update-home.PNG

7.pngTo reposition the menus, go to Appearance > Menus.

themes-add-4.1.png

8.pngNavigate to Manage Locations Tab.

manage locations-tab.PNG

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

update-menus.png

10.pngClick the Save Changes button after editing.

update-done.PNG

11.pngVisit your website to check if the menus where repositioned properly.

update-rep.PNG

Tags:
Created by Belgiun Bryan Madriaga on 2015/05/12 09:23