latest version

Masjid Documentation

General Information

General Information

Thank you for purchasing Masjid! We’re very pleased that you have chosen our theme to use on your website. We’re doing our best not to disappoint you! Before you get started, please check out these documentation pages. Masjid can only be used with WordPress and we assume that you already have it installed and ready to go. If you don’t, please see WordPress Codex to get started.

Requirements

Before using Masjid, please meet the following requirements:

  • Essentials to run WordPress – Read more about WordPress Minimum Requirements – in case any doubts regarding the server, contact your host provider.
  • Latest version of WordPress, which you can download here.
  • Create secure FTP and Database.

Installation

In our guide, we will show you step by step instructions on how to install our WordPress theme for beginners. Below you will find two ways to install a WordPress theme.

Installation via Administration Panel

If Masjid files are downloaded from your Themeforest account, you can start an installation using WordPress administration panel.

Follow steps below to install the theme:

  • Step 1 - Once you’ve logged in to your administration panel, go to My Sites > Network Admin.
_images/Installation1.jpg

  • Step 2 - Then click on Themes > Add New, you will be directed to a page where you can choose available themes.
_images/Installation2.jpg

  • Step 3 - Once directed to the page, on the upper left side of the screen click on Upload Theme button.
  • Step 4 - Choose the Masjidtheme.zip file from your computer, then click Install Now.
_images/Installation4.png

  • Step 5 - Click on My Sites then go to Appearance > Themes and Activate Masjid.
_images/Installation5.png

  • Step 6 - After activating Masjid, you will be sent to Theme Installation Instruction steps. By following this steps you will be asked to install required plugins, activate them, and import demo content (required).
_images/Installation6.png

Common Install Error: Are You Sure You Want To Do This?

If you get the following question message when installing Masjidtheme.zip file via WordPress, it means that you have an upload file size limit. Install the theme via FTP or call your hosting company and ask them to increase the limit.

Installation via FTP

To install Masjid WP via FTP, follow steps below:

  • Step 1 – Unarchive Masjidtheme.zip file
  • Step 2 – Access your host web server using FTP client
  • Step 3 – Find directory wp-content > themes
  • Step 4 – Put folder Masjidtheme in directory wp-content > themes
_images/inst_dir.png
  • Step 5 - Go to your WordPress administration panel, navigate to Appearance > Themes then activate Masjidtheme.

Learn more:

Unyson, Extension, and Plugins

Some functionalities of the Masjid Theme are available because of the plugins we used to create it. Once Masjid is activated in your WordPress admin panel you should see notification about bundled plugins we recommend to install – they are included in Masjid package – so you don’t have to do anything more than click install and activate.

Unyson

Unyson is a framework for WordPress that facilitates development of a theme. This framework was created from the ground up by the team behind ThemeFuse from the desire to empower developers to build outstanding WordPress themes fast and easy. This documentation is heavily modified by createIT to ensure all custom extensions are well documented.

This documentation assumes you have a working knowledge of WordPress. If you haven’t, please start by reading WordPress Documentation.

Minimum Requirements

  • WordPress 4.4 or greater
  • PHP version 5.2.4 or greater
  • MySQL version 5.0 or greater

Installation

Unyson is part of Masjid plugin that should be activated to be able to use the fully use this theme.

After plugin will be activated you will notice the Unyson entry in the sidebar:

_images/unysone_extension.png
Configure the plugin by going to the Unyson menu and activating the following extensions:
  • Backup & Demo Content: This extension lets you create an automated backup schedule, import demo content or even create a demo content archive for migration purposes.
  • Breadcrumbs: Creates a simplified navigation menu for the pages that can be placed anywhere in the theme. This will make navigating the website much easier.
  • SASS Compiler: Compiles SASS files. Remember to activate it when you are going to change theme colors via Customize.
  • Visual Composer: Allows for seamless integration with Visual Composer.
  • CT Gallery: This extension will add gallery post type support.
  • CT Team: This extension will add team post type support.
  • CT Sermons: This extension will add sermon post type support.
  • CT Testimonials: This extension will add testimonials post type support.
  • CT Twitter shortcode: This extension will add a twitter shortcode.
  • CT Footer: This extension will add footer sidebars and options.

License

The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public License is intended to guarantee your freedom to share and change free software. Unyson inherits the General Public License (GPL) from WordPress.

Extension

On the Unysone page you’ll see a list of avaliable extensions separated in two sections:

Active Extensions - Extensions that should be activate to be able to fully use Masjid WP theme functionality:

Available Extensions - Extensions not yet downloaded or activate.

Note

We recommend to not activate any of the extensios that are not part of the list above. They may not be compatible with the theme and could create unexpected issues.

Plugins

Visual Composer
_images/vc.png

Simply drag and drop elements to build your page content. We prepared components which will help you determine main structure of the webpage – easily set up backgrounds, colors and styles for whole sections as well as lots of various smaller components which you can freely put wherever you want.

Note

As the VC plugin used with Masjid WP Theme is part of a bundle, that mean that theme author has a license and only he/she can download latest versions of VC and include it in the theme. You as a theme user may use Visual Composer free of charge while you use the theme that came with VC (because you have a license for that theme).

Learn more:

For more information about Visual Composer, please check articles below:

Slider Revolution
_images/revslider.png

How to activate the plugin

Slider Revolution is included in Masjid WP package – so you don’t have to do anything more than click install and activate as you do with other plugins.

If you are new user of the revolution Slider plugin or you just want to check some of it functionality feel free to check Slider Revolution Documentation created by the authors of this plugin.

Contact Form 7

Contact forms in Masjid WP are created with the use of Contact Form 7 Plugin. Below you will find information how to recreate Contact forms used in our theme by adding the correct markup for the Form section of this plugin.

_images/custom_form.png

If you never before used this plugin I suggest you to check Getting Started with ContactForm 7.

MailChimp for Wordpress

MailChimp for WordPress helps you add more subscribers to your MailChimp lists using various methods. You can create good looking opt-in forms or integrate with any other form on your site, like your comment, contact or checkout form.

_images/Installation7.png

If you never before used this plugin I suggest you to check Knowledge Base for this plugin.

Events Manager

Events Manager is a free and feature-filled events plugin for the WordPress platform, providing the ability to publish events, locations and manage bookings among many other features.

_images/Installation9.png

If you never before used this plugin I suggest you to check Getting Started Guide

Give - Donation Plugin

The most robust, flexible, and intuitive way to accept donations on WordPress. Give is free and yet is full of many advanced features to suit your needs. Slick donation forms, full-featured reporting, and donor management features provide you with the tools you need to accept donations and manage your donors.

_images/Installation8.png

If you never before used this plugin I suggest you to check Give Features and Give Demos

Image Hotspot

This plugin will add awesome hotspots with unlimited tooltips for a single image. Works with latest Visual Composer v5.2.x

_images/short47.png

If you never before used this plugin I suggest you to check Live Demo

Instagram Feed

Display Instagram photos from any non-private Instagram accounts, either in the same single feed or in multiple different ones. Add beautifully clean, customizable, and responsive Instagram feeds to your website. Super simple to set up and tons of customization options to seamlessly match the look and feel of your site.

If you never before used this plugin I suggest you to check Overview

Demo Content

Note

To be able to use theme content installation and backup functionality make sure to activate Backup & Demo Content Unyson’s extension.

