ODM Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Frontpage and temporary country sites ======

===== Who is this guide for =====

  * ODM Core editors customizing the content presented in the frontpage of each site
  * Developers tweaking the UI of this pages

===== What this guide teaches =====

  * How to manage content in the featured box
  * How to tweak the look and feel of the featured box
  * How to manage content in the footer of the frontpage
  * How to manage content in the footer of the temporary country sites

===== Things to know beforehand =====

==== Finished vs temporary country sites ====

Depending whether the site is ready for publication ( currently mekong and cambodia sites are ) or in a temporary state, the corresponding wordpress site has to be configured accordingly. This functionality can be achieved by specifying particular settings in wordpress settings as [[http://opendevelopmentmekong.net/wp-admin/options-general.php|Settings > Reading]], [[http://opendevelopmentmekong.net/wp-admin/themes.php?page=opendev_options|Appearance > Themes > Open Development Theme]] and using a series of plugins  

==== 2 Plugins involved ====

To provide extra functionality, two plugins have been installed:

  * **Featured areas**: Provides functionality of the featured content box used to present relevant content in both active and temporary country sites.
  * **Flexible posts widget**: Gives the ability to list posts from different categories as a widget. This is used for listing the **announcement and press releases** and **site updates** sections of the active sites.

===== Managing content on the frontpage of active sites =====


==== Relevant configuration ====

In order to define a site as active, following settings should be considered:

  * [[http://opendevelopmentmekong.net/wp-admin/options-reading.php|Settings > Reading]]: Frontpage displays will be Your latest posts.
{{ :db:bildschirmfoto_2015-06-15_um_00.30.09.png?300 |}}
  * [[http://opendevelopmentmekong.net/wp-admin/themes.php?page=opendev_options|Appearance > Open Development Theme]]: 
    * **Site in development** will be disabled.
    * **Enable dropdown box of the country menu** for more information on header
    * Enable **Show site intro texts** to show the 3 site intro links to topic pages
    * Specify **Frontpage slider id** to show corresponding slider createad with [[http://opendevelopmentmekong.net/wp-admin/edit.php?post_type=fa_slider|Featured areas plugin]], see [[#adding_the_slider_to_the_frontpage|instructions below]]

{{ :bildschirmfoto_2015-06-15_um_00.32.46.png?300 |}}

==== Managing content presented in the featured box ====

First, the [[http://opendevelopmentmekong.net/wp-admin/edit.php?post_type=fa_slider&page=fapro_settings|plugin's settings]] need to be configured accordingly.

===== Configuring the FA Pro plugin =====

First, open the [[https://opendevelopmentmekong.net/wp-admin/edit.php?post_type=fa_slider&page=fapro_settings|FA Pro > Settings]] screen. In the different sections you are going to be able to tweak certain parameters for the sliders. Relevant values that should be specially considered are:

**Settings/Custom posts**: Specify the post types that you want to be able to feature in the sliders.

**License/CodeFlavors License key**: Specify the corresponding license key

===== Creating a slider =====

Most probably you want now to create a new slider for the active frontpage.Head to [[https://opendevelopmentmekong.net/wp-admin/edit.php?post_type=fa_slider|FA Pro > Sliders]] and click the **Add new** button. Following screen will be presented:

{{ ::bildschirmfoto_2015-09-03_um_09.45.41.png?300 |}}

After providing a title (Recommended "Frontpage featured box"), you can select which posts will be featured on it. You can select them manually by specifying **Mixed Content** on the slider content section and select them yourself, or filter posts automatically by post type, category, author, etc...

Browse through the **Text options** and **Media options** tabs and pay special attention at the following parameters:

**Get content from:** Select custom text for slide.
**WordPress image size:** Select large.

Now scroll below and among the different themes select **opendev**:

{{ ::bildschirmfoto_2015-09-03_um_09.48.46.png?300 |}}

Browse through the **Layout**, **Animation** and **Publish** tabs and pay special attention at the following parameters:

**Layout variations:** Select Image left, content right
**Slider width:** Select 1160
**Slider height:** Select 400

Now you are ready configuring the slider, click on publish and take note of the Slider id on the right sidebar. You will need it very soon:

{{ ::bildschirmfoto_2015-09-03_um_09.57.17.png?300 |}}

===== Adding the slider to the frontpage =====

As mentioned on the [[#relevant_configuration|Relevant configuration section]] there is a parameter on the Open Development Theme settings to specify the **Frontpage slider id**. Add the id number of the slider you just created on it, save the settings and the slider should now be visible on the frontpage.

===== News container and Announcements and press releases =====

The configuration for both two sections is similar. These boxes, presented at the bottom of the frontpage, are managed as Wordpress widgets.

{{ ::bildschirmfoto_2015-09-03_um_10.03.19.png?300 |}}

In order to specfiy which contents appear on each of the sections, head to [[https://opendevelopmentmekong.net/wp-admin/widgets.php|Appearance > Widgets]] section where you will find two widget areas called **Frontpage footer left** and **Frontpage footer right**.

{{ ::bildschirmfoto_2015-09-03_um_10.06.21.png?300 |}}

You can drag and drop any Wordpress widget from the list on the left. However, for the news container and announcements and press releases sections, currently **Flexible post widgets** are used. This widget (which is installed [[https://wordpress.org/plugins/flexible-posts-widget/installation/through a wordpress plugin]]) allows to select certain post types to be presented on the box. Specify parameters such as the maximum number of posts to present or the post type (Announcements & site updates respectively) and **very important**, select the corresponding template:

 {{ ::bildschirmfoto_2015-09-03_um_10.09.22.png?300 |}}

===== Managing content on the frontpage of temporary country sites =====


==== First create a page with the Upcoming site template ====

Go to [[https://laos.opendevelopmentmekong.net/wp-admin/post-new.php?post_type=page|Pages > Add new]] menu item in the left sidebar and specify title and content for the upcoming site page. On the right menu, do not forget to select **Upcoming site** in the **template** dropdown list available on the **Page attributes** box on the right sidebar.

{{ ::bildschirmfoto_2015-09-03_um_10.15.27.png?300 |}}

Hit the publish button so the page gets created.

==== Relevant configuration ====

In order to define a site as a temporary country site, following settings should be considered:

  * [[http://opendevelopmentmekong.net/wp-admin/options-reading.php|Settings > Reading]]: A static page (select below) On the Frontpage dropdown menu, select the page that you just created on the step above.
{{ ::bildschirmfoto_2015-09-03_um_10.14.55.png?300 |}}
  * [[http://opendevelopmentmekong.net/wp-admin/themes.php?page=opendev_options|Appearance > Open Development Theme]]: 
    * **Site in development** will be disabled.
    * **Enable dropdown box of the country menu** for more information on header
    * Enable **Show site intro texts** to show the 3 site intro links to topic pages
    * Specify **Frontpage slider id** to show corresponding slider createad with [[http://opendevelopmentmekong.net/wp-admin/edit.php?post_type=fa_slider|Featured areas plugin]], see [[#adding_the_slider_to_the_frontpage|instructions below]]

{{ :bildschirmfoto_2015-06-15_um_00.32.46.png?300 |}}


==== Managing content presented in the featured box ====

Same as in [[#managing_content_on_the_frontpage_of_active_sites| Managing content on the frontpage of active sites]]




==== Footer area and related resources ====

Analog to the [[#news_container_and_announcements_and_press_releases|News container and annoucements and press releases boxes on the frontpages]], the temporary country pages feature as well following widget areas on the bottom of the site:

The configuration for the three boxes is similar. These boxes, presented at the bottom of the page, are managed as Wordpress widgets.

{{ ::bildschirmfoto_2015-09-03_um_10.30.25.png?300 |}}
{{ ::bildschirmfoto_2015-09-03_um_10.29.35.png?300 |}}

In order to specfiy which contents appear on each of the sections, head to [[https://opendevelopmentmekong.net/wp-admin/widgets.php|Appearance > Widgets]] section where you will find two widget areas called **Upcoming footer left**, **Upcoming footer middle** and **Upcoming footer right**.

You can drag and drop any Wordpress widget from the list on the left. However, currently following configuration is recommended for the different boxes on the temporary country sites:

**Upcoming footer left**: An instance of the OD Query resources widget which queries data from the CKAN instance specified on the [[https://laos.opendevelopmentmekong.net/wp-admin/options-general.php?page=wpckan|WPCKAN settings]].

{{ ::bildschirmfoto_2015-09-03_um_10.32.17.png?300 |}}

**Upcoming footer middle**: A text widget with an embedded image and a link to the map explorer. **Note that this text box contains HTML notation!!**

{{ ::bildschirmfoto_2015-09-03_um_10.34.06.png?300 |}}

**Upcoming footer right**: A text widget with a list of links to related resources. **Note that this text box contains HTML notation!!**

{{ ::bildschirmfoto_2015-09-03_um_10.35.08.png?300 |}}
ODM Wiki

User Tools

Site Tools

Page Tools
