This theme is designed to be used by Internet Society (ISOC) chapters and other ISOC-related entities to create WordPress sites using the same general design as the 2012 www.internetsociety.org site.
More information - and the theme files themselves - can be found at:
IMPORTANT: If you encounter any issues with using this theme - or have suggestions for changes, please check the issue tracker and raise a new issue if necessary:
The issue tracker is public and viewing the issues is open to all. Raising an issue requires a Github account, but those are available for free.
If you would like to see the theme in action, the following sites use it:
- http://danyork.me/isoc-chapter/ (Sample site used in theme development)
- http://www.isoc.org.bd/dhaka/ (ISOC Chapter in Dhaka, Bangladesh)
- http://isocindiachennai.org/ (ISOC Chapter in Chennai, India)
If you use the theme and would like to have your site listed as an example, please email york@isoc.org.
This Readme document covers the following:
- Required plugins
- Installation
- Automatic Updates
- Initial Configuration
- Configuration
- Using the Events Manager Plugin
- Using a Child Theme For Customization
- Support / Questions
- Contributors and Contributing Changes
The instructions for this theme assume that the following plugin is installed and activated:
It is not a hard requirement for use of the theme, but allows for the creation of various widgets relating to categories.
Additionally, if you are not already using a plugin for managing events, the theme has been tested with this plugin:
Similarly, if you would like to have "breadcrumbs" at the top of your pages that allow for navigation within your site, this theme has been tested with:
More information about using the Events Manager and Breadcrumbs NavXT is provided later in this file.
The initial installation of the theme involves the following steps:
IMPORTANT - The theme unzips into a directory called 'isoc-wp'. If you already have a theme using that same directory name, bad things will happen. The safest plan would be to remove the previous theme using that directory name.
To begin, you need to download a ZIP file for the latest version of the theme from this URL under the heading "Download Packages":
IMPORTANT - Click on the name of the file (in the format "isoc-wp-version.zip") to download the theme. Do not click on the "Download as zip" button near the top of the page as that will give you the latest development version of the theme and will use a different directory name.
Next, in your WordPress admin area (or Network Admin if you are using WordPress MultiSite) do the following:
-
Go into the "Themes" panel, choose "Add New" and then choose the "Upload" link.
-
Upload the ZIP file you downloaded.
-
Activate the theme for your site.
Next you will want to go through the steps in the next sections on configuration to make any changes, update the home page slides, etc.
This theme is designed so that you will receive "automatic update" notifications when a new version of the theme is uploaded. To receive these notifications, you need to install the "Theme Updater" plugin from:
You simply activate the plugin and it will periodically check for updates. You will then see on your Themes panel that an update is available. More information about this Github-based update system can be found in this blog post.
IMPORTANT - Note that with automatic updates you should not directly edit the theme files to customize the site. Any such direct edits will be removed with the next automatic update. If you wish to customize the theme beyond what is available in the web panels, you should consider using a "child theme" as noted later in the document.
Before you start using the theme, you need to perform these steps.
All of the steps assume you are logged into WordPress and have access to the administration panels of your site.
- Go to Settings -> General
- Set the Site Title and Tagline
- Save the settings.
- Go to Appearance -> Menus
- If you do not already have the following menus, you need to click the "+" tab to create menus with these exact names:
- Footer Menu
- Navigation
- Utility Menu
-
You will want to add at least one item to each of the menus. If you have not yet created many pages, the simplest option may be to add the Home page to each menu. To do that, for each menu:
- In the Pages box on the left check the box next to Home. Note that you may need to click "View All" to see the Home page.
- Click "Add to Menu". "Home" will now appear on the menu.
- Press the "Save Menu" button.
Alternatively you can add Categories to the menu using the Categories box farther down the page.
- On the Appearance -> Menus page, there is a box in the upper left labeled "Theme Locations". You are going to assign your three new menus to these locations.
- Under "Primary Navigation", choose "Navigation".
- Under "Utility Navigation", choose "Utility Menu".
- Under "Footer Menu", choose "Footer Menu".
- Press Save.
- From the left-hand column, find the Homepage Slides section and click Homepage Slides or Add New
- Add title
- Enter short body content
- Upload a Featured Image (976px x 338px) using the box on the right
side. You need to:
- Click "Set Featured Image"
- Drag an image to the window or choose from the dialog box.
- Click the "Set featured image" link at the bottom of the dialog box.
- Enter "Additional Information", Sub-title (if applicable), Read More Link (URL), Read More text
- Save or Publish Changes
The theme is designed to use a number of widgets. To create these widgets, go to the Appearance section and choose Widgets.
NOTE: There are now three main areas where you can add content to the front page:
- Home Left Widget Area
- Home Center Widget Area
- Home Right Widget Area
This will give you a three-column layout with smaller columns on the left and right. IF YOU WANT A 2-COLUMN LAYOUT, simply do not add anything into the "Home Left Widget Area". If there is nothing there the "Home Center Widget Area" will expand to fill both columns.
You can add whatever widgets you want to any of the three widget areas.
- Open the Home Slideshow Widget Area.
- Drag and drop the Text Widget.
- Enter "Follow Us" as the title.
- Enter
<div class="content">at the beginning of the text box. - Using HTML, enter the appropriate links and icons. An example from the Deploy360 site is shown below.
- Enter
</div>at the end of the box. - Save the widget.
Example of social media code using the blue monochrome set:
<a href="http://www.facebook.com/Deploy360" target="_blank">
<img src="/wp-content/themes/isoc-wp/images/icon_facebook_blue.png" width="28" height="29" alt="facebook"></a>
<a href="http://twitter.com/deploy360" target="_blank">
<img src="/wp-content/themes/isoc-wp/images/icon_twitter_blue.png" width="30" height="29" alt="twitter"></a>
<a href="http://www.youtube.com/user/Deploy360" target="_blank">
<img src="/wp-content/themes/isoc-wp/images/icon_youtube_blue.png" width="29" height="29" alt="youtube"></a>
<a href="https://plus.google.com/b/100600212961472655878/" target="_blank">
<img src="/wp-content/themes/isoc-wp/images/icon_googleplus_blue.png" width="29" height="29" alt="Google+"></a>
<a href="http://www.internetsociety.org/deploy360/feed/">
<img src="/wp-content/themes/isoc-wp/images/icon_rss_blue.png" width="28" height="28" alt="RSS icon"></a>
The theme has enough space for five social media icons. All the icons are located in
the images folder inside the theme. The available icons are listed below. Note that
when referencing an icon in a widget or page you may need to use the full URL of:
/wp-content/themes/isoc-wp/images/_imagename_
Blue monochrome set:
images/icon_facebook_blue.pngimages/icon_flickr_v1_blue.pngimages/icon_flickr_v2_blue.pngimages/icon_googleplus_blue.pngimages/icon_linkedin_blue.pngimages/icon_rss_blue.pngimages/icon_scoopit_blue.pngimages/icon_stumbleupon_blue.pngimages/icon_twitter_blue.pngimages/icon_youtube_blue.png
Multi-color set set:
images/icon_delicious_lg.pngimages/icon_facebook_lg.pngimages/icon_flickr_lg.pngimages/icon_googleplus.pngimages/icon_linkedin_lg.pngimages/icon_reddit_lg.pngimages/icon_rss_lg.pngimages/icon_slideshare_lg.pngimages/icon_stumbleupon_lg.pngimages/icon_twitter_lg.pngimages/icon_youtube_lg.png
-
Open the Secondary Widget Area.
-
Drag and drop the Text Widget.
-
Enter "Follow Us" as the title.
-
Using HTML, enter the appropriate links and icons. See the example above for the appropriate HTML code.
Do not include
<div class="content">at the beginning or</div>at the end. -
Save the widget.
Two additional boxes are available to display content on top of the images on the home page. They are widget areas:
- Home Slideshow Widget Area2
- Home Slideshow Widget Area3
You may add one widget (such as the Text Widget) to each of these areas to display additional content.
- Find the Primary Widget Area.
- Drag and drop Text or other widget types and make appropriate changes.
- Find the Secondary Widget Area2
- Drag and drop Text or other widget types and make appropriate changes.
- Open the Footer Widget Area
- Drag and drop the Text Widget
- Enter appropriate text (copyright, email link, address, etc.). HTML is allowed.
- Save the widget.
If you would like to add a "blog" section to your site that lists all your posts, you can follow these steps. Note that this is not required and can also be done at any later time. As noted in the steps, it does not have to be called "Blog" but could use another name instead.
- Create a new Page ( Pages -> Add New ) that will be used for displaying all your posts. It only has to have a name and URL as WordPress will supply the content:
It is common to use "Blog" here with a URL of "blog", but you could use another name if you want to. Publish this page so that it is available.
- Go to Settings -> Reading.
- For "Front page displays" choose "A static page".
- Change "Posts page" to be the name of the page you just created.
- Change "Front page" to be the name of one of your other pages - or a specific blank page you create for this purpose. The content doesn't matter as it will be overridden by the theme - but you do need to have a page set here.
After you save the changes, all of your posts will be visible at "< yoursite >/blog", assuming you used "Blog" as your page name.
Now you can go into Appearance -> Menus and add the Blog page to, for instance, your Navigation menu so that it will appear on that main menu.
This section includes changes that you may want to make on an ongoing basis during the regular usage of your theme.
All of these steps assume you are logged into WordPress and have access to the administration panels of your site.
- From the left-hand column, find the Appearance section and click Theme Logo
- Enter URL of logo, or browse to upload new image.
- Save Changes
NOTE: Logo should be 197px x 82px.
Official ISOC chapter logos can be found at: http://www.internetsociety.org/chapter-logos If you are seeking a logo that is not listed please contact chapter-support@isoc.org
-
From the left-hand column, find the Appearance section and click Menus -
Select the appropriate menu tab to edit the menu. -
On the left hand column, you will see a list of pages. Select the page you wish to add to the menu. -
Drag and drop a menu to be in the correct order. -
Save.
If you add a "featured image" to a post, a thumbnail of that image will then appear next to the text when the post is included in a list of posts, such as an archives, category or author view.
- Edit the post to which you want to add a featured image.
- Near the bottom of the right sidebar find the "Featured Image" box and click the "Set featured image" link. If you do not see the "Featured Image" box, see the note below.
- Choose the image you want to use, either by uploading a new image, choosing an existing image from the Media Gallery or by supplying the URL to an image.
- Select the "Set featured image" button to set the image and close the window.
- Click the "Update" button to update the post with the added featured image.
NOTE: If you do not see a "Featured Image" box in the right sidebar it is most likely because WordPress is not set to show that box. Go to the top right corner of the WordPress window and click on "Screen Options" near your name:
In the panel that opens up, check the box next to "Featured Image" to display that box in the sidebar. When you are done you can click "Screen Options" again to hide this panel.
You are free to create whatever widgets and categories you wish, but if you would like an example, here is how you can create a "News" widget and an "Issues Spotlight" widget and update those widgets accordingly.
- Go to Posts -> Categories
- Add two new categories:
- News
- Resources
- Add a new post (Posts -> Add New) with the category "News". The text and title can be whatever you want - this is just a sample post so that you can see the template working when you add a "News" widget. This post can be deleted later.
- Add a new Post (Posts -> Add New) with the category "Resources". The text and title can again be whatever you want - and can be deleted later. You need this post so that you can configure the Issues Spotlight widget later in the process.
- Go to Appearance -> Widgets
- Find the Home Left Widget Area or Home Center Widget Area
- Drag and drop Category Posts Widget
- Enter:
- "Issues Spotlight" as title
- Category = "News"
- Number of posts
- Sort by "Date"
- Show Post Excerpt
- Show post thumbnail.
- Save the widget.
- Go to Appearance -> Widgets
- Find the Home Right Widget Area or Home Center Widget Area
- Drag and drop Category Posts Widget
- Enter:
- "Issues Spotlight" as title
- Category = "Resources"
- Number of posts
- Sort by "Date"
- Show Post Excerpt
- Show post thumbnail.
- If using the Home Right Widget Area, set the Thumbnail width = 128 (leave height blank)
- Save the widget.
- From the left-hand column, find the Posts section and click Edit or Add New
- Create or edit a post
- Assign it to the "News" category.
- Save or Publish
- From the left-hand column, find the Posts section and click Edit or Add New
- Create or edit a post
- Add an Excerpt, which is visible on the home page.
- Assign it to the "Resources" category.
- Add a Featured Image, if applicable. Image should be sized to 128px x 80px
- Save or Publish
There is a special widget area where you can install a "breadcrumbs" widget that will provide additional navigation options to your visitors. This theme has been tested with:
Here are the steps you need to follow:
- Open the Highlighted Widget Area
- Drag and drop the Breadcrumbs NavXT Widget
- In the widget configuration, set:
- Output trail as "Plain"
- Check "Link the breadcrumbs"
- Check "Hide the trail on the front page"
- Save the widget
NOTE: If you are using this theme on an installation of WordPress Multisite, you may need to go into the Breadcrumbs NavXT panel under "Settings" in your WordPress Dashboard and un-check the box next to "Main Site Breadcrumb":
If you do not do this, you may wind up with multiple instances of "Home" in the breadcrumb trail on your site.
If you are not already using an events management plugin, this theme has been tested with the Events Manager plugin available here:
The second link for the main site includes documentation and tutorials that go into the many capabilities offered by this plugin.
Within the theme, adding an event involves this process:
-
From the left-hand column, find the Events section and click Edit or Add New -
Add Name -
Add Event date -
Add Event time -
Enter Location information -
Enter Details -
Upload Event image -
Submit Event -
Events will need to be approved before going live. To approve an event, click on Events, click on highlighted event and select "approve" or "disapprove".
- Find the Appearance section and click Widgets.
- Open the Home Left Widget Area
- Drag and Drop the Events Widget
- Set the title, number of events to show, order, etc.
- Save the widget.
If you want to make deeper changes to the ISOC WordPress theme than what you can do using the widgets, menus and theme admin panels, the safest option is to create what is called a "child theme." Essentially, this is a separate theme that you apply to your site that references the ISOC theme and only includes whatever files from the original theme you want to modify.
For instance, if you wanted to make further changes to the header of the site, you might create a child theme that included only two files:
- style.css
- header.php
All the other files and settings would be pulled from the main ISOC theme.
The beauty of this setup is that the main ISOC theme can be upgraded without affecting any deep customizations you have made. This is the setup that the Deploy360 Programme uses to have a separate customization layer on top of the basic ISOC theme.
More information about using child themes can be found here:
(ACTION: An example of a child theme should be provided for chapters to be able to simply take and use.)
From time to time there will be new versions of this theme released as various issues and enhancements are addressed.
Ideally, the "Theme Updater" plugin mentioned at the beginning of the document will allow you to "automatically update" the theme and make this a simple process.
However, should that plugin be broken (as it currently is with WordPress 3.4) or for some reason not work on your site, the update process is a bit more involved:
- Download the latest ZIP file of the theme from the Downloads page:
https://github.com/InternetSociety/isoc-wp/downloads
IMPORTANT: Download the ZIP file from the bottom of the page under "Download Packages" and NOT by using the "Download as zip" or "Download as tar.gz" buttons. The download package uses the directory name of "isoc-wp" while those two buttons create a different directory name.
-
In the WordPress Themes panel, delete the current ISOC theme. (Note: If you are using WordPress Multisite, you will need to go into Network Admin -> Themes and then "Network Disable" the theme before deleting it.)
-
Use "Themes -> Add New" and then upload the latest ZIP file. (Note: If you are using WordPress Multisite you will then need to do "Network Enable".)
This WordPress theme is provided "as-is" for ISOC chapters and others to develop WordPress sites. While there are WordPress-savvy ISOC staff and volunteers able to assist, please understand that this assistance is not guaranteed to always be available. The best way to raise issues is to use the issue tracker found at:
The issues will be posted publicly and can be responded to be others working with the theme.
If you are familiar with modifying WordPress themes and want to make a direct contribution of code changes, we certainly welcome such contributions. You can either:
-
Raise an issue in the issue tracker and include your code in that issue.
-
If you are familiar with how Github works, you can fork the repository, commit your changes and issue a pull request.
To date, the following people or organizations have contributed to this theme:
- Dan York (ISOC staff)
- Marcin Cieślak (ISOC Poland chapter)
The original implementation of the theme was performed for the Internet Society by Balance Interactive.
Thank you for using this WordPress theme - please do offer suggestions and feedback through the issue tracker. Thank you.
This theme is licensed for usage under the terms of the GPL v2.0. See the file "license.txt" for more information.
Copyright 2012-2013 Internet Society