_images/unysone_extension.png

The fastest and easiest way to import our demo content is to use Theme Options Demo Content Installer. It will import all pages and posts, sample slider, widgets, theme options, assigned pages, and more.

Import Demo Content

To import our demo content, please follow the steps below:

  • Step 1 – Navigate to Tools where after activating the Unyson extension Demo Content Install option will be available

    _images/demo_content_inst.png
  • Step 2 – Choose import option you want to use from available options

  • Step 3 - To be able to continue you need to agree to this term.

    _images/warning_message.png
  • Step 4 – Wait until the content will be installed

    _images/install_new_content.png

Importing can take a few minutes. Please be patient and wait for it to complete. Once it is loading, you will see message with indicating progress.


We recommend this approach on a newly installed WordPress. It will replace the content you currently have on your website. However, we create a backup of your current content in (Tools > Backup). You can restore the backup from there at any time in the future.

_images/tools_backup.png

Right to Left

Masjid has the capability to have a Right to Left language set for the site.

To set the RTL of this theme, go to Dashboard > General > Site Language.

_images/Installation10.png

In Site Language, change the language to Arabic and click Save Changes button.

_images/Installation11.png

Support

All of our items comes with free support. Free support is limited to questions regarding the themes features or problems. We provide premium support for code customisation or third-party plugins.

Note

Our support hours: 10:00 AM – 6:00 PM UTC +1 on Monday to Friday.

Free Support

For issues and concerns, you can reach us through these support methods:

  • E-mailsupport@createit.pl

  • Help Desk – Click here to go to our support website. Just click on the Submit Ticket button and follow instructions to create a ticket.

  • Forum – Comment/Post on the product you have issues/queries in ThemeForest or CodeCanyon websites.

    Before You Post in a Forum

    We urge you to follow the steps below, before you post a new topic on the forum, to speed up your request. It’s in everyone’s interest and will benefit in making the entire forum more efficient:

    • Step 1 – Always check the Documentation and the Knowledgebase Section. Most questions are already answered in those areas.
    • Step 2 – If your question hasn’t been brought up on the forum, please post a new topic. Always be as specific as possible. Creating a topic requires entering the live URL to your home page or page that shows the issue in question. It also has bars for WP and FTP login info, which aren’t required, however, providing us with your login information can save a lot of time for both of us. Login credentials are securely stored and accessible only by our support staff.
    • Step 3 – We usually answer questions in 24 hours on working days. However, if you don’t get any answer within 72 hours bump up your question or send us an e-mail.

For all support methods, you will receive confirmations and replies on your queries through e-mail or by tracking your ticket which you will also get through e-mail. To track your ticket, please click here.

Once we reply to your query, each ticket will be open for 7 days without a reply from you. On the 6th day without a reply, an e-mail will be sent to notify you of the ticket’s inactivity. To make the ticket active again, you simply need to reply or follow the steps in the e-mail. If you won’t make the ticket active within 7 days, on the 8th day the ticket will automatically be closed.

Premium Support

We can create your website from scratch, redesign it or just extend the current ones. For more information, please take a look at our website. Typical issues covered by Premium Support:

  • Custom CSS
  • Support for third party software and plug-ins
  • WordPress Installation with Theme configuration
  • Server configuration
  • Site structure modifications
  • Graphic adjustments, etc.
  • WordPress general howto’s

Page

You can use Pages to organize and manage any content on your website. You can create multiple pages on your website for different types of content or setup onepager with scroll-to-section menu.

Create New Page

To create a new Page in Masjid follow the steps below:

  • Step 1 - In Dashboard, navigate to Pages > Add New. You will be directed to a page where you can add details on the page.

    _images/newPage.png
  • Step 2 - Add the Title of the page.

  • Step 3 - Add content – we recommend you to create page content using Visual Composer or by modifying demo content.

    _images/newPage1.png
  • Step 4 - Choose page attributes. To have the same look as the demo, at the Template section of the page attribute, use Full Width Page. This is a template set for Masjid.

    _images/newPage2.png
    • Parent – If you want to create this page as a subpage.
    • Template – You can choose one of defined page templates
    • Order – The order of the page.
  • Step 5 - After adding all the contents of the page, click on the Publish button.

Create Page Using Visual Composer

When using Visual Composer to add content, you have 2 Editor options, the Backend Editor and Frontend Editor.

_images/newPage3.png
Backend Editor
_images/newPage4.png
Frontend Editor

In adding contents to the page, there are many options to choose from. Some of the options are:

  • Elements - You will be able to choose elements that are needed and used on the page.

    _images/newPage5.png
  • Text Block – This is where you add Text to the page.

    _images/newPage6.png
  • Row – An area where you can add elements.

    _images/newPage7.png

Homepage Setup

If you have added some pages via Pages > Add New you can choose one and set it up as a homepage.

Use Static front page tool in Settings > Reading and choose from the list your homepage. Remember to click Save changes at the end of editing.

_images/newPage8.png

Masjid Elements

Masjid Custom Shortcodes

With Masjid comes many custom shortcodes for (Visual Composer) VC that are used to show content created in Masjid.

Below you will find short information about this Visual Composer elements:

_images/short.png

Donations Display

_images/short1.png

This element will let you display Donations’ items in a grid view.

_images/short2.png
- General Tab -
  • Number of columns - Number of columns to display the posts.
- Filter Tab -
  • Limit - Number of posts to display.
  • Order by - How the posts are ordered.
  • Sort Donation Order - How the posts order looks.
  • Specify Donation Categories - Only show posts under the categories of Donations’ item.
_images/short3.png

Events Display

_images/short4.png

This element will let you display the Events items in a slider.

_images/short5.png
- General Tab -
  • Autoplay - Option to make the slider move automatically.
  • Autoplay speed [ms] - Speed of the slider when moving.
- Filter Tab -
  • Limit - Number of posts to display.
  • Order - How the posts are ordered.
  • Order by - How the posts order looks.
_images/short6.png

Donations Forms

_images/short7.png

This element will let you add the Donations items in the page.

_images/short8.png
- General Tab -
  • Number of columns - Number of columns to display the posts.
  • Autoplay - Option to make the slider move automatically.
  • Autoplay speed [ms] - Speed of the slider when moving.
- Filter Tab -
  • Limit - Number of posts to display.
  • Order by - How the posts are ordered.
  • Sort Donation Order - How the posts order looks.
  • Specify Donation Categories - Only show posts under the categories of Donations’ item.
_images/short9.png

Styled Google Maps

_images/short10.png

This element will let you add a google map with a specific address.

_images/short11.png
  • Address - The complete address of the location to show in the map.
  • Latitude - Latitude coordinates of the location.
  • Longitude - Longitude coordinates of the location.
  • Custom map height - Set the height of the map. You can leave it blank for a responsive map.
  • Zoom - Set the zoom in of the map.
  • Map marker - Choose an image to use as the map marker.
  • Map style code - Code for a customized map marker.
_images/short12.png

Icon Box

_images/short13.png

This element will let you create an icon box that displays an icon with title and description or a counter.

