Galleries can be embedded in Posts and Pages. To create a gallery:

• log into the WordPress Backend
• Navigate in the menu of the WordPress Backend to /Gallery/Add Gallery & Images
• Select 'create a new gallery' and set a name for the gallery in the following field
• Press the button 'add files' and select in the following dialog the images that should be within you gallery
• Press the button 'Start Upload' to upload the images to the gallery. After this a message confirms the successful upload like shown in the picture below.

After the creation of the gallery you have to associate / embed it with a Post or Page. To do this,

• go to the Page or Post that should contain the Gallery
• You will find a green Button in the menu that opens a dialogue for embedding the Gallery. Press it and select the display type - this is how the Gallery should be presented to the visitor (in most cases 'NextGenBasic Thumbnails' will be fine)
• Click on the heading 'What would you like to display?' and select 'Galleries' as Sources and type the title of your gallery.
• By pressing 'save' you will attach your gallery to the Post or Page.

Don't forget to save the Post or Page by pressing the 'Publish' button.

 

The content of the website can be enriched by using the control elements of Bootstrap Shortcodes, like presented below. These elements are provided by the Twitter Bootstrap library and embedded here via a Plugin. All Elements can be embedded by using the following Toolbar or via the shortcodes like some of the are explained below.

Headings

There are five types of headings available in our theme. They can be used by marking the text that should be outlined and selecting the appropriate size in the editor like shown here:

While the Heading 1 is reserved for Titles all other heading sizes are not defined.

Grid

A Grid is useful to display a huge amount of text on one page. It is the similar typographic effect then in newspapers that are also using many columns to present huge text passages.

