Website Editing Guide

Register on the site and gain access

To get started with editing on our website, please log in with your Google account via this link:

https://www.oikos-international.org/wp-admin/

After doing this, please send us an IT request (https://airtable.com/shrDU5TnKFuf7BqPM) related to "Wordpress". Please include which circle(s) in oikos International you're working at and we will set up your account accordingly. (There are certain user roles for different circles, so that you won't be overwhelmed by all the options you have.) You'll get an email as soon as this is done.

Once your account has been set up, you may always use the link above to log in and start editing.

All the following is depricated due to a change on our website in October '23. We'll try to update the rest as soon as possible.

The screen should then look like this:

If this is the case, you may proceed to the next part of the document.

Upload new pictures and documents

To upload pictures and documents to display in your posts, pages and events, please head to the media tab in the control panel.

The screen will now look like this.

You may now drag and drop new images onto the page to upload them.

Now, please click the image you just uploaded.

On this page, please fill out the “Alternative Text” and “Caption” fields with a short description of your image, if it is not purely decorative.

This is paramount to make the site accessible to people with disabilities like poor vision.

Finding pages

To edit pages, head to the “Pages” section of the control panel.

Pages are all static and “representational” parts of the site, such as the ones for programmes.

In the menu following this choice, you can see a list of all pages on the site.

You can filter and pick a page to edit here.

You can also click “Visit site” in the upper left corner of the control panel to go to the actual website and choose a page to edit from there.

Then, on any page, you may click the “Edit page” button to edit the page.

You can do this for posts and events as well.

Editing page metadata/details

Changing the Header

To change the header of a page, on the page edit view, please scroll down to the bottom of the editor.

This is the header of a page.

You will see 3 Fields.

Supertitle: The smaller text above the actual page title. Subtitle: The smaller text below the actual page title.

Header Excerpt: The longer text below the subtitle. This can be an introduction to the content of the page or a summary of it.

Header and Featured Image

Below these 3 fields, you can see the “Header Image” area. Here you can set a prominent image to be featured on the site.

To feature an image, you should set the “Add a Header Image” value to “Yes” and can then add an image via the “Select a Header Image” field.

You can use any image you previously uploaded in the “Upload new pictures” section.

The “Featured Image” is the image that is shown in the Google search results and on Twitter, Facebook & LinkedIn as well.

Attention! When you set a header image, you must also set a “Featured Image”. You can do this by expanding the “Featured Image” header on the right side of the screen and choosing the same image in the newly shown menu.

Attention! Please take care to choose an image that is big enough to support being shown at a close size.

Changing the Permalink

Each page has an associated permalink that identifies it and is shown in the web browser and on social media.

It should be simple and recognizable.

You can change this permalink by expanding the “Permalink” section on the right hand side of the screen.

You can then change the permalink. You can see a preview of the new link below the input box.

Note! When changing the permalink, all users requesting the old permalink will automatically be redirected to the new permalink, so don’t worry about possible confusion regarding moved pages.

Optimizing Search Engine appearances

When scrolling down on a post or page editor, you will see the “Yoast SEO” toolkit.

This is a tool which lets you optimize the Google appearance of your post or page and rates this appearance and the readability of your article based on a variety of factors.

Meta Description

The Meta Description of your article should be a punchy, less than 150 character long summary of your post. Take care that this is not cut off in the search result.

Keyphrase

The Keyphrase is supposed to be the most recognizable words from the article, which describe what it is about.

It has to:

1. Be present either at the start or close to the start of the Meta Description.

2. Contain words from the title of the article.

Editing content

Superficially, editing a post or page is very similar to editing e.g. a Word or Google doc. There are however some special functions you can use to spice up your page.

Note! You can see all the elements listed in this section in action at this link(you must be logged in): https://new.oikos-international.org/editing-demonstration/

Note! If you require a special layout for your page, please contact us and we will help you set it up!

Sidebars

Sidebars let you set some more text, images or sliders aside in the content of your post or page.

You can add a sidebar by setting “Add a Right Sidebar” to “Yes” and filling the “Main Content” box with what you wish to display in the sidebar.

Dialog Boxes

To show off more information about a topic hidden behind an image, you may use the “thumbpopup” code.

There are 3 variables needed for this: the three labels, the link to the image to be shown(src), an unique identifier for the popup and the content to be shown when clicked.

The code for this popup looks as follows:

[one_fourth]
[thumbpopup popupid="Luisa" src="https://oikos-international.org/wp-content/uploads/2019/10/Luisa.png" labelone="Luisa Marie Pütz" labeltwo="Strategy and IT" labelthree="International Vice-President"]
Always having an enthusiasm for sustainability, an environmental project in school had a profound effect on my life. From this point on, I have been involved in some kind of sustainability-oriented initiative.
Hearing from a friend from oikos, the mission of shaping the economy to a more sustainable one by equipping future employees with sustainable thinking convinced me from the beginning.
With joining oikos Bayreuth in 2017, during my bachelor's degree in Business Administration at the University of Bayreuth, my oikos journey started and continued with the participation in the LEAP Programm 2018/2019. During this program, I further developed my leadership skills. As the third president of oikos Bayreuth from 2018 until 2019, I changed the strategic orientation and simplified the communication. As an advisory board member, I act as a mentor to current presidents of oikos Bayreuth.

LinkedIn Profile

[/thumbpopup]
[/one_fourth]

You can access the link to put into the “src” field by clicking on the image to be inserted in the media library and observing the “File URL” field.

Accordions

An accordion can be used to hide certain content until it is clicked on.

To create an accordion, you have to specify the title and the content of the accordion.

Tabs

Tabs are a useful way to structure a page. When clicking a tab header, the content will switch over to this tab header.

For this, you have to specify the title of each tab and its content.

[tabgroup]
[tab title="International Board" id="International_Board"]
<CONTENT OF THE TAB>
[/tab]
[tab title="Management Team" id="Management_Team"]
<CONTENT OF THE TAB>
[/tab]
[/tabgroup]

Buttons

You can add buttons to your post or page that act as links.

[simple-button href="https://oikos-international.org/join-us/join-our-team-we-are-looking-for-oikos-international-working-group-members/" color="lighterred"]Join a working group[/simple-button]

“href” is the link the button should point to. “color” is a color. You can choose from the following colors:

1. “gray”

2. “lightergray”

3. “blue”

4. “lighterblue”

5. “red”

6. “lighterred”

Boxes

Boxes can help you highlight certain content on your post or page.

[simple-box backgroundcolor="blue"]
This is some text you can choose!
[/simple-box]

The “backgroundcolor” property can be any color of your choice.

Creating Events

Events can be created by switching to the Events part of the control panel.

Then, click the “Add new” button.

Basic Event Details

On this screen, there are multiple steps you will have to take before publishing your event.

1. Add a title and description(1). This description can have any elements you would be able to add in a post or page.

2. Add Tags for this event. These are “keywords” that people will be able to find events with. This can be done in the “Tags” panel(2).

3. Add event categories in the “Event Categories” panel(3). If the category that would apply doesn’t exist (e.g. FutureLab, Legislative Meeting), you can add a new category as well. Please check if the category you need already exists beforehand.

4. If this is an important event that should be highlighted, you may tick the “Feature Event” option in the “Event Options” panel(4).

5. Set a “Featured Image” for this event in the “Featured Image” panel(5) if applicable.

6. Set the Time & Date for this event(6). You can schedule this event to repeat if you need to do so.

7. Set the Venue for this event, if it is a local event(7).

8. Set the Virtual Event settings for this event, if it is a virtual or hybrid event(8).

9. If you want to provide contact information for the organizer of the event, provide contact information in the “Organizer” section(9).

10. If this is an external event(e.g. An event of a chapter), you may provide a website link for this event(10).

Collecting RSVPs

If you want to collect RSVPs for this event, you can click “Add RSVP” in the “Tickets” section of the page.

You may select the name of the RSVP(e.g. “Attend this Event”) and provide a description, in which you can provide some more information about the information needed.

You can then select a time period during which it is possible to sign up for the event. You may provide a maximum capacity for this event as well. The site will then lock sign-ups when reached.

Below, in the “Attendee Information” section of the event, you can add any survey questions that attendees will have to fill out to submit the RSVP, if needed. This works exactly like a Google Form and can be evaluated as such after the fact.

For example, here, users will be required to choose if they prefer their mineral water with or without gas, and can optionally enter their favorite kind of pretzel.