_images/short14.png
  • Select display type - Type of icon box that will be shown.

    1. Type 1

      • Select icon type - Choose whether to show an image or an icon.

        1. Icon

          • Icon - Choose an icon to show in the icon box.
          • Icon Color - Color scheme of the icon.
        2. Image

          • Icon image - Choose an image to show in the icon box.
      • Select icon background shape - Background shape of the icon.

      • Select icon background color - Background color of the icon.

      • Select icon alignment - Location where the icon will show.

      • Title - Title of the Icon Box.

      • Title color - Font color of the title.

      • Select title alignment - Location where the title will show.

      • Description - Text description of the icon.

      • Description color - Text color of the description.

      • Select description alignment - Location where the description will show.

        _images/short15.png
    2. Type 2

      • Select icon background color - Background color of the icon.

      • Select icon type - Choose whether to show an image or an icon.

        1. Icon

          • Icon - Choose an icon to show in the icon box.
          • Icon Color - Color scheme of the icon.
        2. Image

          • Icon image - Choose an image to show in the icon box.
      • Select icon alignment - Location where the icon will show.

      • Title - Title of the Icon Box.

      • Title color - Font color of the title.

      • Select title alignment - Location where the title will show.

      • Description - Text description of the icon.

      • Description color - Text color of the description.

      • Select description alignment - Location where the description will show.

        _images/short16.png

Latest News

_images/short20.png

This element lets you add the latest blog posts.

_images/short21.png
-General Tab-
  • Number of columns - number of columns to show the latest blog post.
-Filters Tab-
  • Limit - Set results limit.
  • Skip X elements - Skip a number of elements from the results.
  • Order - How the posts order looks.
  • Order by - How the posts are ordered.
  • Specify Posts - Only selected posts are shown.
  • Exclude Posts - None of the selected posts will be displayed.
  • Specify Categories - Only show posts under the categories of blog posts.
  • Exclude Categories - None of the posts under the categories of blog posts well show.
  • Specify post tags - Only show posts with selected tags.
  • Keyword search - Show items with certain keyword.
_images/short22.png

Prayer Clock

_images/short23.png

This element will let you add a clock that indicates what prayer is scheduled with icon.

_images/short24.png
-Part # Tab-
  • Icon - Choose an icon to use.
  • Select icon color - Color scheme of the icon.
  • Title - Title of this part.
  • Select title color - Text color of the title.

Note

The time that this element follows to indicate the scheduled prayer will be based on the time zone which the user’s computer is set.

_images/short25.png

Prayer Grid

_images/short26.png

This element lets you a grid for the prayer schedules.

_images/short27.png
-General Tab-
  • Number of rows - number of rows for the grid.
-Prayer # Tab-
  • Prayer heading - Text in the header of the prayer box.
  • Prayer name - Text in the middle of the prayer box.
  • Prayer time - Text for the time that the prayer is scheduled. This is a static input.

Note

The time that this element follows to indicate the scheduled prayer will be based on the time zone which the user’s computer is set.

_images/short28.png

Styled Video

_images/short29.png

This element lets you a text-link for a popup video. You can add an icon or image beside the text-link.

_images/short30.png
  • Video - Link for the video.
  • Frame color - Color scheme of the frame.
  • Frame Position - Location of the frame.
  • Text color - Text color of the text in the frame.
_images/short31.png

Sermons Display

_images/short35.png

This element lets you show items in Sermons post type.

_images/short36.png
-Filter Tab-
  • Limit - Set results limit.
  • Order - How the posts order looks.
  • Order by - How the posts are ordered.
  • Specify sermon categories - Only show posts under the categories of gallery.
_images/short37.png

Note

To get the same layout as the demo site:

_images/short38.png

Set the Page template of the page where the sermons are displayed to Full Width Page.

Team Display

_images/short39.png

This element lets you show items in the Sacraments post type.

_images/short40.png
-General Tab-
  • Number of columns - number of columns to show the team members.
-Filters Tab-
  • Limit - Set results limit.
  • Skip X elements - Skip a number of elements from the results.
  • Order - How the team members order looks.
  • Order by - How the team members are ordered.
  • Specify Team members - Only selected team members are shown.
  • Exclude Team members - None of the selected team members will be displayed.
  • Specify Team Categories - Only show team members under the categories of blog posts.
  • Exclude Team Categories - None of the team members under the categories of blog posts well show.
  • Specify post tags - Only show posts with selected tags.
  • Keyword search - Show items with certain keyword.
_images/short41.png

Testimonial Slider

_images/short42.png

This element lets you show items in the Testimonials post type.

_images/short43.png
-General Tab-
  • Autoplay - Option to make the slider move automatically.
  • Autoplay speed [ms] - Speed of the slider when moving.
-Filters Tab-
  • Limit - Set results limit.
  • Skip X elements - Skip a number of elements from the results.
  • Order - How the testimonials order looks.
  • Order by - How the testimonials are ordered.
  • Specify Testimonials - Only selected testimonials are shown.
  • Exclude Testimonials - None of the selected testimonials will be displayed.
  • Specify Testimonials - Only show testimonials under the categories of blog posts.
  • Exclude Testimonials - None of the testimonials under the categories of blog posts well show.
  • Specify post tags - Only show posts with selected tags.
  • Keyword search - Show items with certain keyword.
_images/short44.png

Image Hotspot

_images/short45.png

This element lets you show an image with tooltips with descriptions.

_images/short46.png
-General Tab-
  • Image - Image to add tooltips on.
  • Tooltips display - How the tooltips will show.

Note

To add a tooltip click on the area where you like the tooltip to show, and the Hotspot Tooltip Content will show.

_images/short47.png

Masjid Plugin Elements

Some plugins that are used in Masjid generates an element that helps customize the pages on your site. You will see the plugin elements as follows:

Contact Form 7

_images/vc1.png

This is the plugin that can add a Contact Forms on a page. To know how to create a contact form, go to the Create Contact Form tutorial.

_images/vc11.png

Revolution Slider & Revolution Slider 5

_images/vc2.png

This plugin lets you add a slider that you made under the Slider Revolution. The slider revolution lets you make your own customized slider. To know how to use the slider revolution, go to the Create Revolution Slider.

_images/vc3.png

Visual Composer

_images/shortcodes36.png

This element lets you customize your page using a simple drag and drop of elements to build your page content. You can easily setup the backgrounds, colors, and styles for a whole section as well as lots of various smaller components which you can freely put wherever you want.

Some of these elements are:

Single Image
_images/vcElement.png

This element will let you add a single image in your page.

_images/vcElement3.png
Video Player
_images/vcElement2.png

This element will let you add a video or MP3 file inside your page by adding the link for the video/MP3.

_images/vcElement5.png
Progress Bar
_images/vcElement6.png

This element will add an animated progress bar in your page.

_images/vcElement7.png
Chart
_images/vcElement8.png

This element lets you add a graph. These are the types of graph that you can add:

  • Pie

    _images/vcElement9.png
  • Round

    _images/vcElement10.png
  • Line

    _images/vcElement11.png

Blogs Posts

Masjid is loaded with options for the blog. It offers many different options for you to present your blog posts, along with several different blog post layouts. In addition, there are numerous theme options and shortcode options that allow you to customize how posts are displayed.

Create New Blog

No matter which method you use to display your blog posts, first thing you need to do is create them.

Masjid offers several blog post formats:

_images/newblog.png
  • Standard - The default format for the blog post. It will show only the text in the blogs page.

  • Aside

  • Image - The Featured Image and a small preview of the text will be shown in the blogs page.

  • Video - A video and a small preview of the text will be shown in the blogs page.

    To be able to use a Video for the blogs post page, the blog format should be Video and the Video format settings will show where you add the Embed code of the video.

    _images/video.png

    To add a video in the single page of the blog, you can use the Video element in the VC.

  • Audio - An MP3 music and a small preview of the text will be shown in the blogs page.

    To be able to use a Video for the blogs post page, the blog format should be Video and the Video format settings will show where you add the Embed code of the video.

    _images/audio.png

    To add a video in the single page of the blog, you can use the Video element in the VC.

  • Quote - The quoted word in the blog post will be shown in the blogs page.

  • Link - A link in the blog post for a webpage will shown in the blogs page.

  • Gallery - The image gallery in the blog post will be shown in the blogs page.

Note

If the settings for Video or Audio format is not displayed, go to Screen Options at the upper right side of the screen. Click the options for Video format settings or Audio format settings, this should display the settings.

_images/note.png

Follow the steps below to create a blog post:

  • Step 1 - Navigate to Blog Posts > Add New in the Dashboard.
_images/newblog1.png
  • Step 2 - Create a title and insert your post content in the editing field. You can use any of our shortcode elements inside the post. If you want to use some additional fields, choose them from Screen Options at the top of the screen.
_images/newblog2.png
  • Step 3 - Add Blog Categories on the right side. Categories are meant for broad grouping of your posts, think of these as general topics. Categories are hierarchical, so you can add sub-categories. Sub-categories are made when a Category is added to a Parent Category . To assign it to the post, check the box next to the Category name.
_images/newblog3.png
  • Step 4 - To add Tags, write the Tags at the textbox below the Blog Categories. Tags are meant to describe specific details of your posts. They are the micro-data that you can use to micro-categorize your content. Tags are not hierarchical. Type the name of the tag in the field, separate multiple tags with commas.
_images/newblog4.png
  • Step 5 - To add a Single image, click the Featured Image box, select an image and click Set Featured Image.
_images/newblog5.png

To add more than one image, use Image Gallery (Visual Composer element) , each image will be a slide in the gallery slideshow. Gallery can be created by adding images from Media gallery or by adding External links of the images that will be used.

_images/newblog6.png
  • Step 6 – To post Video, use Video Player (Visual Composer element) and paste the direct video URL from Youtube, Vimeo or Dailymotion and more.

  • Step 7 – to post Audio, use Video Player (Visual Composer element) and paste the direct audio URL from Soundcloud, Mixcloud and more.

    _images/newblog7.png
  • Step 8 – For Quotation, use WordPress Blockquote option (Shift + Alt + Q). quote

  • Step 9 – For Links, use WordPress Inser/Edit Link option (Ctrl + K). link
  • Step 10 – Create an excerpt – Excerpts are optional hand-crafted summaries of your content that can be used in your theme. Learn more about manual excerpts.
  • Step 11 – Once finished, click Publish to save the post.

You will see all the Blogs created at Blog Posts > All Posts.

Blog Index Page

The most popular way of displaying blog posts is to setup blog index page. There all of your posts will be displayed and ordered by publish date.

To set the page as your post page, navigate to Posts page tool in Settings > Reading and choose Blog index page from the ones you created.

_images/blogInPage.png

Note

On Blog index page you will see only your posts, so don’t add any other content to it.

Blog Category

Categories are meant for broad grouping of your posts, think of these as general topics. Categories are hierarchical, so you can add sub-categories. Sub-categories are made when a Category is added to a Parent Category.

Adding categories to a blog would make it easier to locate and post on similar topics by category.

Create Blog Category

To create a Category for a blog, follow these steps:

  • Step 1 - Navigate your Dashboard to Blog Posts > Categories. You will see the Blog Categories page.

    _images/blogCat.png
  • Step 2 - In the page, find the Add New Category area. Add All the necessary information.

    _images/blogCat1.png
    • Name - The name of the category.
    • Slug - The URL-friendly version of the name. Usually all lowercase.
    • Parent Category - If the category is a sub-category, then look for the parent category in the drop-down box.
    • Description - Description of the category.
  • Step 3 - Once done filling out the information of the category, click on Add New Category button to save.

Delete Blog Category

To delete a Category, navigate your Dashboard to Blog Posts > Categories.

In the Blog Categories page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/blogTag2.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/blogTag3.png

Blog Tags

Tags are meant to describe specific details of your posts. They are the micro-data that you can use to micro-categorize your content. Tags are not hierarchical.

Adding tags to a blog post would make it easier to relate a post with another post even if the categories are different.

Create Blog Tags

To create a Tag for a blog, follow these steps:

  • Step 1 - Navigate your Dashboard to Blog Posts > Tags. You will see the Tags page.

    _images/blogTag.png
  • Step 2 - In the page, find the Add New Tag area. Add All the necessary information.

    _images/blogTag1.png
    • Name - The name of the tag.
    • Slug - The URL-friendly version of the name. Usually all lowercase.
    • Description - Description of the tag.
  • Step 3 - Once done filling out the information of the tag, click on Add New Tag button to save.

Note

Adding a tag may affect the tags from other component of the site.

Delete Blog Tags

To delete a tag, navigate your Dashboard to Blog Posts > Tags.

In the Tags page, you will see all the created tags.

To delete a tag, you have two options:

  • Single Delete - Hover your mouse pointer on the tag that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/blogTag2.png
  • Multiple Delete - To delete multiple tags, click on the box beside the tags you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/blogTag3.png

Note

Deleting a tag may affect the tags from other component of the site.

Sermons

Create New Sermon

To create a new Sermon item, navigate in WordPress Dashboard to Sermons > Add New.

_images/sermon.png

The Add New Sermon page will show. Add the details for the Sermons item.

_images/sermon1.png
  1. Title - Title of the Sermon.

  2. Editor container - You can add text descriptions about the Sermon on this area.

  3. Sermons Settings

    • Speaker - Name of the person who gave the spiritual message.
    • Date - Dates that the sermon is delivered.
    • Direct video URL -
    • Embedded Code - Time that the sermon is delivered.
    • Transcript file link - Media format of the sermon.
  4. Sermon Categories - Group a Sermon with other Sermons in the same category.


After adding all the details, click on Publish button to save.

Delete Sermon

To delete a Sermon, navigate your Dashboard to Sermons > All Sermons

In the Sermon page, you will see all the created Sermon.

To delete a Sermon, you have two options:

  • Single Sermon Delete - Hover your mouse pointer on the Sermon that you would like to delete. You will see a Trash option pop-up. Click on Trash to delete.

    _images/sermon2.png
  • Multiple Sermon Delete - To delete multiple galleries, click on the box beside the Sermon you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Move to Trash option. Click on Apply button to delete.

    _images/sermon3.png

Add Sermon to Page

To add a Sermon to a page, an element in the Visual Composer is used: Sermons Display

_images/short35.png

This is the element that will add a Sermon on the page. For more information about this element, go to Masjid Custom Shortcodes > Sermons Display.

Sermon Category

Categories are meant for broad grouping of your posts, think of these as general topics. Categories are hierarchical, so you can add sub-categories. Sub-categories are made when a Category is added to a Parent Category.

Adding categories to a Sermon would make it easier to locate and post on similar topics by category.

Create Sermon Category

