Table of Contents

Introduction

Getting Started

Installing Your Theme

The WordPress Administrator Interface

WordPress Basics: Editing Content

Changes to Standard Pages/Posts

Shortcuts

Adding New Pages

Adding Links

Inserting Images on Pages

Adding Videos (and other things)

Adding PDFs

Bulk Editing Content

Screen Options

Dashboard

Index Pages

Individual Content Items

Sections

Adding Sections

WYSIWYG Section

Multicolumn Text Section

Image Feature Section

Images

Icons

Hero Section

Content Collection Section

Display Style

Collection Type

Forms Section

Using Gravity Forms

Using Embedded Forms

Social Section

Social Feed Section

Homepage

News

Events

Navigation & Menus

Moving Pages on the Navigation Menu

Adding New Navigation Menu Items

Removing Navigation Menu Items

Image Tips

About Responsive Images

Orientation

Size

Image Content

Alt Text

Theme Settings

Theme Options

Display Options

URLs

Integrations/API Keys

Global Styles

Colors

Fonts

Buttons

Forms

Header Options

Footer Options

Footer Top

Footer Donate

Footer Bottom

Built-In Forms

Editing an Existing Form

Viewing Form Entries

Creating New Forms

Form Settings

Confirmation

Notifications

Adding Forms to Pages

Default Content

Social Media Sharing & Search Engine Optimization

Default Properties

Updating Social Sharing with Yoast SEO

Refreshing Facebook Sharing

Refreshing Other Services

Twitter

LinkedIn

Configuring Metadata and Focus Keywords with Yoast SEO

Users

User Roles

Add User

Remove User

Plugins

Adding New Plugins

Updating Plugins

WordPress and Plugin Updates

Maintenance and Security

Security

What to Do if Your Site Goes Down!

Down for Everyone?

Contact Your Host

Introduction

Congratulations on purchasing the DemCampaignSites theme for WordPress! This document provides specific instructions on how to install, configure, update and maintain your site.

This theme is compatible with WordPress, which is updated and improved frequently. This is good news for you, because it means that it’s always getting better and more secure. However, it also means that the platform may change slightly from update to update.

For that reason, we encourage you to visit the latest documentation and resources at the WordPress website at http://codex.wordpress.org/WordPress_Lessons for more information.

Getting Started

Installing Your Theme

If you’ve purchased the Basic Package, you will have received 2 files

  1. Demcampaignsite-0.1.0.zip
  2. Demcampaignsites-theme-0.1.0.zip

 

You can follow the instructions here on how to upload these files to your WordPress instance.  However, you’ll want to make sure to upload and activate all plugins for the file Demcampaignsite-0.1.0.zip BEFORE uploading the main theme file Demcampaignsites-theme-0.1.0.zip.

 

If you’ve purchased the Deluxe Package or have a custom site, no worries, we’ll do this for you :)

The WordPress Administrator Interface

Once logged in, you will see the WordPress Administrator Interface. This is where you make changes to your website. You’ll be using the following items:

  1. Theme Options. Universal site settings or changes.  This is where you’d set the styles for your site, social media links and configure your header and footer.
  2. Posts. A place for content articles, like blog posts.
  3. Events. Past and upcoming individual events.
  4. Media. Images and PDFs that are uploaded through WordPress.
  5. Forms. Where form settings and content (such as your Contact Us form) are managed.
  6. Pages. Main site content such as the homepage.
  7. News.  Another content area for other types of articles.
  8. Appearance. Where you navigation is managed.
  9. Users. Management of all administrators and staff.

WordPress Basics: Editing Content

Changes to Standard Pages/Posts

  1. From the WordPress Administrator Interface, click Pages on the left navigation menu. You’ll see a list of every page on your site, organized by folder structure.
  2. Click the page title to begin editing it. When the screen refreshes, you can choose Visual view, which looks like the screenshot below, or Text view.
  3. Make your changes.
  4. To preview your changes, click the Preview Changes button on the right.
  5. When you’re happy with your changes, click the blue Update button on the right to save them and publish them to your site.

Shortcuts

WordPress comes with some great quick text editing shortcuts for you to use:

  • Typing * in front of a sentence will automatically create a bulleted list.
  • Typing in front of a sentence will automatically create a numbered list.
  • Typing 1. or  1) in front of a sentence will automatically create a numbered list.
  • Starting your paragraph with two to six number signs # will convert that paragraph to a heading.
  • Starting with the greater-than symbol > will convert the paragraph to a blockquote.

Not your intention? Just press the backspace button.

Adding New Pages

To create a new Page:

  1. From the WordPress Administrator Interface, hover over the Pages item and select Add New.
  2. You now have a fresh page. Complete it with the following things in mind:
    • The name of your page goes in the empty box at the top. This is the name that will be used in menus at that the top of your published page.
    • Use the Format and Style dropdowns to make your text and links look interesting.
    • Remember to click Publish to make your page available to your site visitors.

Adding Links

You can turn text into a link by copying the link URL to your clipboard, highlighting the text you want to link, and then pasting to create the link. Usually, you would expect the selected text to be replaced with a link but not so in WordPress! Watch a quick video.

If that doesn’t work for you, you can also try the more traditional way of turning images and text into links to other websites, or other pages within your website:

add links

  1. While editing a page, or creating a new page, place your cursor in the text editor box.
  2. Highlight the text or image you want to turn into a link.
  3. Click the icon that looks like chain link. Click the gear icon to see all link options.
  4. Now you need to decide what kind of link to add:
    • To add a link to a different website, type the full address of the site (including the http://) in the URL field
    • To add a link to a different page in your site, select a page from your site in the bottom of the screen. Use the Search box to find the page quickly.
    • To add a link to an email address, just type the email address in the text area and then highlight it and click the link icon. WordPress will automatically turn it into an email link.
    • If you want to link to an email address from regular words, like “Email Us” type the text, and then click the link icon and type mailto:emailaddress@domain.com in the URL field, where emailaddress@domain.com is the person’s full email address.
  5. Click Add Link. You’ll notice that the text has turned blue.
  6. Click Preview to visit a preview of your updated page and click on your link to test it.

Inserting Images on Pages

You can insert images on any page or news item on your site. Here’s how:

add media

  1. While editing a page or creating a new page, place your cursor where you’d like the image to go.
  2. Click the Add Media option above the text editor bar.
  3. In the box that comes up, decide if you want to add an image from your computer (something you’ve never uploaded before) or use an image that is already uploaded to your site.
  4. To upload a new image, click the Select Files button.
  5. Locate the file on your computer and click Open. The screen will refresh once the file has been uploaded.
  6. Give the image a Title that will mean something to you in the future.
  7. Give the image Alternate Text that is descriptive, especially if the image has real information in it. Good Alternate Text helps your search results, so think about search terms when you add this text.
  8. Add a Caption if you’d like text to appear under the image on your page.
  9. If you want the image to link to a different website or a different page on your site, put that page address in the Link URL field.
  10. Select if you’d like the image to be on the left, in the middle, or to the right using the Alignment options.
  11. Select how large you’d like the image to be using the Size options. Most of your images are set to Medium.
  12. Click Insert into Post.

Pro Tip: You can do some basic image editing tasks like rotating, cropping, and resizing, right in WordPress. Select an image and click on the edit image link near the image thumbnail in the details section and off you go. Watch a video.

Adding Videos (and other things)

You can easily embed a YouTube or Vimeo video on any page or post on your site. Simply place your cursor where you’d like the video to appear and then paste in the video’s URL (it will look like this: https://www.youtube.com/watch?v=D2FX9rviEhw or https://vimeo.com/31158841 [by the way, watch these videos – you won’t regret the time]).

WordPress will automatically convert the link into an embedded video. Cool, huh?

WordPress is always updating these options, so check back to https://codex.wordpress.org/Embeds for more things that you can embed this way.

Adding PDFs

You can upload and link to PDFs on any page on your site. Here’s how to add a PDF:

add media

  1. While editing a page or creating a new page, place your cursor where you’d like to link to the PDF.
  2. While editing a page or news item, type a sentence like, “Download the application.”
  3. Highlight the sentence you just wrote, and click the Add Media option above the text editor bar.
  4. In the box that comes up, click the Select Files button.
  5. Locate the PDF on your computer and click Open. The screen will refresh once the file has been uploaded.
  6. Give the PDF a Title that matches what you want the sentence to say. If you type “My-Personal-Or-Internal-Document.docx” in the Title field, that’s what the link on your published page will say. Instead, type something like, “My Awesome PDF.”
  7. Be sure to click the File URL button under the Link URL field. This will ensure that when people click the PDF link, they go directly to the PDF.
  8. Click Insert info Post.
  9. When you’re happy with your story, click Publish. The sentence you highlighted is now a link to the PDF. When your visitors click it, they will automatically open the PDF.

Bulk Editing Content

WordPress gives you the ability to edit content in bulk by changing common elements across multiple pages at once.  To do this, follow these steps:

  1. When logged into WordPress, navigate to the content you want to edit (e.g. Pages, Posts, News, etc.) and click on the View All
  2. When viewing all content, check the Check All box next to title heading.
  3. In the dropdown above this checkbox titled Bulk Action change that to Edit and click the gray Apply button
  4. From here, you’ll have the option to change any of the above variables by changing the dropdown menus or selecting items from the multiselect box. Click the blue Update button to save your changes.

Screen Options

Screen options are a way to to customize the WordPress administrator interface to customize the display. You can edit these on different pages throughout your site using the Screen Options tab in the upper-right corner of the Administrator Interface:

screen options

Dashboard

The WordPress Dashboard is the first screen you see after logging in to WordPress. On it you’ll find both status information and links to all the administrative areas of the site.  When you click on Screen Options while on the Dashboard, you can customize it with security information, Google Analytics data, or a variety of other options.

Index Pages

When clicking on any of the main navigation links, such as Posts or Pages, Screen Options will allow you to change the view for what displays in the table content, as well as the number of items that display on each page.

Individual Content Items

When editing an individual content item, Screen Options will allow you to hide or show various content elements that you may or may not need on a page. For example, if your theme is not optimized to show Author information or the Feature Images, you can uncheck those items to not display them on posts.

Sections

Adding Sections

Your content builder uses Sections to place text content or hero images in different segments for each page. You can think of these Sections as “building blocks” for your page content.

When creating a new page, first give your page a title, then select the “Add Section” button.

sections

Each section has 4 basic settings:

  • Title – Adding a title to this field can help in the admin when organizing sections.  Click the Yes, display to visitors checkbox to also how this title on the page.
  • Width – Normal or Full
    • If you set the width to be full, you can also set the width of the content (either normal or full)
  • Background Color – Using the color picker
  • Text Scheme – Either Normal (for light backgrounds) or On Dark (for dark backgrounds)

A section can have a number of section types included in it.  Once you’ve added a section, click the Choose Section Type button.  The following sections are available and are covered in the following documentation:

  1. WYSIWYG
  2. Multicolumn Text
  3. Image Features
  4. Hero
  5. Content Collection
  6. Forms
  7. Social Feed

As you create sections, rows will be added to your page editor that you can click to expand or collapse as needed. You can click and drag each section as needed to rearrange the order of items in your page layout, as shown here:

sections

WYSIWYG Section

To add a text section, you would select this section type.  This section type can be used for a lot of different things as well, like embedding outside code from a third-party application.

Once you’ve set the basic section options, you can use the WYSIWYG to enter in your content following the instructions from the WP Basics section above.

Multicolumn Text Section

Similar to the above, Multicolumn text uses the same basic functions but allows you to display content in 2-5 columns.

multicolumn section

Select the radio button that corresponds to the number of columns you want.  Then you can use the tabs below (First column, Second column, etc). To access the WYSIWYG for each column.  Then you can use the WYSIWYG for each to enter in your content following the instructions from the WP Basics section above.

Image Feature Section

The Image Feature section type can feature 2 main types of images:  icons and pictures.

image feature section

Similar to the Multicolumn Text, you can have up to 4 image features in a row.

For each feature, you can set the Feature Heading.  This will display at the top of the feature. This is not required.  You’ll also need to set whether you want to use an image or an icon.

Images

image feature

When image is selected for the feature, you’ll then need to set the image you want to use by clicking the Add Image button (which links to the media library).

image feature section

Once you’ve set your image, you can toggle whether you want the image to stretch to fill the circle (like in the screenshot above) or center in the circle (this is best when using custom .pngs or .svgs) using the Set Image as Background Image button.

You’ll also need to set the color of the square in which the feature sits using the Background Color color picker.

Lastly, you’ll want to add the URL you want the feature to link to by adding that URL to the Button URL field (this can be a link to a page within your site or outside your site) as well as optional button text in the Button Text field.

Icons

icons feature

When icon is selected for the feature, you’ll then need to set the icon you want to use by using the dropdown Icon field.

icons feature section

Once you’ve set your icon, you’ll need to set the color of the square in which the feature sits using the Background Color color picker.

Lastly, you’ll want to add the URL you want the feature to link to by adding that URL to the Button URL field (this can be a link to a page within your site or outside your site) as well as optional button text in the Button Text field.

Hero Section

The hero section can be used at the top of the page as a replacement for a featured image or as a standalone section.  Either way, you’ll need to set the following for the hero section:

  • Background Image – set from the Media Library, must be a jpg or png measuring at least 1000×200 pixels

hero

The following is contained in a light colored box that appears to the left-hand side of the hero. You can add text, a form, etc. here using the following fields:

hero section

  • Heading – this is what will appear at the top of the box styled with whatever you set as the heading styles in the Theme Options
  • Text Content – here you can use the WYSIWYG to enter text, a form (either built-in or embedded), photo, etc.
  • Button Text – adding text here will display a button
  • Button URL – the page you want the button to take the user to

Content Collection Section

The content collection section is a powerful tool for displaying all sort of different content, media and posts on your site.  This section can display a collection of up to 24 recent pieces of content based upon a number of options.

As you add this section, there are a number of decisions you’ll need to make (each of which are expanded upon in the documentation below):

  • Display Style:  grid, list, slider
  • Collection Type:  explicit or generated
  • Sort Order:  alphabetical, most recent, event date (only applicable to events)

Display Style

If you selected Grid or List, you’ll also need to determine the following (these options are not available if you select slider):

  • Icon:  If you’d like to have an icon appear next to each item in the collection, use the Icon dropdown
  • Show Excerpt:  If you like to show a brief excerpt from the content item, click that checkbox
  • Featured Image:  If you’d like to display the featured image from that content item in the collection, click that checkbox

display options

Collection Type

The collection type option is where you will determine what content is displayed.

If you selected Explicit, a selector box like the one below will appear.  Here simply click the items you want to display in the content collection from the left hand column.  You can use the search bar or select dropdowns to help find the content you want to display.

Once content has been selected, it will show up in the right hand column.  If you want to remove a piece of content, click it and click the – sign that appears.

content collection

If you selected Generated, a selector box like the one below will appear.  Here you have the following options:

  • Type of content to include
  • Limit by certain categories
  • Set the number of items to show

content collection

Forms Section

The forms section allows you to add forms to a page in 2 different ways:  using the pre-built forms in Gravity Form (more information on those here) or by adding your own embed code from your CRM.

Once you’ve add the Form section, if you want to use a form from Gravity Forms, use the Form Type dropdown to select Built-In.  Or if you want to use an embedded form, use the Form Type dropdown to select Third Party.

Using Gravity Forms

If you selected Built-In, a WYSIWYG will appear with a button that says Add Form.  Click that button and a popup window will display with a drop down listing all the available forms.  Use the Select a Form dropdown to select the form you want to use.  You also have other options like displaying the form title, form description or enabling ajax.  Then click Insert Form.

gravity form

Using Embedded Forms

If you selected Third-Party, an HTML editor will appear where you can paste in the embed code.  Make sure to follow the instructions of your CRM when creating the embed code.

embedded form

Social Section

This section allows you to add links to your social media pages on any page on your site.

Set the width of the section using the Social Feed Width field.

Then click the checkboxes under Social Media Links to add the corresponding links you set in the Theme Options to add those icons and links to the page.

Social Feed Section

This section allows you to add your Facebook or Twitter feed on any page on your site.

Set the width of the feed itself using the Max Width of Feed slider.  This is set as percentages.

Then in the HTML fields, enter your Twitter and/or Facebook embed code in the corresponding field.  To get your Twitter feed code, go here.   To get your Facebook feed code, go here.  Note: Facebook API token must be set in Theme Options > Integrations for Javascript method to work, instructions are here.

Homepage

This theme comes with 3 pre-built homepages.  You can start with one of these 3 templates or create your own using sections.  Each homepage template is created with section as well. Follow that documentation above on how to use sections.

Homepage #1

    • Hero image with built-in sign up form
    • Callouts
      • Share – link to FB sharer
      • Donate – link to built-in donate page
      • Volunteer – link to built-in volunteer page
    • Latest News (autogenerating latest 3 news posts)
    • Upcoming Events (autogenerating upcoming 3 event posts)
    • Flexible WYSIWYG section
    • Area for Twitter or FB Feed

Homepage #2

    • Hero image with built-in sign up form

Homepage #3

    • Hero image with built-in sign up form
    • Callouts
      • Share – link to FB sharer
      • Donate – link to built-in donate page
      • Volunteer – link to built-in volunteer page
    • Area for Twitter or FB Feed

To use one of the pre-built options, go to Settings > Reading and use the dropdown menu next to Your homepage displays > homepage to select the option you want to use to get started.  Then click Save Changes.

News

The DemCampaignSites theme comes with a pre-built news post type. To add/edit news posts:

  1. From the WP admin, go to News.
  2. If creating a new post, click the Add New button.  If editing an existing post, hover over the post you want to edit and click Edit.
  3. For each news post, you have the options for the following (* means required):
    1. Title*:  The title of the post which will display on the post itself
    2. Source:  Use this field to enter the publication the post came from, if applicable.
    3. Author:  Use this field to add the name of the article author, if not from this site.
    4. External URL:  Original URL of where the article appeared, if applicable.  NOTE, if you enter this and leave the body blank, it will auto-redirect to this URL.
    5. Body:  The content of your post
    6. News Type:  Built in taxonomy so you can distinguish one kind of post from another
    7. Featured Image:  Set the image to display at the top of the post.
    8. Excerpt:  If you want to create a custom excerpt to display on the archive or in the content collection.  If left blank, the excerpt will be auto generated from the body content.

Once you’ve filled in the applicable information, click the Publish or Update button.

Events

The DemCampaignSites theme comes with a pre-built events post type. The theme uses a tool called the Events Calendar.  They have extensive documentation available here.  To add/edit event posts, here are the basics:

  1. From the WP admin, go to Events.
  2. If creating a new post, click the Add New button.  If editing an existing post, hover over the post you want to edit and click Edit.
  3. For each post, you have the options for the following (* means required):
    1. Title*:  The title of the event which will display on the post itself.
    2. Body:  The content of your post.
    3. Start/End:  The start and end date/time of your event.  If an all day event, check that box.
    4. Venue:  Use the dropdown to select the appropriate venue or create a new one.
    5. Show Google Map:  Check this box to display a Google Map of the location
    6. Show Google Map Link:  Check this box to display
    7. Organizer:  Use the dropdown to select the appropriate organizer(s) or create a new one.
    8. URL:  To add an external link, if applicable.
    9. Currency Symbol and Cost:  Enter information here on the cost of the event if applicable.
    10. Event Categories:  Built in taxonomy so you can distinguish one kind of post from another
    11. Featured Image:  Set the image to display at the top of the post.
    12. Excerpt:  If you want to create a custom excerpt to display on the archive or in the content collection.  If left blank, the excerpt will be auto generated from the body content.

Once you’ve filled in the applicable information, click the Publish or Update button.

Navigation & Menus

You have complete power over your menus. Here’s how to change them:

  1. From the Dashboard, hover over Appearance and click Menus.
  2. There is a dropdown on the top of this page containing all menus on the site:
    1. Utility Menu
    2. Main Menu
    3. Footer Menu
  3. Choose the menu you wish to edit and click on the gray Select button.

Moving Pages on the Navigation Menu

  1. Locate your item in the menu and simply drag and drop it to another section on your menu.
  2. We encourage you not to add any additional menu items to the top level or indent a third-level item. All existing and new items should be placed under a current main level item.
  3. Once you’ve made your changes, click Save Menu.

Adding New Navigation Menu Items

  1. To add new items to your navigation, simply select an item from the areas in the left, and click Add to Menu.
  2. Once your new item is added at the bottom of the list, you can drag and drop it in the correct location on your menu.
  3. Once you’ve made your changes, click Save Menu.

Removing Navigation Menu Items

  1. When editing a menu, click on the down arrow in top right corner of the box for any item that you want to remove.
  2. Click the red link to remove the item.
  3. Once you’ve made your changes, click Save Menu.

For more information about WordPress menus, check out their documentation.

Image Tips

About Responsive Images

This template uses a wide variety of images in different sizes. To make sure that images display well on a variety of different devices, including phones and tablets, images are set to be responsive. This means that there is no one standard size is used for a single image on the site, as it is set to change size depending on the device that the site is being viewed on.

The width, height, and focus of the image changes dramatically depending on screen size.

Because images are responsive, there’s no one exact size recommendation for each image. However, there are things you want to consider as you select and change images throughout the site.

Orientation

Image areas are styled to display images in a certain orientation as needed for that page/location. Images can be:

  • Horizontal (landscape)
  • Vertical (portrait)
  • More square – the image should be as tall as it is wide
  • More rectangular – the image should be wider than it is tall or taller than it is wide

Using an image that doesn’t match the orientation of the image area leads to sizing issues.

In cases where a particular image does not fit an area well, you can either:

  1. Choose a different image that is a better fit for the image area, or
  2. Crop the image so that it better fits the image area. WordPress has built-in functionality that allows you to resize and crop images. More info on editing images in WordPress is available here.

Size

Images change sizes on different devices, but by default, some images are set to be smaller than others. For example, a header image on a page will always be larger than smaller images throughout a page.

Attempting to use a small image in a large image area often makes images look blurry and low-quality. This is because your website is “blowing up” the image to make it fit in the larger image area.

Because of this, you should always keep the general size of images in mind as you plan to use them in certain image areas. For example, trying to using a 200×200 (small, square) image in a large header image area will be a disaster!

Image Type / Location Ideal Size Notes
Homepage Hero Image 600px tall (this matches the dimensions on the sample homepage) Minimum dimensions are 1000px x 200px
Page Featured Image 400px tall (any taller and the image may be cut off)
Header Logo 135x135px The logo will be display as half the size for best resolution on retina devices. Upload the logo at double the size you intend for it to display.

Image Content

It’s always good to consider the content of your image in relation to the image area that you’re planning to use it for. For example on the homepage:

hero

This panel has a large, text area overlapping the left side, so you wouldn’t want to use an image that has a face on the right side.

By the same token, images that have faces or other focal points near their “top” can be problematic because faces will be cut off or removed on some screen sizes.

Alt Text

With accessibility on websites becoming a topic in the forefront of web design, it is important to set the alt text for any images you plan to use on your site.  Alt text is serves 3 main purposes:

  1. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image.
  2. Displayed in place of an image if an image file cannot be loaded.
  3. Provide better image context/descriptions to search engine crawlers, helping them to index an image properly.

To set the alt text of an image, go to your Media Library and click Edit on the image you want to add the alt text to.  Once on the edit media page, you’ll see a field that is labeled Alternative Text.  Enter your alt text there and click Update.

Theme Settings

Your theme settings’ is where you can set the global styles for your site.  From the WP menu, go to Theme Options.  There are 4 different option groups you’ll need to set:

  • Theme Options
  • Global Styles
  • Header Options
  • Footer Options

When setting any of these, make sure to click the Update button to save your changes.

Theme Options

Display Options

Display options is where you’ll set a lot of the defaults for your site including:

  • Error Page – There is a pre-built 404 page built into this theme that is currently set to display when a URL cannot be found.  Use the dropdown to change that Error Page and/or you can edit the pre-built 404 page.
  • Default Featured Image – Just like when you set a featured image for a page, you can select a default featured image from your Media Library by clicking the Add Image button to display when one is not selected for a specific page.
  • Excerpt Settings
    • Length/Units – Set the length and unit for excepts that appear in areas such as content collections.
    • Link Text – Set the text to display on the button to view a post.

URLs

This is where you will set all the links for your social media pages.  There are 2 sets you’ll need to add:

  • Social Media Links – that appear in the utility navigation at the top of your site and are used for the social links section type.
  • Stay Updated Social Media Links – that appear in the footer

To add a service, click the Add Service button and use the Service drop down to select the social media platform you want to add a link for.  Then add text for the Link Text and the URL to your social media page.

To remove a service, hover over it until the – sign appears.  Click it to remove.

To edit a service, click in the field you want to edit.

In addition to social media, you’ll need to set a donate page for your site.  You can either link it to the built-in page included in this theme or to an outside donation form.

To edit an existing donate link, click the Pencil icon and use the link editor to change the link.

To remove an existing donate link, click the X.

To add a donate link, click the Select Link button and use the link editor to add the link.

Integrations/API Keys

If you plan on using any integrations from Facebook or Google Map (such as for the location maps on events), you’ll need to generate and enter that value into these fields.

For Facebook integration, instructions on generating that App ID are here.

For Google Maps integration, instructions on generating that  API key are here.

Global Styles

Global Styles is where you can control all sorts of design styles for your site, including:

  • Colors
  • Fonts
  • Button Styles
  • Form Styles

Colors

Use the Colors section to set the following colors to be used for each item.  Colors are set using the color picker:

  • Light Color
  • Dask Color
  • Primary Color
  • Secondary Color
  • Tertiary Color
  • Alternate Color
  • Alternate Color Light

Once you’ve set the color palette for your site, you can then assign those colors to each of the following items using the dropdown menus under each:

  • Link Color
  • Link Hover Color
  • Link Hover Underline Color
  • Heading Color
  • Heading Hover Color
  • Body Text Color
  • Button Text Color
  • Button Text Hover Color
  • Button Background Color
  • Button Background Hover Color

Fonts

You can set font families for 3 key elements on your site.

  • Heading
  • Body
  • Button

Use the dropdowns below each element to select the font family you want to use.

Buttons

In addition to color and font styling, you can set the Border Radius of buttons using the slider in this settings section.  The higher the border radius, the more rounded the buttons will become. See the examples below:button 0 radiusbutton 10 radiusbutton 25 radius

Forms

Similar to the button radius, you can set the Border Radius of the fields on forms using the slider in the settings section.  The higher the border radius, the more rounded the fields will below. See the examples below:field 0 radiusfield 10 radiusfield 25 radius

Header Options

The header options is how the banner at the top of your website is created.  Using the selector in the admin, you can customize the following elements:

header

Footer Options

The footer is made up of 3 areas, all which can be customized from this section of the settings:

footer

Footer Top

The Footer Top area is comprised of the Stay Updated section which links to social media and the Get Connected section where there is a sign-up form.  In this area you can:

Footer Donate

The Footer Donate area alows you to customize 2 things:

  • The icon that is displayed on the bar (using the Media Library)
  • Text displayed on the bar

The Footer Donate section will link to the donation page that you set up in the main Theme Options URLs for the Donate Link.

Footer Bottom

The Footer Bottom area is where you can set the following information:

  • Footer bottom text
  • Footer bottom address
  • Link to your Privacy Policy page
  • Link to your Contact Us page

footer bottom

Built-In Forms

This theme uses a plugin titled Gravity Forms to build the forms on your site. You can always use embed code from your own CRM, but this theme comes with several pre-built templates that can utilize many of the Gravity Forms add-ons.

The form templates include:

  1. Donation Template
  2. Volunteer Interest Template
  3. Sign Up Template
  4. Contact Us Template
  5. Email Signup (currently displayed on the hero image on the homepage templates)
  6. Get Connected (currently used in the footer)

Included below is documentation on key features of Gravity Forms, but they also offer great documentation for more advanced features here.

Editing an Existing Form

Form Fields

  1. In the left navigation bar, go to Forms
  2. Click on the title of the form you would like to edit
  3. To edit the fields, hover over the one you would like to click it to open the editing fields.
  4. To delete a field, hover over it and click the “x” in the right corner.
  5. To add new fields, select from the fields on the right, see image.
  6. Once you have clicked on the type of field you would like it will be added to the bottom of your form. You can then hover over it to edit or drag and drop it to another position within the form.
  7. Once you are happy with the fields in your form, click the Update Form button.

Form Settings

Hover over Form Setting on the top of your form.

  1. Form Settings: Configure the form’s submit button, restrictions on entries and title
  2. Confirmation: set the type of confirmation a user will receive upon successfully submitting your form.
  3. Notifications: Set who will be notified when a user fills this form out.

Viewing Form Entries

  1. In the left navigation bar click on Forms.
  2. Hover over the name of the form you would like to see entries from and click on Entries.

Creating New Forms

  1. In the left navigation bar click on Forms.
  2. Select Add New at the top.
  3. To add new fields, select from the fields on the right, see image.
  4. Once you have clicked on the type of field you would like it will be added to the bottom of your form. You can then hover over it to edit or drag and drop it to another position within the form.
  5. Once you are happy with the fields in your form, click the Update Form button.

Form Settings

Hover over Form Setting on the top of your form.

This section is where you will configure things like the form’s submit button, restrictions on entries and title.  Make sure to click the Update Form Settings when making any changes.  Settings includes:

    1. Form Title – Enter the title of your form.
    2. Form Description – Enter a description for your form. This may be used for user instructions.
    3. Label Placement – Select the default label placement. Labels can be top aligned above a field, left aligned to the left of a field, or right aligned to the right of a field. This is a global label placement setting
    4. Description Placement – Select the default description placement. Descriptions can be placed above the field inputs or below the field inputs. This setting can be overridden in the appearance settings for each field.
    5. Sub-label Placement – Select the default sub-label placement. Sub-labels can be placed above the field inputs or below the field inputs. This setting can be overridden in the appearance settings for each field.
    6. Input Type – A text button versus and image.
    7. Button Text – Enter the text you would like to appear on the form submit button.
    8. Button Conditional Logic – Create rules to dynamically display or hide the submit button based on values from another field.
    9. Limit Number of Entries – Enter a number in the input box below to limit the number of entries allowed for this form. The form will become inactive when that number is reached.
    10. Schedule Form – Schedule a time period the form is active.

Confirmation

This section is where you can set the type of confirmation a user will receive upon successfully submitting your form.  There are a few options on what type of confirmation you can set for a form:

  • Text  Enter the text you would like the user to see on the confirmation page of this form.
  • Page – Select the page you would like the user to be redirected to after they have submitted the form.
  • Redirect – Enter the URL of the web page you would like the user to be redirected to after they have submitted the form

Notifications

This section is where you can set who will be notified when a user fills this form out.  You’ll want to most likely create 2 types of notifications: Admin and User notifications.  To set up both types:

  1. To add a new notification, click the Add New button.
  2. First, pick a name for your notification. This is simply something to easily identify the notification. Any unique name will be fine.
  3. Next, you will see a setting labeled Send To. This allows you to determine how the message is sent. The options available are the following:
    1. Enter Email: This is simply a single email address that all notifications for this form will be sent to.  You’ll want to set this if you are configuring an Admin notification.  When you select this option, the Send to Email field will be available. Within this field, enter the email address that you want your form notifications to be sent to.
    2. Select a Field: This option will allow you to send the notifications based on the contents of an email address field in the form. You’ll want to set this if you are configuring an User notification.
    3. Configure Routing: This option will allow you to send the notification to different locations based on the options that the user selects in the form.
  4. Next, you will need to configure a few different fields related to the email being sent.
    1. The first of these is the From Name field. When a notification email is sent, this is the name that will be displayed as the sender.
    2. Next up is the From Email field. This is the email address that is displayed as the sender when receiving the notification.
    3. There is also the Reply To field in which the reply address may be set.
    4. The BCC field will allow you to set an email address in which the notification email will be copied to. This is useful if you have an individual that wants to receive all notification emails when sending to multiple people.
  5. The Subject and Message fields are the most important part of the notification. This is the content that lets you know the content of the form that was filled out. These default to a subject stating the form that was filled out, as well as the message containing the form content.
  6. Click the Update Notification button and your notifications are ready to go.

Adding Forms to Pages

  1. On the left navigation menu select Pages, either All Pages or Add New if this page does not exist yet.
  2. Place your cursor in the content box where you would like the form to begin
  3. Click the Add Form button.
  4. In the dialogue box that pops up select the form you would like to add. Forms can be added to multiple pages.
  5. When you are happy with how the page looks, click Update.

Default Content

The DemCampaignSites theme comes with lots of pre-built pages and default content.  These all use sections and can be customized to fit your site (instructions on using sections is available here).  If you plan to use a pre-built page, make sure to swap out any default content.  If you don’t want to use a pre-built page, make sure to delete it.

With the theme you get the following:

  • 3 homepage templates (see details here)
  • Bio landing page (called Meet Janice)
  • Issues landing page
  • 3 sample news posts
  • 3 sample event posts
  • Privacy Policy page for you to upload your own privacy policy
  • Contact Us page with the built-in contact form
    • Make sure to configure the email address in this form to send you submission from the form following these instructions here
  • Volunteer page with the volunteer form template already embedded
  • News & Media archive page (where any news articles you create will be displayed)
  • Donate page with the donate form template already embedded
  • Endorsements page
  • Voting information page with 2 widgets already embedded (A voting information tool and a voting registration tool – make sure to customize these for your own site)
  • 6 form templates (see details here)

Social Media Sharing & Search Engine Optimization

Default Properties

When sharing a page to social media, the social media service will pull the following information for display:

  • Title – by default, this will be the defined title of the page that appears in your browser.
  • Description – by default, the service will display the first paragraph-level language on the page.
  • Image
    • You can set a default sharing image for all of your WordPress pages/posts by logging into the WordPress admin interface and going to SEO > Facebook > Default settings and uploading an image
    • If you do not set a default here, the social service will display the first image that is displayed on the page, as long as it meets size requirements. Every service is different, but Facebook, for example, will only use a photo if it is larger than 200x200px. If the first image is too small, Facebook will display the next image.

Facebook, Twitter, and LinkedIn all use this information. Other services can vary in terms of what they will utilize and share.

Updating Social Sharing with Yoast SEO

If you don’t like what you see in the Object Debugger, it’s easy to change using the Yoast SEO plugin that we’ve installed on your site. You can define a new title, description, and/or image for the page, then tell Facebook to “refresh” to get this new information for sharing.

To change this information for a page, in the WordPress Administrator Interface, go to Pages > All Pages and Edit the page you wish to update. On the Edit page, scroll down to the Yoast SEO section and click the sharing icon.

Here, you can enter your own Title, Description, and Image that you want to use when the page is shared on social channels..

Refreshing Facebook Sharing

Facebook very kindly lets you request an update to the sharing information for any URL using the Object Debugger noted above.

To request a refresh, go the Object Debugger and enter the URL for the page you just updated. Click Fetch new scrape information.

Scroll down to the When shared, this is what will be included section to see your updated sharing information.

Refreshing Other Services

Unfortunately, other social media services don’t offer such an easy way to request an update to your social media info for a URL. Instead, they have a regular timeline on when they update social media sharing info.

Twitter

Twitter updates weekly. That said, if you copy and paste a link in your Twitter client of choice to preview it, it usually will refresh and update your sharing info.

LinkedIn

LinkedIn updates weekly, and unfortunately there is absolutely no way to force a refresh.

Configuring Metadata and Focus Keywords with Yoast SEO

Yoast’s blog is a great resource. It has a great post that gives a variety of examples for metadata and is straightforward about the challenges of focus keywords.

You don’t need to worry about doing this for all of your pages, but it’s a good idea for the ones you think will be popular. And a great idea for your bloggers to get into the habit!

Users

The Users area is where you would go to give permission for an individual to add content to your site – either on the backend or frontend through comments and discussions.

User Roles

Out of the box, WordPress comes with the follow user roles:

  • Administrator – somebody who has access to all the administration features within a single site.
  • Editor – somebody who can publish and manage posts including the posts of other users.
  • Author – somebody who can publish and manage their own posts.
  • Contributor – somebody who can write and manage their own posts but cannot publish them.
  • Subscriber – somebody who can only manage their profile and comment on the site.

Add User

  1. From the WordPress Administrator Interface, hover over Users and click on Add New User on the left navigation menu.
  2. Complete the form by creating a username, email address, first name, last name and password. Our security plugin requires a strong password, which can be generated at: http://strongpasswordgenerator.com/, if not given the ability to auto-generate one.

Remove User

  1. From the WordPress Administrator Interface, hover over Users and click on All Users on the left navigation menu.
  2. This page contains a list of all users in the system.
  3. Check the box next to the user that you wish to remove from the system.
  4. In the dropdown that is labeled Bulk Actions, select Delete and then click the button for Apply.

Plugins

The following plugins are installed on your site:

Plugin Notes
Advanced Custom Fields Pro For creating and configuring custom fields
Backup Buddy For regular backups of your site
Duplicate Post For cloning pages and posts
Google Anaylticator For displaying Google Analytics in WordPress admin interface
Gravity Forms For creating and configuring forms,
GF Authorize.Net Add-On For connecting your Authorize.Net account with GF as its payment processor
GF Constant Contact Add-On For connecting your Constant Contact account with GF for syncing information
GF MailChimp Add-On For connecting your MailChimp account with GF for syncing information
GF PayPal Add-On For connecting your PayPal account with GF as its payment processor
GF Stipe Add-On For connecting your Stripe account with GF as its payment processor
Media Deduper For finding and removing duplicate media
Produce For sections functionality
The Events Calendar For creating and sharing events
TinyMCE Advanced For more WYSIWYG editor options
WordFence For site security
WP Rocket For caching to speed up site load time
Yoast SEO For SEO and social sharing

Adding New Plugins

You may want to install other plugins on your site in the future to add functionality. There are a few places that you can look for plugins:

  • WordPress.org Plugins – WordPress’ official site, where you can filter by tags and popularity.
  • Tidy Repo – An independent site that tests and verifies plugins before recommendation.
  • Code Canyon – A site featuring more than 3,000 custom premium plugins, also filterable.

There are a few things you should look at when considering a new plugin:

  • Number of downloads. A plugin that has lots of downloads is generally going to be better than one that has very few.
  • Plugin ratings. Ratings aren’t everything, but overall good ratings are a positive sign.
  • Plugin reviews. Read through a few reviews of the plugin you’re investigating and see if there are certain complaints that come up again and again.
  • Last updated. The best plugins are regularly updated to keep up with WordPress updates and add new functionality. You should avoid any plugins that haven’t been updated in a long time.
  • Support. Some plugins offer support and others do not.

Updating Plugins

We strongly recommend that you keep all plugins up-to-date as outlined below. Plugins are often updated by their authors to keep them up-to-date with changes to WordPress, as well as to add new functionality.

One thing to keep in mind is that plugins are open source – meaning that anyone can create a plugin, and they are not able to be edited by you or Cornershop Creative. If a plugin isn’t working the way you planned, you may want to seek out an alternative.

WordPress and Plugin Updates

Since WordPress is an open-source tool that is forever changing, new releases of WordPress core and various plugins are often made available for you to improve the product.

One of the best ways to protect your website from exploits and hacking is simply to keep all your software up-to-date. But we know that WordPress backend maintenance can be a drag (not to mention a bit intimidating), so here’s some help.

Before performing any updates, we strongly recommend that you backup your site database using Backup Buddy.

To perform updates, follow these steps:

  1. Log in to the WordPress Administrator Interface.
  2. On the top black navigation bar, click on the update icon (i.e. two arrows going in a circle) followed by the number of updates that are available.
  3. This page details which updates are available.
  4. Check the box for the updates that you want to install (typically, you will select all) and then click the button to Update Plugins.
  5. This will update the plugin and bring you to a confirmation screen.
  6. If everything was updated successfully, then check the frontend functionality to ensure that nothing is displaying or functioning incorrectly.
  7. If you generate an error, please contact Cornershop or your hosting provider to help troubleshoot what went wrong.

Maintenance and Security

Security

We have enabled the WordFence Security Plugin to provide you with a secure and safe WordPress website. Out of the box, it provides recommendations and security features that makes your site more secure than the standard WordPress site or blog.

However, there are many features that you may want to configure yourself. To access the settings, from your navigation menu click on Security. This will take you to a dashboard with a summary of all features.

As part of this security plugin, you will receive two types of notifications:

  1. Site Lockout Notification – If you get this, it means that the plugin detected someone who was visiting a large number of 404 pages, which typically means that a robot is trying to find standard insecure pages within WordPress. We moved those pages, so instead these robots are generating 404 errors. If you look at the location by clicking on the link and it’s somewhere like China or Ukraine, then it’s most definitely a spammer being blocked out of your site.
  2. WordPress File Change Warning – This means that core files on the site have been changed. If Cornershop is working on the site or you recently updated a plugin, then you can simply ignore these. If no one has been working on the site, please forward it to Cornershop.
Feature Description/Notes
Users By default WordPress initially creates a username with the username of “admin.” This is insecure as this user has full rights to your WordPress system and a potential hacker already knows that it is there. All an attacker would need to do at that point is guess the password. Changing this username will force a potential attacker to have to guess both your username and your password which makes some attacks significantly more difficult. Cornershop has enabled this for you.
**Away As many of us update our sites on a general schedule it is not always necessary to permit site access all of the time. The options below will disable the backend of the site for the specified period. This could also be useful to disable site access based on a vacation or some other schedule where the site shouldn’t be accessible.
Ban Users This feature allows you to ban hosts and user agents from your site completely using individual or groups of IP addresses as well as user agents without having to manage any configuration of your server.
Content Directory By default WordPress puts all your content including images, plugins, themes, uploads, and more in a directory called “wp-content”. This makes it easy to scan for vulnerable files on your WordPress installation as an attacker already knows where the vulnerable files will be at. As there are many plugins and themes with security vulnerabilities moving this folder can make it harder for an attacker to find problems with your site as scans of your site’s file system will not produce any results. Cornershop has enabled this for you.
**Database Backup While this plugin goes a long way to helping secure your website nothing can give you a 100% guarantee that your site won’t be the victim of an attack. When something goes wrong one of the easiest ways of getting your site back is to restore the database from a backup and replace the files with fresh ones.
Database Prefix By default WordPress assigns the prefix “wp_” to all the tables in the database where your content, users, and objects live. For potential attackers this means it is easier to write scripts that can target WordPress databases as all the important table names for 95% or so of sites are already known. Changing this makes it more difficult for tools that are trying to take advantage of vulnerabilities in other places to affect the database of your site. Cornershop has enabled this for you.
Hide Backend The “hide backend” feature changes the URL from which you can access your WordPress backend thereby further obscuring your site to potential attackers. Cornershop has enabled this for you.
Intrusion Detection 404 detection looks at a user who is hitting a large number of non-existent pages; that is they are getting a large number of 404 errors. It assumes that a user who hits a lot of 404 errors in a short period of time is scanning for something (presumably a vulnerability) and locks them out accordingly. We have set a threshold of 50 errors in 3 minutes will lockout the user for 15 minutes. After 3 lockouts, the person will be blacklisted.
Login Limits There are people and robots that will keep trying username and password combinations to break into your site. Assuming that people usually remember their password after a few tries, we have set a login limit of 10 attempts in 5 minutes or else the person will be locked out for 15 minutes. After 3 lockouts, the person will be blacklisted.
Logs This will show you the number of 404 errors being generated on the site, as well as a list of any users currently locked out. If a real user sees a blank white screen with the word “error” on it, then visit this page and click the blue button to “Release Lockout.”

** We encourage you to configure these settings by visiting the plugin and following the steps as prompted in WordPress.

What to Do if Your Site Goes Down!

Unfortunately, sometimes websites go down, often for reasons that you have no control over.

Down for Everyone?

If you believe your site is down, first go to http://downforeveryoneorjustme.com/ and enter your site URL. If it reports that the site is down for just you, there’s likely an issue with your computer or Internet – try rebooting. If it’s down for everyone at your office, it may be an issue with your office’s Internet or network, and you may want to contact your IT department.

Contact Your Host

If http://downforeveryoneorjustme.com/ confirms that the site is down for everyone, it means that no one can access it. We find that 90% of site downtime is due to hosting issues. Your host is the company that is hosting your website, like Dreamhost or Bluehost. You should call them (not email or submit a ticket – those are lower priority) immediately to see if they are aware of any outages. They will work with you to get your site back up.