[bs_row class="row"]
[bs_col class="col-sm-4"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum[/bs_col]
[bs_col class="col-sm-4"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum[/bs_col]
[bs_col class="col-sm-4"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum[/bs_col]
[/bs_row]

 

A grid can be embedded by using the following shortcodes. Copy them, customize the text and delete the empty spaces after each opening bracket (otherwise only the columns would be displayed).

[ bs_row class="row"]
[ bs_col class="col-sm-4"]Text[ /bs_col]
[ bs_col class="col-sm-4"]Text[ /bs_col]
[ bs_col class="col-sm-4"]Text[ /bs_col]
[ /bs_row]

Tabs

Tabs are useful if the visitor should stay within the same content and be informed about different options. This might look like this:

[bs_tabs]
[bs_thead]
[bs_tab class="active" type="tab" href="#bs_first_tab9" title="Tab A"]
[bs_tab class="" type="tab" href="#bs_tab311095559" title="Tab B"]
[bs_tab class="" type="tab" href="#bs_tab311229709" title="Tab C"]
[/bs_thead][bs_tcontents]
[bs_tcontent class="active" id="bs_first_tab9"]Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.[/bs_tcontent]
[bs_tcontent class="" id="bs_dropdown19"]Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.[/bs_tcontent]
[bs_tcontent class="" id="bs_dropdown29"]Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.[/bs_tcontent]
[bs_tcontent class="" id="bs_tab311095559"]asdfasf asdfasdf adsfasdf [/bs_tcontent]
[bs_tcontent class="" id="bs_tab311229709"]asdfasdf öja dsfp ökas fjp nadsf[/bs_tcontent]
[/bs_tcontents]
[/bs_tabs]

Tabs can be embedded by using the following shortcodes. Copy them, customize the text and titles of the tabs and delete the empty spaces after each opening bracket (otherwise only the tabs would be displayed).

[ bs_tabs]
[ bs_thead]
[ bs_tab class="active" type="tab" href="#bs_first_tab9" title="Tab A"]
[ bs_tab class="" type="tab" href="#bs_tab311095559" title="Tab B"]
[ bs_tab class="" type="tab" href="#bs_tab311229709" title="Tab C"]
[ /bs_thead][ bs_tcontents]
[ bs_tcontent class="active" id="bs_first_tab9"]Content Tab A[/bs_tcontent]
[ bs_tcontent class="" id="bs_tab311095559"]Content Tab B [/bs_tcontent]
[ bs_tcontent class="" id="bs_tab311229709"]Content Tab C[/bs_tcontent]
[ /bs_tcontents]
[ /bs_tabs]

Collapse

A Collapse is very useful if a huge amount of content should be presented, while only one certain part of it might be useful for the visitor. He can select the title of the collapse to get more information or leave it by the broad overview.

[bs_collapse id="collapse_af9c-d5a9"]
[bs_citem title="Collapsible Group Item 1" id="citem_bea3-c795" parent="collapse_af9c-d5a9"]
Collapse content goes here....
[/bs_citem]
[bs_citem title="Collapsible Group Item 2" id="citem_e7fd-2f44" parent="collapse_af9c-d5a9"]
Collapse content goes here....
[/bs_citem]
[bs_citem title="Collapsible Group Item 3" id="citem_2977-f95c" parent="collapse_af9c-d5a9"]
Collapse content goes here....
[/bs_citem]
[/bs_collapse]

A collapse can be embedded by using the following shortcodes. Copy them, customize the text and titles of the collapse groups and delete the empty spaces after each opening bracket (otherwise only the tabs would be displayed).

[ bs_collapse id="collapse_af9c-d5a9"]
[ bs_citem title="Collapsible Group Item 1" id="citem_bea3-c795" parent="collapse_af9c-d5a9"]
Collapse content goes here....
[ /bs_citem]
[ bs_citem title="Collapsible Group Item 2" id="citem_e7fd-2f44" parent="collapse_af9c-d5a9"]
Collapse content goes here....
[ /bs_citem]
[ bs_citem title="Collapsible Group Item 3" id="citem_2977-f95c" parent="collapse_af9c-d5a9"]
Collapse content goes here....
[ /bs_citem]
[ /bs_collapse]

 

Well

A Well is useful to provide feedback for the visitor (e. g. if a form was submitted successfully).

[bs_well size="sm"]This well needs your attention.[/bs_well]

It can be embedded by using the following shortcode. Copy it, customize the text and delete the empty spaces after each opening bracket (otherwise only the well would be displayed).

[ bs_well size="sm"]This well needs your attention.[ /bs_well]

Buttons

There are different types and purposes of buttons. The default Button of the greenXchange Website should look like this.

[bs_button size="md" type="default" value="click me!" href=""]

It can be embedded by using the following shortcode. Copy it, customize the text and the link and delete the empty spaces after each opening bracket (otherwise only the well would be displayed).

[ bs_button size="md" type="default" value="click me!" href="https://www.greenxchange.de/"]

Icons

Twitter Bootstrap provides some standardized icons that are useful in very different websites. The following pictures provides an overview of all available icons.

Lead

Lead texts are for very important texts that should be outlined to get the attention of the visitor:

[bs_lead]This is a lead text and needs your attention. This is a lead text and needs your attention. This is a lead text and needs your attention. This is a lead text and needs your attention. [/bs_lead]

It can be embedded by using the following shortcode. Copy it, customize the text and delete the empty spaces after each opening bracket (otherwise only the lead would be displayed).

[ bs_lead]This is a lead text and needs your attention. [ /bs_lead]

edit this Post

For greenxchange.de we bought the WordPress Theme Levii. It can be configured by navigating through /Appearance/Themes in the WordPress Backend. By doing so you can e. g. change:

• the logo
• the main colors
• the font style
• the header of the website
• the claim that is displayed in the header

To avoid any side effects while updating the Theme a child-theme was created. It contains specific functionality in the functions.php (e. g. that users are redirected after logging in, or Widget Areas for the footer) and specific Design specifications in the styles.css (e. g. the height of the header is smaller, Featured Images are faded within the post and only used in the preview of the post)

Unfortunately the theme has (like other themes) some issues. Keep them in mind while working with the website:

• Adding a Featured Image (the image that is displayed in the preview of a Post) is only possible for new uploaded images. Selecting an existing Image out of the Media Library will end up in an empty Featured Image. Also if you like to change a Featured Image you have to copy the content of the Post into the clipboard, create a new post while pasting the content out of the clipboard, delete the old one and upload a new Featured Image (otherwise a slide show will be provided in the preview of the post). The developer is informed about this issue so that I hope to see a solution soon. (As a Workarround Featured Images are not cropped to avoid the problem of getting the right section - this is done in the functions.php in the original theme!!!)

 

Due to functional and security related improvements WordPress and single Plugins are updated regularly. New updates are indicated in the WordPress backend via red bullets that contain the number of available updates like shown in the following picture.

Before updating it is highly recommended to backup the Website. For this purpose navigate in the WordPress Backend to /Duplicator and conduct the following steps:

• Click on the button Create New in the upper right corner
• Set a name that indicates the date and the purpose of the backup
• Click onto next and wait while the potential contend is checked.
• By clicking 'Build the Duplicator Plugin starts compiling the Backup. It contains a snapshot of the database, the PHP files of the WordPress Instance and the Plugins, content (like pictures, pages).

Failures (mostly titled with 'Build Interrupt') might in most cases be related to the size of the package. To avoid those failures use a FTP-Client to backup the content located at /wp-content/uploads (this folder contains pictures and PDFs uploaded as content for the website) manually and advice the Duplicator Plugin to ignore the content of the folder /wp-content/wp-uploads by adding the Filter like shown in the picture below.