To create a Category for a Sermon, follow these steps:

  • Step 1 - Navigate your Dashboard to Sermon > Sermon Categories. You will see the Sermon Categories page.

    _images/sermon4.png
  • Step 2 - In the page, find the Add New Category area. Add All the necessary information.

    _images/sermon5.png
    • Name - The name of the category.
    • Slug - The URL-friendly version of the name. Usually all lowercase.
    • Parent Category - If the category is a sub-category, then look for the parent category in the drop-down box.
    • Description - Description of the category.
  • Step 3 - Once done filling out the information of the category, click on Add New Category button to save.

Delete Sermon Category

To delete a Category, navigate your Dashboard to Sermon > Sermon Categories.

In the Sermon Categories page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/sermon6.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/sermon7.png

Team members

Create New Team member

To create a new Team item, navigate in WordPress Dashboard to Team members > Add New.

_images/team.png

The Add New Team member page will show. Add the details for the Team member item.

_images/team1.png
  1. Title - Name of the Team member.

  2. Editor container - You can add short descriptions about the team member on this area.

  3. Team options

    • Position - Position of team member.
  4. Tags - Specifically categorize a team member.

  5. Team Categories - Group a team member with team members in the same category.

  6. Featured Image - The image for the team member.


After adding all the details, click on Publish button to save.

Delete Team

To delete a Team, navigate your Dashboard to Team members > All Team members

In the Team members page, you will see all the created Team members.

To delete a Team member, you have two options:

  • Single Team Delete - Hover your mouse pointer on the Team member that you would like to delete. You will see a Trash option pop-up. Click on Trash to delete.

    _images/team2.png
  • Multiple Team Delete - To delete multiple galleries, click on the box beside the Team members you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Move to Trash option. Click on Apply button to delete.

    _images/team3.png

Add Team to Page

To add a Team to a page, an element in the Visual Composer is used: Team Display

_image/short73.png

This is the element that will add a Team on the page. For more information about this element, go to Masjid Custom Shortcodes > Team Display.

Team Members Tags

Tags are meant to describe specific details of your posts. They are the micro-data that you can use to micro-categorize your content. Tags are not hierarchical.

Adding tags to a Team Members post would make it easier to relate a post with another post even if the categories are different.

Create Team Members Tags

To create a Tag for a Team Members, follow these steps:

  • Step 1 - Navigate your Dashboard to Team Members > Tags. You will see the Tags page.

    _images/team5.png
  • Step 2 - In the page, find the Add New Tag area. Add All the necessary information.

    _images/team4.png
    • Name - The name of the tag.
    • Slug - The URL-friendly version of the name. Usually all lowercase.
    • Description - Description of the tag.
  • Step 3 - Once done filling out the information of the tag, click on Add New Tag button to save.

Note

Adding a tag may affect the tags from other component of the site.

Delete Team Members Tags

To delete a tag, navigate your Dashboard to Team Members > Tags.

In the Tags page, you will see all the created tags.

To delete a tag, you have two options:

  • Single Delete - Hover your mouse pointer on the tag that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/team6.png
  • Multiple Delete - To delete multiple tags, click on the box beside the tags you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/team7.png

Note

Deleting a tag may affect the tags from other component of the site.

Team Members Category

Categories are meant for broad grouping of your posts, think of these as general topics. Categories are hierarchical, so you can add sub-categories. Sub-categories are made when a Category is added to a Parent Category.

Adding categories to a Team Members would make it easier to locate and post on similar topics by category.

Create Team Members Category

To create a Category for a Team Members, follow these steps:

  • Step 1 - Navigate your Dashboard to Team Members > Team Members Categories. You will see the Team Members Categories page.

    _images/team8.png
  • Step 2 - In the page, find the Add New Category area. Add All the necessary information.

    _images/team9.png
    • Name - The name of the category.
    • Slug - The URL-friendly version of the name. Usually all lowercase.
    • Parent Category - If the category is a sub-category, then look for the parent category in the drop-down box.
    • Description - Description of the category.
  • Step 3 - Once done filling out the information of the category, click on Add New Category button to save.

Delete Team Members Category

To delete a Category, navigate your Dashboard to Team Members > Team Members Categories.

In the Team Members Categories page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/gallery2.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/gallery3.png

Testimonials

Testimonials

A Testimonial is a statement that testify to someone’s character and qualifications. You can use this statements on your page to establish confidence.

Create Testimonials

To create a new testimonial, on your Dashboard navigate to Testimonials > Add New.

_images/testi.png

The Add New Testimonial page will show. Add the details for the testimonial.

_images/testi1.png
  1. Title - The title of the single testimonial page.
  2. Editor container - You can add here the testimonial.
  3. Tags - Specifically categorize a testimonials.
  4. Testimonials Categories - Group a testimonial with testimonials in the same category.

After adding all the details, click on Publish button to save.

Delete Testimonials

To delete a Testimonial, navigate your Dashboard to Testimonials > All Testimonials

In the Testimonials page, you will see all the created testimonials.

To delete a testimonial, you have two options:

  • Single Testimonial Delete - Hover your mouse pointer on the testimonial that you would like to delete. You will see a Trash option pop-up. Click on Trash to delete.

    _images/testi2.png
  • Multiple Testimonials Delete - To delete multiple testimonials, click on the box beside the testimonials you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Move to Trash option. Click on Apply button to delete.

    _images/testi3.png

Add Testimonials to Page

To add testimonials to a page, an element in the Visual Composer is used: Testimonial Slider

This is the element that will add a testimonial on the page. For more information about this element, go to Masjid Custom Shortcodes > Testimonial Slider.

_images/short42.png

Testimonial Tags

Tags are meant to describe specific details of your posts. They are the micro-data that you can use to micro-categorize your content. Tags are not hierarchical.

Adding tags to a Testimonial post would make it easier to relate a post with another post even if the categories are different.

Create Testimonial Tags

To create a Tag for a Testimonial, follow these steps:

  • Step 1 - Navigate your Dashboard to Testimonial > Tags. You will see the Tags page.

    _images/testi4.png
  • Step 2 - In the page, find the Add New Tag area. Add All the necessary information.

    _images/team4.png
    • Name - The name of the tag.
    • Slug - The URL-friendly version of the name. Usually all lowercase.
    • Description - Description of the tag.
  • Step 3 - Once done filling out the information of the tag, click on Add New Tag button to save.

Note

Adding a tag may affect the tags from other component of the site.

Delete Testimonial Tags

To delete a tag, navigate your Dashboard to Testimonial > Tags.

In the Tags page, you will see all the created tags.

To delete a tag, you have two options:

  • Single Delete - Hover your mouse pointer on the tag that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/team6.png
  • Multiple Delete - To delete multiple tags, click on the box beside the tags you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/team7.png

Note

Deleting a tag may affect the tags from other component of the site.

Testimonial Category

Categories are meant for broad grouping of your posts, think of these as general topics. Categories are hierarchical, so you can add sub-categories. Sub-categories are made when a Category is added to a Parent Category.

Adding categories to a Testimonial would make it easier to locate and post on similar topics by category.

Create Testimonial Category

