DotOrg

 

Theme Instalation

Installation via WP Dashboard:

1. Unzip/extract the main (downloaded) theme package – to get dotorg.zip file,
2. Go to Appearance >Themes,
3. click on “Add New” > and “Upload theme”,
4. click on ‘Browse’ button, find dotorg.zip file on your computer and press 'Install Now',
5. Activate theme,
6. After theme activation go to Appearance > Install Plugins, and install and activate Redux Framework plugin!
7. Refresh admin page and 'DotOrg - admin panel' button will appear;
8. Go to DotOrg - admin panel (theme options) and setup theme.

 

Installation via FTP:

1. Unzip/extract the main (downloaded) theme package / twice / to get theme folder ‘dotorg’,
2. Using FTP client (e.g. Filezilla) upload 'dotorg' folder into 'themes' folder in your WordPress installation ( YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/ ),
3. Go to Appearance >Themes, find DotOrg theme and activate theme,
4. After theme activation go to Appearance > Install Plugins, and install and activate Redux Framework plugin!
5. Refresh admin page and 'DotOrg - admin panel' button will appear;
6. Go to DotOrg - admin panel (theme options) and setup theme.

 

Default Setup

1. After theme activation go to Appearance > Install Plugins, and install and activate Redux Framework plugin!

2. Then go to DotOrg - admin panel

and hit "Save Changes" button to set default style settings:

You can change styling options later.

 

2. Following message may be visible after theme activation:

Click on 'Begin activating plugins' link and install and activate 'Redux Framework' (if not installed yet), Elementor and 'Shortcode Ultimate' plugins. Or you can do this by visiting Appearance » Install Plugins

 

4. IMPORTANT! It is possible that after theme activation are images wrongly cropped and look ugly! In this case use following plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/ to regenerate old thumbnails (from previous theme).
After plugin installation start regeneration in Tools > Regen. Thumbnails. This process can take a while and you cannot close tab/window until regeneration is done.

 

 

 

Homepage Setup

1. In 'Pages' section create new page > name it 'Home'
2. Select 'Builder' template for this page and save the page:
   
3. Go to Settings > Reading and created 'Home' page set as Static page > Front page,
   
4. Empty homepage is created now! In next steps, we'll create homepage content using 'Elementor' page builder.

 

Elementor

Important!

1. Go to Pages section and edit 'Home' page, which we have created in previous steps:
   
2. Make sure that 'Builder' template is selected for this page (1.), then hit 'Edit with Elementor' button (2.):
   

Adding Main Slider

1. Make sure that Eleslider is installed. Create few 'Slider' posts in left dashboard menu. Slider posts types are similar / work similar to classic posts. Set post title, add slide content and set featured image for every slider post. One 'slider' post represents one slide in the slider. See more
2. In 'Elementor edit mode' hit on 'Add new section' button and add select 'one column' setion:
   
   
3. Hover over the section and click on 1st blue icon to edit section (a.) In left section select 'Full Width' and 'No Gap' options (b.)
   
   
4. Then just click + sign (a.) and drag 'Eleslider' block into setion (b.).
   
5. Adjust 'Number of posts' parameter and optionally select 'featured slider category' in left panel.

Adding Columns

1. In 'Elementor edit mode' hit on 'Add new section' button and select e.g. 'two columns' section:
   
   
2. Using Drag&Drop resize columns to e.g. 70% (for wide column) and 30% (for narrow column):
   
3. Click on the + sign in wide column and then drag blocks from the left menu; e.g. add 'Themnific: Blog List' block to this wide column:
   
4. Adjust 'Number of posts' parameter and optionally select 'featured category' in left panel.
5. Click on the + sign in narrow column, then drag Sidebar block from the left menu into it:
   
   Select 'Sidebar' section (you need to set widgets for 'Sidebar' section in Appearance > Widgets)
   
6. This way you can drag other blocks into columns.

 