To create a Category for a Testimonial, follow these steps:

  • Step 1 - Navigate your Dashboard to Testimonial > Testimonial Categories. You will see the Testimonial Categories page.

    _images/testi5.png
  • Step 2 - In the page, find the Add New Category area. Add All the necessary information.

    _images/testi6.png
    • Name - The name of the category.
    • Slug - The URL-friendly version of the name. Usually all lowercase.
    • Parent Category - If the category is a sub-category, then look for the parent category in the drop-down box.
    • Description - Description of the category.
  • Step 3 - Once done filling out the information of the category, click on Add New Category button to save.

Delete Testimonial Category

To delete a Category, navigate your Dashboard to Testimonial > Testimonial Categories.

In the Testimonial Categories page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/gallery2.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/gallery3.png

Events

Create New Events

To create a new Event, follow these steps:

  • Step 1 - To start creating an Event, on your Dashboard navigate to Events > Add Event. The Add New Event page will show.

    _images/event.png
  • Step 2 - Once your in the Add New Event page, you can add details about the Event like title, pictures, videos, booking, etc., to help with the promotion of the Event.

  • Step 3 - These are the needed information for the Event, you can add the details.

    _images/event1.png
    1. Title - The name of the Event item.

    2. Editor container - You can add text detail/information, images, or videos about the event.

    3. When - Date and time details of the event.

    4. Where - Location details of the event.

      _images/event2.png
      • This event does not have a physical location. - Option for events that don’t have a physical location.
      • Location Name - Full address of the location of the event.
      • Address - Street/Building/Floor Number of the event location.
      • City/Town - City/Town of the event location.
      • State/County - State/County of the event location.
      • Post Code - Post Code of the event location.
      • Region - Region of the event location.
      • Country - Country of the event location.
    5. Booking/Registration - Booking information of the event.

      _images/event3.png
      • Enable registration for this event - Option to enable booking for an event.

      • Tickets - Ticket information is set.

        • Name - Name of tickets, example: Standard, Intermediate, VIP
        • Description - Details about the ticket.
        • Price - Ticket price.
        • Spaces - Available tickets to sell.
        • At least - minimum number of this ticket to buy per booking.
        • At most - maximum number of this ticket to buy per booking.
        • Available from - Starting date of this ticket when available.
        • Available until - End date of this ticket when available.
        • Required? - Option for when YES, user must buy 1 or the minimum number of this ticket.
        • Available for - Option for to whom this ticket is available.
      • Add new tickets - Create a new ticket.

      • Event Options

        • Total Spaces - Total space available in the event.
        • Maximum Spaces Per Booking - Maximum space that can be booked per booking.
        • Booking Cut-Off Date - End date of the booking for this event.
    6. Event Tags - Specific details that can be use to group this event with other events.

    7. Event Category - A broad detail that can categorize this event with other events.

    8. Featured Image - The Image shown in the listings/pages.

  • Step 4 - Add all the needed details and descriptions for the Event, once satisfied click on Publish button.

Add Events to Page

To add Events to a page, an element in the Visual Composer is used: Events Display

_images/short4.png

This is the element that will add a Donations on the page. For more information about these elements, go to Masjid Custom Shortcodes > Events Display .

Events Tags

Tags are meant to describe specific details of your posts. They are the micro-data that you can use to micro-categorize your content. Tags are not hierarchical.

Adding tags to a Events post would make it easier to relate a post with another post even if the categories are different.

Create Event Tags

To create a Tag for a Events, follow these steps:

  • Step 1 - Navigate your Dashboard to Events > Event Tags. You will see the Event Tags page.

    _images/event8.png
  • Step 2 - In the page, find the Add New Tag area. Add All the necessary information.

    _images/event9.png
    • Name - The name of the tag.
    • Slug - The URL-friendly version of the name. Usually all lowercase.
    • Description - Description of the tag.
    • Color - Add a color scheme for this event category.
    • Image - Add an image to represent the category. This image will be used by the Event Tags element to display Event items by category.
  • Step 3 - Once done filling out the information of the tag, click on Add New Tag button to save.

Note

Adding a tag may affect the tags from other component of the site.

Delete Events Tags

To delete a tag, navigate your Dashboard to Events > Event Tags.

In the Event Tags page, you will see all the created tags.

To delete a tag, you have two options:

  • Single Delete - Hover your mouse pointer on the tag that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/event10.png
  • Multiple Delete - To delete multiple tags, click on the box beside the tags you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/event11.png

Note

Deleting a tag may affect the tags from other component of the site.

Events Category

Categories are meant for broad grouping of your posts, think of these as general topics. Categories are hierarchical, so you can add sub-categories. Sub-categories are made when a Category is added to a Parent Category.

Adding categories to a Event would make it easier to locate and post on similar topics by category.

Create Events Category

To create a Category for Events, follow these steps:

  • Step 1 - Navigate your Dashboard to Events > Categories. You will see the Categories page.

    _images/event4.png
  • Step 2 - In the page, find the Add New item area. Add All the necessary information.

    _images/event5.png
    • Name - The name of the category.
    • Slug - The URL-friendly version of the name. Usually all lowercase.
    • Parent Category - If the category is a sub-category, then look for the parent category in the drop-down box.
    • Description - Description of the category.
    • Color - Add a color scheme for this event category.
    • Image - Add an image to represent the category. This image will be used by the Event Categories element to display Event items by category.
  • Step 3 - Once done filling out the information of the category, click on Add New item button to save.

Delete Events Category

To delete a Category, navigate your Dashboard to Events > Categories.

In the Categories page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/event6.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/event7.png

Event Bookings

To monitor and check for the bookings of an event, read the following information:

  • To check Events Bookings, go to Events > Bookings.

    _images/event12.png
  • You will be at Event Bookings Dashboard where all events that are created are shown.

    _images/event13.png
  • In Recent Bookings, Bookings for events are shown with the option for that booking. You can Approve, Reject, Delete, or Edit/View the booking.

  • In Events With Bookings Enabled, you can click on the name of the event you want to see the booking details. You will see the details and bookings of the event.

    _images/event14.png

Donations

Create New Donations

To create a new Donation, follow these steps:

  • Step 1 - To start creating an Donation, on your Dashboard navigate to Donations > Add Form. The Add New Donation Form page will show.

    _images/don.png
  • Step 2 - Once your in the Add New Donation Form page, you can add details about the Donation like title, pictures, videos, donation amount, etc., to help with the promotion of the Donation.

  • Step 3 - These are the needed information for the Donation, you can add the details.

    _images/don1.png
    1. Title - The name of the Donation item.

    2. Editor container - You can add text detail/information, images, or videos about the Donation.

    3. Donation Form Options - Set the details and format of the Donation.

      • Donation Options

        • Donation Option - Set the price and level of the possible amount donations. Choose from: Multi-level or Set Donation

          1. Multi-level Donation - Create a multi optioned donation for the form.

            _images/don2.png
            • Display Style - How the level of the donation is displayed.

            • Custom Amount - Option to allow users to input their own donation amount.

              • Minimum Amount - Set the minimum amount that the user can donate.
              • Custom Amount Text - Text to describe the minimum amount.
            • Donation Level

              • Amount - Donation amount for this level.
              • Text - Name of the donation level.
              • Default - Option to set the donation level as the default level.
            _images/don4.png
          2. Set Donation - Set a single donation for the form.

            _images/don3.png
            • Set Donation - Donation amount set for the form.

            • Custom Amount - Option to allow users to input their own donation amount.

              • Minimum Amount - Set the minimum amount that the user can donate.
              • Custom Amount Text - Text to describe the minimum amount.
            _images/don5.png
      • Form Display

        • Donation Option - How the donation information of the form is displayed.
        • Submit Button - The text/label inside the button.
        • Default Gateway - What payment gateway is used for the form.
        • Guest Donations - Option to allow guest users to donate.
        • Registration - Option to display the Registration and/or Login link if user is a non-logged-in user.
        • Floating Labels - Option to allow floating labels.
      • Donation Goal

        • Donation Goal - Option to enable donation goal.
        • Goal Format - The display format of donation goal.
        • Goal Amount - The amount you want to reach for this form.
        • Progress Bar Color - The color for the goal progress bar.
        • Close Form - Option to automatically close the donation form once donation goal is reached.
      • Form Content

        • Display Content - Option to add details about the donation form.
        • Content Placement - Location where the donation details are shown.
        • Content - Content for the donation details.
      • Terms & Conditions

        • Terms and Conditions - Option to require the user to accept terms before donating. Choose options: Global Option, Customize, or Disable
        • Agreement Label - This will show when Customize option is enabled. Label for the terms.
        • Agreement Text - This will show when Customize option is enabled. Content for the terms.
      • Offline Donations

        • Offline Donations - Option to enable offline donation for the form.
        • Billing Fields - This will show when Customize option is enabled. Enable the billing details section for this form’s offline donation payment gateway.
        • Donation Instructions - This will show when Customize option is enabled. Content for the instructions.
      • Email Notification

        • New Donation - Options for Email details for new donations. You can edit the email by clicking Custommize.
        • Donation Receipt - Options for Email details for donation receipt. You can edit the email by clicking Custommize.
        • New Offline Donation - Options for Email details for new offline donations. You can edit the email by clicking Custommize.
        • Offline Donation Instruction - Options for Email details for offline donation instruction. You can edit the email by clicking Custommize.
    4. Excerpt - Short summary of the information about the Donation.

    5. Form Category - A broad detail that can categorize this Donation with other Donations.

    6. Form Tags - Specific details that can be use to group this Donation with other Donations.

    7. Featured Image - The Image shown in the listings/pages.

  • Step 4 - Add all the needed details and descriptions for the Donation, Once satisfied click on Publish button.

Add Donations to Page

To add Donations to a page, elements in the Visual Composer is used: Donations Display and Donation Forms

_images/short1.png
_images/short7.png

This is the element that will add a Donations on the page. For more information about these elements, go to Masjid Custom Shortcodes > Donations Display or Masjid Custom Shortcodes > Donation Forms.

Donations Category

Categories are meant for broad grouping of your posts, think of these as general topics. Categories are hierarchical, so you can add sub-categories. Sub-categories are made when a Category is added to a Parent Category.

Adding categories to a Donation would make it easier to locate and post on similar topics by category.

Create Donations Category

To create a Category for Donations, follow these steps:

  • Step 1 - Navigate your Dashboard to Donations > Categories. You will see the Form Categories page.

    _images/don7.png
  • Step 2 - In the page, find the Add New item area. Add All the necessary information.

    _images/don6.png
    • Name - The name of the category.
    • Slug - The URL-friendly version of the name. Usually all lowercase.
    • Parent Category - If the category is a sub-category, then look for the parent category in the drop-down box.
    • Description - Description of the category.
  • Step 3 - Once done filling out the information of the category, click on Add New item button to save.

Delete Donations Category

To delete a Category, navigate your Dashboard to Donations > Categories.

In the Form Categories page, you will see all the created category.

To delete a category, you have two options:

  • Single Delete - Hover your mouse pointer on the category that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/don8.png
  • Multiple Delete - To delete multiple categories, click on the box beside the categories you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/don9.png

Donations Tags

Tags are meant to describe specific details of your posts. They are the micro-data that you can use to micro-categorize your content. Tags are not hierarchical.

Adding tags to a Donations post would make it easier to relate a post with another post even if the categories are different.

Create Donation Tags

To create a Tag for a Donations, follow these steps:

  • Step 1 - Navigate your Dashboard to Donations > Tags. You will see the Form Tags page.

    _images/don10.png
  • Step 2 - In the page, find the Add New Tag area. Add All the necessary information.

    _images/don11.png
    • Name - The name of the tag.
    • Slug - The URL-friendly version of the name. Usually all lowercase.
    • Description - Description of the tag.
  • Step 3 - Once done filling out the information of the tag, click on Add New Tag button to save.

Note

Adding a tag may affect the tags from other component of the site.

Delete Donations Tags

To delete a tag, navigate your Dashboard to Donations > Tags.

In the Form Tags page, you will see all the created tags.

To delete a tag, you have two options:

  • Single Delete - Hover your mouse pointer on the tag that you would like to delete. You will see a Delete option pop-up. Click on Delete to delete.

    _images/event10.png
  • Multiple Delete - To delete multiple tags, click on the box beside the tags you would want to delete. Then click on the drop-down box for Bulk Actions and choose the Delete option. Click on Apply button to delete.

    _images/event11.png

Note

Deleting a tag may affect the tags from other component of the site.

Contact Form

Create Contact Form

To create a new Contact Form item, navigate in WordPress Dashboard to Contact > Add New.

_images/newContact.png

The Add New Contact Form page will show. Add the details for the Contact Form.

_images/newContact1.png
  1. Title - The title for the Contact Form

  2. Form Details - Details and information of the form.

    • Form - The codes for the user interface of the form.
    • Mail - Set the email template of the form.
    • Messages - Message prompt when an action is done with the form.
    • Additional Settings - You can add customization code.

After adding all the details, click on Save button to save.

Create Contact Page

Contact Form Page of Sella is generated by the theme from Contact Form item.

To create an Contact Form Page, follow these steps:

  • Step 1 - Create a new page where to add the Contact Form.

    _images/newPage.png
  • Step 2 - Add a row element to the page, click the Edit this row option of the row. The Row Settings will pop-up.

    _images/portPage.png
  • Step 3 - Change the settings to your preference.

  • Step 4 - In the row, to add a title for the page. You have the option to add a Text Block or Section/Header Title element.

  • Step 5 - Add a new row to add the Contact Form item. The Contact Form can be generated by Contact Form 7 of Theme Element.

    _images/newContact2.png
  • Step 6 - The Contact Form 7 Settings will pop-up. Change details as needed.

    _images/newContact3.png
    • Select contact form - The form you want to add to the page.
    • Search title - Optional title to search if no form is added.
  • Step 7 - You can customize the page by adding other elements to the page.

  • Step 8 - Once you have finished customizing the page, click on the Publish button.

Sample Contact form

_images/newContact4.png

MailChimp Plugin

MailChimp for WordPress helps you add more subscribers to your MailChimp lists using various methods. You can create good looking opt-in forms or integrate with any other form on your site, like your comment, contact or checkout form.

Create New MailChimp Form

To start with making a MailChimp Form, you must set up a MailChimp list in your MailChimp Dashboard. You can read how to make a MailChimp list in this article.