1. Important!
   Adjust padding for responsive mode! When you are building any layout using 'columns' in Elementor; click on small 'Desktop' icon in the Advanced tab; 'Tablet' and 'Mobile' icons will appear.
   Then click on 'Tablet' and 'Mobile' icon and check your layout on small screens. If necessary, adjust padding/margin values for the responsive mode.
   
   
   

Adding Hero image

 

1. Add new section and add two column layout:
   
   
2. Hover over the section and click on 1st blue icon to edit section:
   
   
3. Switch to the Style tab (a.) and add background image (b.)
   
   
4. Then just click on + sign in the left column and drag; e.g. Heading block into it.
   .
   
5. Click on heading; and in Content / Style / Advanced tabs customize the appearance (size, text colors, font style, padding etc.).
   
   
   
6. After all these, adjust overall padding (spacing) of the 'hero' section.
   a. edit section ,
   b. switch to the Advanced tab,
   c. adjust top and bottom padding of the section.
   
   

 

Homepage Overview

 

See the layout and structure of the demo homepage. The image bellow shows you which Elementor blocks are used on the homepage. Note: In theme demo are used custom widgets which come with 3dr party plugins (Events, Donations, Newsletter etc.). See Plugins chapter for more info.

 

 

Blog Template

1. If you want to create Blog (or News) page, create empty page (Default template),
2. name it 'Blog' (or similar),
3. go to Settings > Reading and set this page as 'Post page'
   

 

 

Theme Setup - Admin panel

Theme comes with extensive options panel with functions divided to these sections:

General Settings:

1. Upload your Main logo image,
2. Set header background image for blog and archives,
3. Enable/disable 'Uppercase' fonts.

 

Primary styling:

1. Select font family (with color, style and width) for main body text,
2. Choose colors for typographic elements: body, wrapper, containers (ghost color), text/links, hover, borders etc.

 

Header Styling & Settings:

1. Setup color scheme (background, font, links and border colors) for header,
2. Set other colors for header elements (sub- menus etc.),
3. Set custom margins and width limitation for logo image.

 

Footer Styling:

1. Select font family with color, style and weight for footer,
2. Choose colors for typographic elements: footer background, text, links, hover, borders etc.,

 

Other Styling:

1. Set font styling for 'Meta' sections (date, category etc. post information)
2. Choose background color for elements (buttons, lines etc.),
3. Select text/link color for elements (buttons, lines etc.),
4. Set color scheme for image backgrounds.

 

 

Headings Typography:

1. Select Font-family for all headings (h1- h6) and 'post titles',
2. Select font weight for all headings (h1- h6) and 'post titles',
3. Select Font-size for all headings (h1- h6) and 'post titles',
4. Select font color for all headings (h1- h6) and 'post titles',

 

Post Settings:

1. Turn On/Off partial post sections.

Social Networks Settings:

1. Enable "Social Networks" section,
2. Enter the full URL of social network, your profile or account (enter full URL: http:// or https:// including).

 

 

If you are finished click on "Save changes" button!

 

 

 

Custom Posts

 

Slider posts

DotOrg theme (+ installed Eleslider plugin) comes with 'Slider' custom posts. Function is to create simple image slider:

You can access and create Slider custom posts in main dashboard menu:

One 'Slider post' represents one slide in the slider.

Slider posts are similar / work similar to the classic posts. You can add slide content (headings, texts, button shortcodes etc.), set featured image and sort/list these posts into own categories.

 

Display of the slider is very simple, in Elementor use 'Eleslider' block in the 'full-width column'.

Custom Templates

 

1. Create a page by going to Page > Add New.
2. In Page Attributes section select custom page template (Full Width page etc.)
3. Click the Publish button to publish your page.

 

Custom Widgets

Theme comes with few custom widgets (marked as Themnific).

Go to Appearance > Widgets and setup your sidebar and footer widget areas. Widgets are very easy to setup.

Following widgets are used in theme demo:

In theme demo may be used custom widgets which come with 3dr party plugins (Events, Donations, Newsletter etc.).
Please see 'Plugins' chapter for more info about these plugins.

 

 

Images

IMPORTANT! It is possible that after theme activation are images wrongly cropped and look ugly!

In this case use this plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/ to regenerate old thumbnails from previous theme.
After plugin installation start regeneration in Tools > Regen. Thumbnails This process can take a while and you cannot close tab/window until regeneration is done.

Images and thumbnails are generated automatically.

To display thumbnails correctly upload images via WP interface using "Set featured image" button.
After image upload set featured image.

 

Featured Images - Minimal Sizes

1. Main Slider section: 1800x750px;
2. Blog template (Small images): 380x301px;
3. Single post (as "Header backgorundP): 380x301px;

 

 

Galleries: Native (grid) gallery

1. If you want to create post with gallery, you need to create classic wp gallery
   
   
2. Classic wp gallery has 'grid' layout (styling).
   
3. You can enable/create Tiled Gallery when you install 'Tiled Galleries Carousel Without Jetpack' plugin:
   

Post Settings & Post Formats

Post Settings:

In post add/edit screen is located custom 'Themnific Post Options' tab:

In this tab is possible to set (for every post):

- type of post's sidebar (sidebar position)

- option to disable featured image on the single post.

 

 

 

 

Custom Menu :

 

! Create own custom menus first! Please see following tutorial !

 

 

Colored Menu Item (on the right)

1. Toggle 'Screen Options' on the top of the menu screen:

2. Enable 'CSS Classes' option:

3. Toggle any menu item and type special word into 'CSS Classes' field

 

Menu Icons

 

1. Before (or after) menu label add this piece of code

<i class="fa XXX"></i>

Enter full icon code - 'fa' class is required.

2. For XXX you can set any icon name. You can find all icon names on Font Awesome homepage.

3. You can see how-to video here. It is not tutorial for my theme but the process is the same.

 

Plugins

 

Elementor

Elementor plugin will help you create awesome layouts for your pages.

Go to Appearance » Install Plugins inside wp dashboard and install and activate Elementor plugin.

Basic setup of this plugin is very easy; go to Elementor > Settings and disable default color and fonts:

Save changes and that's it. You can edit any page in the page builder now.

 

Give

Creating Campaigns and Donation Forms with GiveWP (Version 4+)

GiveWP 4+ introduces a new structure that separates Campaigns from Donation Forms for easier management and storytelling.

---

Step 1: Create a Campaign

1. In your WordPress dashboard go to:
   GiveWP → Campaigns → Create Campaign
2. Enter the Campaign Title and Description (this will appear on the frontend).
3. Upload a Featured Image – this will be used in campaign listings.
4. Set a Goal Amount (target amount for your campaign).
5. Hit Continue to create the campaign.

A campaign is like a donation landing page that can contain one or more donation forms.

---

 

Step 2: Create a Donation Form(s)

Each campaign needs at least one donation form for processing payments. The donation form will be created automatically. But you can create a new one or edit the default one in GiveWP → Campaign → Forms

You can assign multiple forms to the same campaign (e.g. one-time + monthly giving forms).

---

 

Step 3: Create a Public Campaign Page Using Elementor

GiveWP automatically creates a frontend campaign page. It is located in 'Pages' section

1. Go to Pages section
2. Click Edit with Elementor
   
3. Use the widgets located under the “GiveWP” section on the left side to create a landing page for your campaign:

Step 4: Display All Campaigns on a Page

1. Create a page using the Block Editor
2. Set 'Full Width' template for that page
3. Click the “+” icon in the top left corner, then add the block GiveWP → Campaign Grid.
4. Customize layout (grid, columns, goal progress, buttons)
5. Publish

 

 

 

Events Manager

Plugin page: Plugin Homepage

Into search field (in Plugins > Add New) insert 'Events Manager' and Install this plugin.

Events manager plugin is very complex and I recommend to check plugin documetation carefully! Please go through 'Getting Started Guide' to learn how to work with the plugin.

Theme related plugin settings:

a) In Events > Setting > Pages select 'Pages' template for Event and Location pages

b) In Events > Setting > Pages in 'Event List/Archives' section select on which page will used as an events page:

c) In Events > Setting > Formating enable Super Advanced Mode:

and after that paste the following code into 'Default event list format header' field:

<table cellpadding="0" cellspacing="0" class="events-table" >
<tbody>

and this code into 'Default event list format' field:

<tr>
<td class="date">
#_EVENTDATES
</td>
<td class="list_text">
#_EVENTIMAGE{130,130}
<h5>#_EVENTLINK</h5>
{has_location}<i>#_LOCATIONNAME, #_LOCATIONTOWN #_LOCATIONSTATE - #_EVENTTIMES</i>{/has_location}
#_EVENTEXCERPT
</td>
</tr>

close the table markup in the 'Default event list format footer'

</tbody>
</table>

d) In Events > Setting > Formating > Single Event Page paste following code into 'Single event page format' field:

<div class="event_header">
        #_LOCATIONMAP
        <h5> #_EVENTDATES<br /><i>#_EVENTTIMES</i></h5>
        {has_location}
  <p>  
		<strong>Location</strong><br/>
        #_LOCATIONLINK
  </p>
        {/has_location}
</div>
<br style="clear:both" />
        #_EVENTNOTES
        {has_bookings}
        <h3>Bookings</h3>
        #_BOOKINGFORM
        {/has_bookings}

 

 

MailChimp for WordPress

You can easily create newsletter subscribe form with 'MailChimp for WordPress' Plugin: Plugin Homepage

Into search field (in Plugins > Add New) paste MailChimp for WordPress and Install this plugin

Plugin can be set in MailChimp for WP section:

In demo is used subscribe form with following markup: https://pastebin.com/L2cFPYyP

 

 

AddToAny Share Buttons

Plugin page: Plugin Homepage

Into search field (in Plugins > Add New) insert 'AddToAny Share Buttons' and Install this plugin.

Plugin can be set in Settings > AddToAny:

Theme is compatible with Simple Share Buttons Adder too.

 

Contact Form 7

Plugin page: Plugin Homepage

Into search field (in Plugins > Add New) insert 'Contact Form 7' and Install this plugin

You can create own contact form(s) in main wp menu > Contact.

You can display created 'contact form' on any page using shortcode.

Please read plugin documetation for more info about this very flexible plugin.

 

 

 

Demo Import

 

 

Install and activate 'One Click Demo Import' plugin.

Import full demo content easily in Appearance > Import Demo Data after the plugin installation.

Just hit the 'Import' button and wait until the import is done (it can take few moments).

Elementor templates

If you don't want to import whole demo content you can import just elementor templates (via .json file).

.json files are located in main theme package, in 'spec' folder.

You can import template in Elementor edit mode > Add Template > Import Template:

 

Important!

Due licenses all imported images are for testing purposes only and cannot be used on your live website!!!

You can download free photos for your commercial & personal works on sites like:

http://picjumbo.com/

http://pixabay.com/

https://unsplash.com/grid

 

Translation

This theme is translation/localization ready and comes with dotorg.pot file. File is located in ../dotorg/lang/ folder.

1. You need to use localized WordPress installation (core) in the first place:
   
   If not, localization will be not successful.
2. Download poedit software here,
3. Install it and in this software translate dotorg.pot file (line by line),
4. Once you have translated all the strings, you can save this as your .po file.

   The filename of your .po / .mo file is crucial! Gettext uses the ISO 639 standard for language abbreviations and ISO 3166 for locales. If your translation is written in deutsch for example, your file name will look like de_DE.po. Capitalization is also important here. For a full list of language and country codes, check out these two links:

   • Gettext language codes
   • Gettext country codes

   Once you save, POEdit by default automatically creates a .mo file alongside your .po file. Put these files into 'lang' folder.

Your internationalization is complete!

 

 

 

 

---

Once again, thank you so much for purchasing this theme.

Go To Table of Contents