Once you have made the MailChimp list, you can make the MailChimp Form.

  • In your wordpress dashboard go to MailChimp for WP > Form

    _images/mail.png

    Note

    Free users: You should be taken to the ‘Edit form’ page straight away.

    Premium users: you will need to make a new form by clicking the ‘Create New Form’ button atop the Sign-up Forms list.

  • You will be redirected to Edit Form, you will see the content of the form here.

    _images/mail1.png
  • You can add a field in your form by clicking the buttons in Choose a field to add to the form. The items in the List fields are the items in your MailChimp list.

    _images/mail2.png
  • To change the look of your form, you can go to the Appearance tab of the MailChimp form. You can choose the style in Form Style. You can customize the style of the form, just read these article.

  • Once you are done, click on the Save Changes button.

MailChimp Form on Page

Directly to the Page

  • You can add the MailChimp shortcode directly to the page where you would like to add it.

  • You can get the MailChimp shortcode at the bottom of the Mailchimp Form or by clicking <> Get shortcode button below the title of the form.

    _images/mail3.png
  • Create a new page where to add the the shortcode.

    _images/newPage.png
  • Write the MailChimp shortcode at the Editor container.

    _images/mail4.png
  • You can add other elements in the page if you like. Once done, click on publish.

Integration with Contact Form 7

  • You can see other plugins that can be integrated with MailChimp in MailChimp for WP > Integrations.

  • Here you can see that contact form 7 is capable on integrating with MailChimp.

    _images/mail5.png
  • Click on Contact Form 7 under Enabled Integration to configure the settings.

    _images/mail6.png
  • Once you are done with the configuration, click on Save Changes button.

  • On your dashboard, go to Contact > Add New to create a integrated form in contact form 7.

  • Add the title of the form then create the form by clicking the coding or clicking the buttons on what you would like the form to show.

    _images/mail7.png

    Note

    To successfully integrate the value from the Contact Form to MailChimp, the tags in contact form should be the same as of the tags in MailChimp.

    _images/mail8.png
    _images/mail9.png
  • On the page where you want to add the contact form, add a Contact Fom 7 element to the area you want the form to show.

    _images/newContact2.png
  • Then select the form title of the form. You can add other elements in the page if you like. Once done, click on publish.

Revolution Slider

Edit a Revolution Slider

To edit an existing revolution slider, in your dashboard go to Slider Revolution > Slider Revolution.

_images/rev.png

You can see the existing revolution slider at the Revolution Sliders area. Choose the revolution slider that you would like to edit.

_images/rev1.png

In the Slide Editor, you will see the slides that are created for a revolution slider. Click on the slide you want to edit.

_images/rev2.png

You can edit the text and image content of the revolution slider as you see fit in the editor. For more info on how to use the Revolution Slider, click here.

_images/rev3.png

Once you are satisfied, click the Save Slide button at the upper right of the page.

_images/rev4.png

Widgets & Menu

Widgets

Widgets are small blocks of content, which you can find in theme footer or sidebar. They were originally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress Theme to the user, which is now available on WordPress Themes to include the header, footer, and elsewhere in the WordPress design and structure.

_images/widget.png

How to Edit Widgets

You can access widget edit screen under Appearance > Widgets panel or via Customize on path Appearance > Customise > Widgets. It has three main areas:

  • Available Widgets
  • Inactive Widgets
  • Inactive Sidebars and widget areas

To add a widget to your site, drag and drop the name of the widget you want to use from the Available Widgets section into one of the widget areas on the right-hand side of the window.

After you have added it, the widget will open up (or if it doesn’t, you can click on the triangle to open it) and you can change the settings and save the widget.

The specific settings needed will depend on what type of widget you are using. For instance, if it is a text widget, you just need to type in the text (and optionally, HTML code), and save the widget.

Customising Masjid

Masjid comes with an advanced customizer, which allows to edit most of the theme’s elements in one place. If you want to use it, navigate to Appearance > Customize.

_images/custom0.png

Site Identity

Here you will have the option to customize your site’s identity or how it can be viewed by people.

_images/custom.png
  • Site Title - The title of the site you created.
  • Tagline - The slogan/catchphrase for you site. What people will remember if they see your site.
  • Display Site Title and Tagline - Option to display Site Title and Tagline in the site.
  • Site Icon - The icon used as a browser or app icon. Icons must be square, and at least 512 pixels wide and tall.

Add all the information you like to add, then click on the Save & Publish button.

Colors

You can pick the color scheme of the site here.

_images/custom1.png

Note

In order to use this feature, please have SASS Compiler enabled in Unyson extensions.

  • Pick the motive color - Pick the main color scheme of the site.
  • Pick the accent motive color - Pick the secondary color scheme of the site.

Add all the information you like to add, then click on the Save button.

Header Settings

The Header is where to set the behavior of the header.

_images/custom2.png
  • Logo - Logo shown in the header of the site.
  • Enable event counter - Option to show the latest event’s counter.
  • Event counter text - Text beside the event counter.
  • Enable socials - Option to show the socials of the site.
  • Enable search - Option to show the search icon in the header.
_images/custom3.png

Add all the information you like to add, then click on the Save button.

Socials

The Socials is where to set the social media accounts of the site.

_images/custom4.png
  • Facebook Link - URL link for the facebook account of the site.
  • Twitter Link - URL link for the twitter account of the site.
  • Google Plus Link - URL link for the google+ account of the site.
  • Instagram Link - URL link for the instagram account of the site.

Add all the information you like to add, then click on the Save button.

Blog Settings

The blog settings is divided into 2:

_images/custom8.png
  • Blog posts list

    • Display blog sidebar - Option to display sidebar in blog list page.

    • Place to display sidebar - Where the sidebar is placed.

    • Select width of sidebar - Width size of the sidebar.

      _images/custom9.png
  • Single blog post

    • Display blog sidebar - Option to show sidebar on the individual blog’s page.

    • Place to display sidebar - Location on the page where the sidebar is placed.

    • Tags after post - Option to display tags after post.

    • Social share - Option to show the Social Media Share Buttons.

    • Social Share - Activate the social media share you would like to show.

    • Display comments after post - Option to have a comments area after the post.

      _images/custom10.png

Post Types

This section is divided into 2:

_images/custom11.png

**Events **

_images/custom14.png

Note

This options will show in the Events Archive only.

  • Events page heading - Text for the heading that will show in the Events archive page. (Leave blank to use default text)
  • Events page subheading - Text for the subheading that will show in the Events archive page. (Leave blank to use default text)
  • Number of columns - Number of columns the events is displayed in the archive.

Google Api Options

The Google Api Options is where to set the google API key for your google map.

_images/custom15.png
  • Enter your Google Maps Api key - Enter the Google API key for the google map.

Note

If you don’t have a Google API key, click here to create a new key.

Add all the information you like to add, then click on the Save button.

Homepage Settings

Option for the front page is shown here.

  • Front page displays - Options on how the front page/home page looks like.

    • Your latest posts - Show the latest posts on your blog.

      _images/custom16.png
    • A static page - Set a page that would stay the same until the page is replaced manually.

      _images/custom17.png

Note

You can also do this using the Homepage Setup instructions in Page > Homepage Setup.

Widgets

You can customize what is inside the widgets on the page. If a widget is placed on the page you see on the preview, it will be listed on the left side under widgets.

_images/custom20.png
  • Footer 1 column
  • Footer 2 column
  • Footer 3 column
  • Footer 4 column
  • Post footer 1 column

Note

You can also do the same thing by following How to Edit Widgets instructions in Widgets & Menu > Widgets.

Additional CSS

You can add your own CSS code for your site.

_images/custom21.png