ANGIE v1.1.1

WordPress Blog Theme

Current Version: 1.1.1
Latest Update: October/01/2019
Created: April/09/2019
By: Hedgehog Creative
Email: hedgehog.ask@gmail.com

Thank you for purchasing Angie - a wordpress blogging theme.

We are more than happy to provide support but before contacting us, please make sure you read this article on Themeforest to see what is included in the Item support.

Also make sure to go through the Documentation and see if you can find what you need, as we really tried to go in-depth with the help file regarding theme functionality. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here.

We hope you'll enjoy using our theme and once again thank you so much for purchasing.

Getting Started


  1. Theme Installation
  2. Plugins Installation
  3. Import Demo Content
  4. Child Theme
  5. Updating The Theme

Theme Installation

go to the top

After you complete the purchase of the theme go to your Themeforest Profile > Downloads and locate and download the Angie Theme. Once you download the zip file, unpack it and you will see the Documentation, Demo Content and License folder and the angie.zip file, which is the theme itself.

Method 1: Wordpress Theme Manager

To install the theme go to your Wordpress Dashboard > Appearance > Themes > Add New > Upload Theme. When prompted to upload a theme, only upload the angie.zip file. Once the upload is finished, Angie theme should appear under Appearance > Themes. Hit activate and let's continue.

DO NOT upload the whole folder you downloaded from Themeforest, as that will cause errors such as - stylesheet is missing

More detailed info on how to properly install a Wordpress Theme check out Themeforest Knowledgebase Article

image description
Method 2: FTP Upload

Another way to install a theme is to use your FTP client of choice navigate to your site and go to /wp-content/themes/ and upload a non-zipped angie.zip folder.

Plugin Installation

go to the top

When you activate the theme you will be prompted to install and activate the required plugins.

image description

You should install and activate the required plugins before continuing on with the theme usage, for it to function properly.

Angie comes bundled with the following plugins:

Required
  1. One Click Demo Import (Required)
  2. Angie Options (Required)
  3. Nifty Metaboxes (Required)

Additionally, the following plugins are recommended:

Recommended:
  1. Contact Form 7
  2. Zilla Likes
  3. Mailchimp for Wordpress Lite

Import Demo Content

go to the top

Angie theme comes with a prepared demo content for you to import.

NOTE: Before importing Demo content, make sure you've installed and activated all required plugins. Once done, go to Appearance > Import Demo Data. There you will have the option to import one of the pre-made demos as your starting point. You can further customize the theme through the WordPress Customizer.

NOTE: After you import this demo, you will have to setup the MailChimp Newsletter, Instagram Feed and Author Info settings separately.

NOTE: Bear in mind that any WordPress default pages, posts and widgets in the Default sidebar will remain with the demo ones added.

My Site doesn't look as the Live Preview Demo!!!

Demo content doesn't contain Author Information (Bio and social usernames) and Instagram feed info. Finally you will need to manually setup MailChimp Newsletter if you need it, see here how.

Child Theme

go to the top

If you plan on making customizations to the theme, you should consider using a Child theme to avoid the deletion of your code to the the main theme when updating.

To use a child theme upload the angie-child.zip along with the angie.zip file, and then instead of activating the main Angie theme, activate the Angie Child Theme, so now every modification you've done to the Child theme won't be deleted when updating.

More on Child Themes here

NOTE: Due to the customizing nature of the Child theme usage, support might not be provided for issues made by user error or incompatibility with the parent theme, each and every support contact should be regarding an unmodified parent Angie theme.

When done, let's go and customize this baby up :)

Updating The Theme

go to the top

You can update your theme by performing the following steps:

  1. Download the latest theme zip file from ThemeForest
  2. Extract it and locate angie.zip
  3. Extract angie.zip and locate the 'angie' folder
  4. Copy/Replace the contents of the 'angie' folder to the /wp-content/themes/angie folder of your web site.

Few Tips

go to the top

Optimizing Performance

While the theme is built trying to adhere to the WordPress best practices there are some thing you can do to further optimize the performance of your site.

Of course first and foremost a good hosting provider is essential for site performance. You should look for a dedicated WP hosting packages. Along with that you should consider using some sort of Caching solution.

To speed things up on our live preview we used the WP Super Cache plugin.

If you run into issues with our themes, make sure that you caching plugins (if any) are turned off, as there are too many possible caching solutions and we can't guarantee 100% compatibility with all of them.

Regenerate Thumbnails

If you're installing a theme with images already uploaded to your server, i.e. if you're not installing our theme on a fresh Wordpress installation - you might need to install and run this WP plugin - Regenerate Thumbnails to adjust image sizes so that they are properly displayed by Angie theme. You only need to run this plugin once, afterwards any new uploaded image will be prepared automatically.

Nice Permalinks

To display nice link on your site go to Settings > Permalinks. We recommend to set your permalinks setting to "Day and Name" or "Post Name". Once you change the settings press Save Changes.




Header Setup


  1. Menus
  2. Header Layout
  3. Logo
  4. Background Image
  5. Navigation Settings
  6. Header Social Networks
  7. Preload Screen

Angie has 2 menu locations:

  1. Main Menu
  2. Footer Nav
Main Menu

To set up a menu go to WP Dashboard > Appearance > Menus - click "create a new menu" and name it, let's say "Main Menu" as seen below.

image description

Next select the location for the menu by selecting the Main Menu.

Now populate the menu with links as you see fit. Note that that the Main Menu should work fine with up to 4 levels of dropdown menus.

image description


Quick tip: To add a Home page link to your menu follow these steps:

image description
Footer Nav

To create a Footer Menu follow the same steps as above, name the menu as you wish ("Footer Menu") and select the Footer Nav as the menu position.

image description

Note that the Footer Nav cannot have Submenus (Dropdowns) and it will show only top level links.

A more detailed look on how to use Menus can be found on the WP Codex Page


Adding a Home page Link

If you imported the content via the One Click Demo Import plugin you will notice that your Home menu link doesn't navigate to your Home page but to the Live Preview Page. To setup your own Home Link delete the existing one and follow the steps displayed in the image below.

image description

Header Layout

go to the top


Angie comes with 5 header layouts with 3 different widths: boxed, wide and full width. Additionally, you can set one of the 5 predefined bottom borders.

To edit Header Settings go to Customizer > Header & Logo Settings > Header Layout

Select Header Style Layout 1 and Layout 2 accept a background image that can be set in Customizer > Header & Logo Settings > Header Background
Header Border Style Add a bottom border to the Header. Available to Layout 1, Layout 2 and Layout 3.

Extra Bottom Border settings gives you extra padding bottom in case you use a darker color for the Header background to better separate the header from the body.
Header Width Set the Header width: boxed, boxed wide, full width

If you wish to use a text logo go to Customizing > Typography > Text Logo to edit the font.

To use an image logo:

  1. Go to Customizer > Header & Logo Settings > Logo
  2. Under Upload Logo click "Select Image" and upload your logo image.
  3. Next, to upload the Retina Version of your logo click "Select Image" under Upload Retina Logo
image description

Background Image

go to the top

If you're using Header Layouts 1 and 2 you can setup a background image for the header.

To set it up go to Customizer > Header & Logo Settings > Header Background

There you will find the following settings:

Upload Header Background Upload or select an existing image for the background. The image should be at least 1920px wide in order to fit the width of most screens
Background Image Horizontal Position Adjust the horizontal position of the background image. Center, Left or Right
Header BG Overlay Select the background image overlay color.
Disable Image Overlay Disables the overlay
Header Overlay Opacity Set the opacity of the chosen color under Opacity where 0 is transparent and 10 is fully visible.

Navigation Settings

go to the top
Main Menu Hover Style Set the Main Navigation hover style
Left and Right Margins for the Main Navigation Links Adjust the left and right margins for the Navigation Links
Hide Main Menu Search Button -

Header Social Networks

go to the top

image description

To setup your Social Network Links go to Customizer > General Settings > Social Networks. Once there, enter you usernames only and NOT the full url to your Social profiles. The only exceptions are the Google Plus where you need to copy and paste the entire URL to your Google+ profile page, RSS feed where you need to paste the entire url to your RSS feed and the Email Contact where you need to add your email address.

Next go to Customizer > Header & Logo Settings > Header Social Networks and check the networks you wish to display in the header.

Preload Screen

go to the top

Preload screen is the white screen with the animated image that appears before the page is fully loaded, and prevents the flash of unstyled content user may experience.

If you go to Customize > General Settings > Preload Screen you can enable / disable the Preload screen

Home Page Setup


  1. Setting up a Homepage
  2. Homepage Layout
  3. Homepage Posts
  4. Homepage Featured Post Slider
  5. Editor Picks
  6. Welcome Message
  7. Promo Boxes

Setting up a Homepage

go to the top

When it comes to Homepage, it can be the Blog List of your latest posts (as seen in the Live Preview) or a specific static page you created.

Homepage - Latest Posts
  1. Go to Dashboard > Settings > Reading
  2. To display latest posts on the Homepage select Front page displays : Your latest posts
image description
Homepage - Static Page
  1. Go to Dashboard > Settings > Reading
  2. Front page displays : Static Page
  3. Next select a page from the dropdown menu you wish to make a Front (Home) page
  4. Then select a page from the dropdown menu you wish to make a Posts (Blog) page

Homepage Layout

go to the top

There are 12 different Homepage Layouts to choose from:

  1. Standard Layout (Default)
  2. List Layout
  3. Grid 2 Columns Layout
  4. Masonry 2 Columns
  5. Masonry 3 Columns (no sidebar)
  6. Masonry 3 Columns Minimal (no sidebar - no post excerpt)
  7. Standard + Grid Layout 1-2-2-2 (first standard post, then grid posts)
  8. Standard + Grid Layout 1-2-1-2 (alternates between Standard and Grid posts, starting with Standard)
  9. Standard + List Layout 1-2-2-2 (first standard post, then list posts)
  10. Standard + List Layout 1-2-1-2 (alternates between Standard and List posts, starting with Standard)
  11. List + Grid Layout 1-2-1-2 (alternates between List and Grid posts, starting with List)
  12. Grid + List Layout 1-2-1-2 (alternates between Grid and List posts, starting with Grid)

To choose a layout go to Customizer > Home Page Settings > Blog Layout and select the desired layout. Next, you can select the Home page Sidebar Position (left, right or none). Additionally, you can select which Sidebar to assign to the Home Page from the dropdown menu under SELECT BLOG HOME SIDEBAR

Excerpt Type For the Standard Post, choose to show Excerpt or Full Content (cut off at the read more line)
Select Blog Home Layout Select the Home page layout
Select Sidebar Position Select the Sidebar Position for the Home Page
Select Blog Home Sidebar -

Homepage Posts

go to the top
Categories

You can select from which categories you wish to display posts on the Homepage.

To choose categories go to Customizer > Home Page Settings > Posts To Display and under BLOG HOME CATEGORIES select the desired categories. You can hold Ctrl + Click (Cmd + Click on Mac ) to select multiple categories.

Pagination

You can also, select your preferred pagination style by choosing between Older/Newer Posts or Numbered Pagination.


image description

Homepage Featured Post Slider

go to the top

To activate a Featured Post Slider make sure that all Posts you want to Feature have Featured thumbnail images and that the Featured option is selected for those Posts. Additionally you may choose to show posts from a certain Category (these don't need to be set as featured).

More on the Featured Slider over here


Editor Picks

go to the top


image description

For a Post to be shown you must check the Editor Picks meta box setting on the Edit Post page as seen here:

image description

To enter the Title and Description for the Editor's Picks section go to Customizer > Home Page Settings > Editor Picks

Show Editor Picks Show / Hide Editor Picks on the Homepage
Where to display Editor's Picks Show Editor's Picks before the Footer only on the homepage or on all pages.
Title for the Editor Picks Section Enter a title for the Editor Picks Section
Editor Picks Text Enter a title for the Editor Picks Section
Number of Editor Picked Posts to show Set the number of Editor Picks posts to be shown. If above 4 they will be shown in a carousel slider form.
Editor's Picks Post Container Style Set the the style of the Editor's Picks container.
Editor's Picks Post Theme Choosing between light and dark theme will change the font color accordingly.
Editor's Picks Post Section Title This color will be applied if the style chosen for the Editor's Picks posts container has a background. Otherwise it will use the site wide color for titles.
Editor's Picks Post Background Color -
Editor's Picks Post Accent Color -

Welcome Message

go to the top


image description

To edit the Welcome Message go to Customizer > Home Page Settings > Welcome Message.

Setting there are pretty self-explanatory. Once you edit them click Save.

Show Welcome Message Check to enable the Welcome Message on the Homepage
Welcome Background Rectangle Color Set the color of the background rectangle shape.
Welcome Message Title Enter the title for the Welcome Message section
Welcome Message Text Enter the text for the Welcome Message section
Welcome Message URL Text Enter the Text for the Welcome Message Call-To-Action button
Welcome Message Image Upload the Main Image for the Welcome Section. Make sure that the image is about 400px wide
Welcome Message Background Image Upload the Background Image for the Welcome Section. Make sure that the image is at least 1300px wide

Promo Boxes

go to the top


image description

To set up Promo Boxes go to Customizer > Home Page Settings > Promo Boxes. There you can either Disable them or select to show 3 or 4 boxes above the Home page blog roll (you can select to show them on every page of the blog roll). Additionally you can set the height of the Boxes in pixels (px).

Setting there are pretty self-explanatory. Once you edit them click Save.

To set up individual Boxes do:

  • Step 1: Enter The Title
  • Step 2: Enter the Box URL and make sure to put http:// before the url.
  • Step 3: Select or upload an image. The image height should correspond to the Box height you set and the width of thew image should be at least 760px
image description

Posts


  1. Posts Overview
  2. Post Customizer Settings
  3. Post Individual Options (Nifty Metaboxes)
  4. Post Author Information
  5. Post Likes (Zilla Likes)

Posts Overview

go to the top

The Heart and Soul of every Blog Theme are the Posts, so let's have a look with what we are working here.

Angie supports the following Post Formats:

  1. Standard (Default)
  2. Gallery
  3. Video - embed
  4. Audio - embed

When writing a Post you can select a Post Format here:

image description
Post Anatomy

image description
  1. Post Thumbnail / Featured Image
  2. Categories
  3. Post Title
  4. Post Meta (Author, Date, Read Time)
  5. Post Excerpt
  6. Read More Link
  7. Share Post
  8. Likes Count
  9. Sticky post Icon
  10. Post Decoration

Setting the Featured Image

Each Post Format supports Featured Image to be set. To do it go here:

NOTE: Make sure to upload a Featured Image for every Post and every Post Format including Video, Audio and Gallery Formats, because Featured Images are used for displaying Posts in Featured Sliders and Latest / Related Post carousels. If the Post doesn't have a Featured image it won't be displayed in Featured Post Sliders.

image description

NOTE: If you wish to use the Full Width Featured Slider make sure your Post Featured Thumbnails are at least 2000px wide to facilitate the slider width. If you don't use the Full Width Slider then your image need not be larger than 1140px in width, in order to save bandwidth.

Post Excerpt

To create an excerpt in the the Standard Blog List view, when creatimg the content click where you want to cut off and click the "Insert Read More Tag" button and a -----Read More----- line should appear. List, Masonry and Grid Posts use auto excerpt.


Post Customizer Settings

go to the top

From the WP Customizer you can make changes to Posts which have a global effect, meaning that those changes affect every Post on the Site. However, many of those settings can be Overridden on the Post by Post basis in the Post Edit page, under the Post Options (see below)

Ok, so let's take a look at the Customizer Post Settings:

Post General Settings
Single Post Title Position Place the Post Header before or after the Featured Image or you can Hide the Featured Image all together. Only for the Single Post pages.
Center Align Post Header By Default the Post Header is centrally aligned. Disable this align it to the left. This is not applicable to the List Post Layout.
Enable Post Sharing This will display the Share social icons in the post footer
Post Elements Hide or Show different parts of the Post
Next / Prev Post Hide The Post Navigation for the Next and Previous Post after the Post content

Post Styles
Post Decoration Choose to show the Dots under the Post Title and show the Post thumbnail decoration (masks). Additionally select the Post Deco style.
Colorful Wave Decoration Light Color Set the Light color for the Wave post decoration. Only for the Standard Post
Colorful Wave Decoration Dark Color Set the Dark color for the Wave post decoration. Only for the Standard Post
Post Category Style Set the look of the Post category meta. Choices: Text only, Bordered, Underline, Background Color
Post Category Color Set the color of the Post category meta.
Post Category Background Color Set the highlight / background color of the Post category meta.
Border Radius Set the border radius of the Post category meta Only for the Bordered and Background Color styles.
Post Author Section

Post Author Box Show the Post Author info after the Post Content.
Hide Author Social Show/Hide author social networks icons

Related Posts

Related posts are located under the Post Author Box. You can choose the number of Related Posts and whether to display or hide Related Posts on every Single Post Page through Customizer or on the Post by Post basis through Post Options (Post Metaboxes)

image description

To edit the colors and styles for the Related Posts section go to Customizer > Colors & Styles > Related Post Styles

Related Post Container Style Set the the style of the Related Posts container.
Related Post Section Title Set the color for the Section Title
Related Post Title Set the Color for the Related Post title
Related Post Meta Set the Color for the Related Post meta
Related Posts Section Background Color Set the color for the Section background.
Single Post Page Layout

To change the Single Post Page Layout go to Customizer > Page Settings > Page Layout Options
and under the first set of options you'll see Single Post Layout.

Here you can the assign Sidebars and change Sidebar Position for all Posts. To assign a Sidebar select one from the dropdown menu. Make sure you put some Widgets in the selected Sidebar by going to Appearance > Widgets in order for the Sidebar to appear.


image description

Post Individual Options (Nifty Metaboxes)

go to the top

When writing a Post, and providing that you installed and activated the Nifty Metaboxes plugin, you should see a Post Options Panel underneath the Post Text Editor. A snapshot:

image description

Post Options are divided in three parts. Featured Posts and Editor's Picks Options, Banner Ads Settings and Override Global Post Settings. Let's break it down.

Featured Post Options

image description

To display the Post in the Featured Post Slider check the Featured field.

Editor's Pick Post Options

image description

To display the Post in the Featured Post Slider check the Featured field.

Override Global Post Settings

image description

Here, by selecting Override Global Post Settings you can override some of the changes you've made in the WP Customizer under Post Settings.
Since the settings are pretty much the same, I won't be going over them again, so refer to the Customizer section to see what each of the settings do, although they are pretty self-explanatory.

In addition, here you can assign a different Sidebar (10 to choose from) to each of the Posts as well as the layout of the Single Post Page

Additionally, you can add Banners and Ads here, on a Post by Post basis. More on that here Banners and Ads

Post Author Information

go to the top

Post Author Information is used by the Angie theme in a couple of places. In the Post Author Info Box after the Post Content in the Single Post Page and in the Angie: Author Widget.

image description

Author Information can be entered by going to Dashboard > Users > All Users Select the User you want to edit (in this example it will be admin). There you will see a list of option. I will go through the ones needed for the Author Box and Author Widget to display properly.

image description
Display name publicly as This name will be displayed as the author name throughout the theme
E-mail (required) Your email address. The theme supports Gravatar images, and this email address will be associated with the Gravatar account if one available.
Author Profession Used in the Author Widget, under the author name
Social Networks Usernames Enter the Social Networks usernames for them to appear in the Author Info Box.

Post Likes (Zilla Likes)

go to the top

Theme comes with the support for ZillaLikes which is one of the recommended plugins prompted for installation.

To disable ZillaLikes from your Posts just deactivate the plugin by going to Plugins > Installed Plugins find ZillaLike and click on deactivate, or go to WP Customizer > Post Settings > Post General Settings - Post Elements and check Disable Likes in Post Footer

Post Formats


  1. Standard Post (Default)
  2. Gallery Post Format
  3. Video and Audio Post Format

Standard Post - Default

go to the top

First Post Format is the Standard (Default) Format and is pretty straightforward.

Gallery Post Format

go to the top


To create a Gallery Post follow these steps:

  1. Click on Gallery Format
  2. Then Pick Images
  3. Next select multiple images by holding Ctrl (Cmd on Mac) and clicking.
  4. Don't Forget to set the Featured Image as well, for other post views (in sliders)

image description

image description

image description

NOTE: If you're using the Gutenberg Post Editor, when creating a new Post and you select the Gallery Post Format from the dropdown menu, it will automatically add a Gallery Block to your Post Content. Delete that Gallery Block and use the Gallery Post Options provided by the theme for creating the Gallery Slideshow.

image description

Video and Audio Post Format

go to the top

Video and Audio Post Formats, selected by clicking the corresponding links, work in pretty much the same way as they use WordPress' oEmbed technology for displaying embedded video and audio. All you need to do is to see if WordPress natively supports the site hosting the file and place the url in to oEmbed field as seen below.

More on oEmbed and WordPress on Embeds WP Codex page


image description

image description

NOTE: Video and Audio Embeds will be displayed on the Blog Home page only if Standard, Standard + Grid Layouts are selected, otherwise Featured image will appear instead of a Video/Audio.

NOTE: If you're using the Gutenberg Post Editor, when creating a new Post and you select the Video or Audio Post Format from the dropdown menu, it will automatically add a Video / Audio Block to your Post Content. Delete that Video / Audio Block and use the Video / Audio Post Options provided by the theme.

image description
image description

NOTE: Make sure to upload a Featured Image for every Post and every Post Format including Video, Audio and Gallery Formats, because Featured Images are used for displaying Posts in Featured Sliders and Latest / Related Post carousels. If the Post doesn't have a Featured image it won't be displayed in Featured Post Sliders.

Pages


  1. Pages Overview
  2. Page Settings

Pages Overview

go to the top

  1. To create a Page go to Dashboard > Pages > Add New
  2. Enter the Page Title - which will appear at the top of the Page (you can give it another title in the Page Settings below). Page title will be displayed in the Main Menu should you put a link to it.
  3. Once you created a Page let's see what Page Settings are available in the Customizer and Page Metaboxes

Page Settings

go to the top

First off let's see the Global Page Settings which can be found in the WP Customizer > Page Settings

NOTE: Many of those settings can be Overridden on the Page by Page basis in the Page Edit screen, under the Page Settings

Page Title Options

These Settings affect every Page on the site, unless you Override them in the Edit Page screen.

Page Title Font Size As the name suggests - adjust the Font Size of the Page Title
Page Subtitle Color Change the color of the Page Subtitle
Hide Components Hide the Page title
Page Layout Options

Here you can set the layout for different pages on the site - the Sidebar Position and which Sidebar to display.

Single Post Layout Set the Layout of the Single Post pages and assign a Sidebar to be displayed.
Standard Page Layout Set the Layout of the Standard Pages you would create in Dashboard and assign a Sidebar to be displayed.
Archive Page Layout Set the Layout of the Archive Pages (Categories, Tags, Date, Author's Posts, etc) you would create in Dashboard and assign a Sidebar to be displayed.
Search Page Layout Set the Layout of the Search Page you would create in Dashboard and assign a Sidebar to be displayed.
404 Page Layout Set the Layout of the 404 Page you would create in Dashboard and assign a Sidebar to be displayed.
Edit Page Settings (Nifty Metaboxes)

On the Edit Page screen you will see the following options under Page Settings

Page Title Displayed at the top of the page. If left empty, page name will be used.
Page Subtitle Displayed as small text above the Page Title. If left empty, nothing will show.
Overriding Settings (Nifty Metaboxes)

Override Global Page Settings When selected all the setting below will come in to effect and override the Customizer Settings.
Hide Page Title This will hide the Page Title on this page.
Choose a Sidebar Select a sidebar to display on this page.
Select Sidebar Position Select the Layout of this Page

Off-Canvas Sidebar


Off-Canvas Settings

go to the top

To configure Off-Canvas Sidebar go to Customize > Off-Canvas Setting

Show Off-Canvas Logo Check to enable the Off-Canvas Logo (before the widgets)
Choose Logo to use or upload one below Check to use the main logo uploaded at the Customizer > Header & Logo Settings > Logo
Off-Canvas Sidebar Logo Upload a default size logo
Off-Canvas Sidebar Logo - Retina Upload a logo for retina devices

Featured Post Sliders


  1. Sliders Overview
  2. Slider Settings

Sliders Overview

go to the top

Featured Posts Sliders allow you to showcase Featured Posts or Latest Posts from selected categories on your Homepage or any other Standard page. There are 5 main styles of Featured Sliders to choose from.

Stylish Slider
image description
Classic Slider
image description
Transparent Slider
image description
MulitPost style 1 Slider
image description
MulitPost style 2 Slider
image description

To select a Featured Posts Slider to be displayed on the Homepage go to Customizer > Home Page Settings > Featured Slider.

NOTE: In order for a Post to be displayed in the Slider, you need to set a Featured Image for that post, otherwise the Post won't be shown regardless if it was selected as a Featured Post

Slider Settings

go to the top

To edit Slider Settings go to Customizer > Slider Settings

Homepage Slider Select the Slider style you want displayed.
Choices: Stylish Slider, Transparent Slider, Classic Slider, Multi Post 1 Slider, Multi Post 2 Slider
Stylish Slider Border Style Only for Stylish Slider. Choose the border style for the Stylish Slide Post Content.
Choices: Wave 1, Wave 2, Zig-Zag, Brush stroke, Tear, Sharp Edges,
Posts per Slide (Multi Post) Only for Multi Post Slider Set the number of posts to be shown at once. Choices: 2, 3, 4 Posts
Multi Post Slide Text Align Only for Multi Post SliderSet the title alignment for the Multi Post Slide. Choices: Align Left, Right, Center
Slider Width Set the slider width - Boxed, Wide, Full Width
Slider Display Display Slider on every Page of the Blog
Posts to Display Which Posts to show in slider - Featured Posts or Latest from Categories
Select Categories Select Categories to show Posts from. CTRL + Click (Cmd + Click on Mac) to select multiple categories or leave empty for "all categories"
Number of Posts Number of posts to be displayed in slider.
NOTE that this is the number of posts that will be pulled from the database, if some of those posts miss the featured image, they won't be displayed but they will be counted towards the total of posts pulled.
Transition Speed Sets the transition speed
Slider Autoplay Slides transition automatically upon page load
Pause Between Transitions Pause between slides if autoplay is on. In milliseconds (1000 ms = 1 s)
Hide Slide Elements Hide / Show different Elements in Post slides

Social Networks - Instagram Setup


  1. Social Networks Usernames
  2. Instagram Setup

Social Networks Usernames

go to the top

image description

To setup your Social Network Links go to Customizer > General Settings > Social Networks Usernames. Once there, enter you usernames only and NOT the full url to your Social profiles.The only exceptions are the Google Plus where you need to copy and paste the entire URL to your Google+ profile page and the RSS feed where you need to paste the entire url to your RSS feed.

image description

image description

Once you set up your Social Profile links you can use them in the Footer Social section (see here) and in the Angie: Social Widget (see here)

Instagram Setup

go to the top

image description

NOTE: Since Angie version 1.1, the Angie Options Instagram Feed is deprecated as we are unable to get the Permission from Instagram to use their API. As a result we are forced to use a third-party plugin to display the Feed.


Follow these steps to enable Instagram Feed on your site:

1. Install and activate the recommended Smash Balloon Instagram Feed (Smash Balloon Social Photo Feed) plugin

2. Go to Dashboard > Instagram Feed and under Configure click on "Connect an Instagram Account" and follow the steps.

image description

It will prompt you to login and then authorize the plugin

image description
image description

If successfully connected you should see your account name in green as seen here:

image description

Finally to enable it go to Customizer > Footer > Instagram Footer and click on

image description

If you get an Instagram Connection Error then go to this page to connect your account

Setting up the Feed to look like the original Angie design

Go to Dashboard > Instagram Feed > Customize

image description

Set the Padding around images to 0 or leave it empty

image description

Uncheck the "Show Feed Header", "Show Load More Button" and "Follow Button"

image description
image description
image description

Lastly go to Angie Options > Instagram Feed and enter your username and check "Show Theme's Default Follow Button"

image description
Legacy Instagram Setup - for Angie version older than 1.1

Follow these steps to setup your Instagram Feed.

First make sure that Angie Options plugin is installed and activated. Then go to Appearance > Instagram Settings and enter your Instagram user name (without the @ symbol)

Next you can setup the number of images to be displayed in the feed as well as the number of image columns per row. We recommend using 8 images by 8 columns for best viewing. It will always display the last uploaded images on your profile.

You can also cache the results so that you don't call the Instagram API every time your site is loaded. Choose how often to get new data from Instagram.

NOTE: Keep in mind that this is the maximum amount of hours that the old results will be stored, so it can happen to fetch new data earlier than selected.

image description

Once you're finished, check Enable Instagram feed. Follow us on Instagram link will use the username.

image description

Banners


  1. Banner Locations and Settings

Banner Locations

go to the top

The theme allows you to upload simple banners in several different locations which you can see in the example below:


image description

To add banners go to Dashboard > Angie Options > Banner (Ads) Settings. There you can choose to setup the Site Wide banners which will appear on every page, Post Banners which will appear on every Single Post page, and Page Banner which will appear on all Pages. After entering the fields make sure to press Save Changes before going to a different tab.

In the individual Post and Page edit screens you can add additional Banners which will override the global ones added in the Banner (Ads) Settings

Note that for the Banner to appear you must both enter a valid URL and select an image.

In Header Banner image size should be 768px in width max. Other Banners don't need to be more than 1270px wide.

Footer


  1. Footer Columns
  2. Footer Settings

Footer Columns

go to the top

image description

To setup the Footer, first we need to populate it with Widgets so head over to Appearance > Widgets. There you will see a list of available Widgets on the left side and on the right a list of available Widget Areas (Sidebars). There are 3 Footer widget areas:

  1. Footer 2 columns - which can hold up to 2 widgets per row
  2. Footer 3 columns - which can hold up to 3 widgets per row
  3. Footer 4 columns - which can hold up to 4 widgets per row

image description

When you fill the Footer Widget Area with Widgets it should look something like this:

image description

Now head over to the Customizer > Footer > Footer Columns > and select which area you wish to display. Note that if you select a Footer Widget Area and it has no Widgets in ti it won't appear on the page.

Footer Settings

go to the top

Other Footer Settings can be found in Customizer > Footer

Footer Columns Select the number of columns in the Footer. Make sure to populate the appropriate Footer Widget Areas in Appearance > Widgets
Footer Social Networks Select social networks to be displayed in the footer social section.You can hide the icons and just show the Network names. NOTE: If you haven't entered the username for the network you selected, it won't show up.
Footer Instagram Feed Enable Instagram Feed. Make sure to first configure the Instagram Settings by going to the Admin Dashboard > Settings > Instagram Settings.
Copyright Text Enter your own copyright text to be shown in the bottom left of the Footer.

Widget Areas


  1. Widget Areas - Sidebars
  2. About Widget
  3. Advertisement Widget
  4. Author Widget
  5. Post Slideshow Widget
  6. Post List Widget
  7. Social Widget
  8. Widget Styles

Widget Areas - Sidebars

go to the top

image description

Angie theme comes with 15 Predefined Widgetized Areas - 3 of which are used in the Footer and others on Pages as Sidebars.

  1. Default Sidebar
  2. Default Theme Sidebar - Automatically active if you import theme's demo data
  3. Off-Canvas Sidebar (Sidedrawer) - Hidden sidebar which is trigger when clicked on the bars icon
  4. Mailchimp Form Area - Widget area for displaying the MailChimp Newsletter form above the Footer
  5. Footer Columns 2
  6. Footer Columns 3
  7. Footer Columns 4
  8. Custom Sidebar 2 - 10

To use a Sidebar, you need to place some Widgets in it. Once you fill it with Widgets, you then must assign a Sidebar to a Page or a Post. On assigning Sidebar to Pages check here and on assigning to Posts check here

image description
Angie Widgets

Angie theme comes with 6 custom Widgets for you to use. In order to activate them make sure you install the Angie Options Plugin

List of Widgets:

image description
  1. About Widget
  2. Advertisement
  3. Author Widget
  4. Post Slideshow
  5. Post List
  6. Social Widget

About Widget

go to the top

image description
Title Enter Widget title here
About me text Enter a brief text about you or your company/agency/site
Logo Image From The Customizer By checking this option Logo image you uploaded through Customizer will be used in the Widget
Upload a Different Logo Image Add new or select an existing image for the widget logo for standard and retina displays.

image description

image description

Advertisement Widget

go to the top

image description
URL URL of your advert.
Image Image for the Ad to be clicked on

Author Widget

go to the top

Author Widget is a stylish way to present yourself along the Content on your site. To setup the Author Widget you need to have Users with Author roles on your site. What are Users and Roles check here

On how to setup Author User Profile read here.

image description
Title Enter Widget title here
Link Text Enter a link text as in "Read more" or "More about the author"
Select a Page to Link to Select a Page for the above Link to link to. By default it is set to List of Author's Posts but you can assign any page.
Author Widget Image Upload an Author Image. Image should have a width of at least 360px.
Author Retina Widget Image Upload Retina Author Image.

Post Slideshow Widget

go to the top

Post Slideshow Widget allows you to display Latest Posts in a Slideshow which you can add in the Footer or in the Sidebar. You can also display only one Latest Post by selecting Display only one Post.


image description
Title Enter Widget title here
Select Category Select a Category to show Latest posts from or choose to show posts from all categories.
Select Display Type Choose to show Single Latest Post or A Slideshow of Latest Posts
Number of Posts Set the number of posts to show in slider (same restrictions apply as for the Featured Sliders regarding Featured images)
Enable Autoplay

Post List Widget

go to the top

image description
Title Enter Widget title here
Select Category Select a Category to show Recent posts from or choose to show posts from all categories.
Number of Posts Set the number of posts to be displayed.

Social Networks Widget

go to the top

Display social links in the Sidebar or Footer. You can show the Social Profiles you entered in Customizer > General Settings > Social Networks or you can select specific networks to show up. Note that if you haven't entered a username (in Genereal Setting) the social icon will not appear.

image description
Title Enter Widget title here
Simple Message Short message to be shown above the Social Icons
Social Networks from the Customizer Show the Social Networks from the Customizer to which you added usernames to.
Select Social Networks Select Social Networks to be displayed. (Don't forget to add usernames in Customizer > General Settings > Social Networks)

Widget Styles

go to the top

image description

Angie theme comes with 3 Predefined Widget Styles for Widget Titles. You can additionally set the color and text alignment.

To switch between styles and to further customize Font Size and Style of the Widget Title go to WP Customizer > Colors & Styles > Widget Title

Contact Form and Newsletter (Mailchimp) Setup


  1. ContactFrom 7
  2. Newsletter Mailchimp Integration

Contact Form

go to the top

For the Contact Form Angie uses Contact Form 7 plugin, so make sure you install it when activating the theme.

Once you activate the Contact Form 7 plugin go to Contact > Add New Form.

image description

Give it a name and then copy the code below used in the Live Preview and paste it into the Contact Form field.

image description

<p>Your Name (required)<br />
    [text* your-name] </p>

<p>Your Email (required)<br />
    [email* your-email] </p>

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>This form collects your name and email so that we can correspond with you. Check out our policy for more information.
</p>

[checkbox* checkbox-618 "I consent to having this website collect my name and email."]

<p>[submit "Send Message"]</p>
		

Next click on Mail tab and in To field enter your email address. Go through other fields and fill them as you see fit. To see how to further customize Contact Form using CF 7 see their Documentation here

image description

When you fill all the fields hit save. Now copy the Shortcode you received and go to Pages > Add New Page to create a new page which will be our Contact Page. Once created, paste the shortcode you copied and paste in the Content Editor

image description
image description

Contact Form 7 has many other settings, but for starters we recommend that you begin with the Angie default form. As Contact Form 7 is a third party plugin, Support for contact form issues should be handled through this page: Contact Form 7. To see Contact Form 7 documentation visit this page

Newsletter - Mailchimp Integration

go to the top

Angie theme has support for the Mailchimp Newsletter Integration with the help of Mailchimp For Wordpress Lite plugin. Here are the necessary steps to create a Mailchimp subscribe form.

Ok, first and foremost you must have a Mailchimp account (well, obviously). Secondly you need to install and activate the Mailchimp For Wordpress Lite plugin, which you will be prompted to do when you activate the Angie theme. Once all that is taken care of proceed with the steps below.

1) To use the plugin, you need to obtain your Mailchimp API key. To do that go to Mailchimp for WP > Mailchimp and click on Get your API key here.

image description

2) Log in and if prompted with the We need some security information screen proceed by clicking I'll do this later

image description

3) On the next screen click on Create A Key and then copy it and return to the WP admin and to the Mailchimp for WP > Mailchimp

image description

4) Paste the API key in the API key field and press Save Changes. If all went well Status should say CONNECTED.

image description

5) Now to prepare the Newsletter form. Go to Mailchimp for WP > Forms. There are a couple of things we need to do here.

  1. First Load form Styles (CSS)? set to No
  2. Check the Subcriber Lists you wish the Form to link to.
  3. Next copy and paste this Form code in the Form Mark-up Field (The on used in the Live Preview).
    
    <div class="newsletter-content">
      <h3 class="newsletter-title">Never Miss A Thing!</h3>
      <p class="newsletter-message">Subscribe to our newsletter and stay updated to our offers and deals!</p>
    </div>
    <div class="newsletter-inputs-outer">
    	<input type="email" class="newsletter-field" name="EMAIL" placeholder="Your email address" required />
    	<input class="newsletter-button" type="submit" value="Subscribe" />
    </div>
    <div class="newsletter-agree">
        <label>
            <input name="AGREE_TO_TERMS" type="checkbox" value="1" required="">I have read and agree to the terms &amp; conditions
      </label>
    </div>
    		
  4. Press Save Changes.
image description

6) When done go to Appearance > Widgets. Now you have an option to display the Newsletter Sign Up Form in the Sidebar / Footer or in the special MailChimp Form Widgetized Area above the Footer. Drag and drop the Mailchimp Sign-up Form widget in the Sidebar you wish to use and enter the name for the Widget. Press Save.

image description
image description

7) Depending on where you placed the MailChimp Widget the final result should look like this.

image description
image description

8) Additionally, you can set Checkboxes in your Post Comment Form to subscribe to the Newsletter Lists. Example:

image description

To set it up follow these steps:

  1. Go to Mailchimp for WP > Integrations.
  2. Nest, go to Comment Form under Available integrations
  3. Click Yes for Enabled?
  4. Check the Subcriber Lists you wish the Form to link to.
  5. Load some Default CSS? set to No
  6. Press Save Changes

image description

Mailchimp For Wordpress Lite has many other settings, but for starters we recommend that you begin with the Angie default form. As Mailchimp For Wordpress Lite is a third party plugin, Support for Subscribe Form issues should be handled through this page: Mailchimp For WP Support. To see Mailchimp For WP documentation visit this page

NOTE: If you import demo content and don't see the Newsletter Forms go to Dashboard > Mailchimp for WP > Forms and press Save Changes as seen below.

image description

Typography and Styling


  1. Typography Options
  2. Custom Styling

Typography

go to the top

Note that some fonts are bigger than others so you'll want to change the font size to adjust to the differences in size, especially with the really large Font sizes in Sliders and Page Titles and the really small font sizes.

Typography Sections
Main Font Here you can set the Body Font, Primary - Headings Font and a Secondary - Quotes Font. You can later assign these fonts to different elements by goung to Typography > Nav, Widgets, Section Title
Body & H1 - H6 Font Sizes As the title suggests, here you can adjust the font size of the Body text and the Headings.
Logo Font Lets you assign a font to the textual Logo and set additional font properties.
Post Title Font Settings Adjust the font-size, font-weight, text-transform and the letter-spacing of the Post Title
Featured Post Title Font Setting Assign the Font Family and adjust the font-size, font-weight, text-transform and the letter-spacing of the Title for each of the available Featured Sliders
Nav, Widgets, Section Title Here you can adjust the font settings for:
  • Navigation (Main Menu) Font
  • Sidebar Widget Title
  • Footer Widget Title
  • Content Section Title
  • Related Posts Title
  • Page Title
  • Read More Link
  • Assign Font - Widget Post Slideshow and Post List Post Title
  • Assign Font - Post Meta
  • Assign Font - WooCommerce Buttons

NOTE: Even though you have the option to select Font families for many different elements, we recommend that you don't include more than 3 different Font Families as that can slow down the loading of your site.

The best way to get the desired look and feel is to play around with the Typography options and see which settings look best to you.

Custom Styling

go to the top
Colors

By going to Customizer > Colors & Styles you can change the colors and styles of different elements around the theme.

WooCommerce - Shop


  1. Installing WooCommerce
  2. Importing Demo Products

Installing WooCommerce

go to the top

IMPORTANT: DO NOT IMPORT WooCommerce dummy Products before you install and activate the WooCommerce Plugin. We recommend that you first import a theme demo, install and activate the plugins and then import the products

To start using WooCommerce, first you must install the WooCommerce Plugin from the WordPress plugin repository. In your Dashboard go to Plugins > Add New > Search for WooCommerce Plugin and Install and Activate it.

Once you activate the WooCommerce plugin, the Setup Wizard will run. You can either go through the wizard or skip it. To learn more on how to configure the wizard we recommend you see the instructions here WooCommerce Setup Wizard

NOTE: When running the Wizard make sure you don't install and activate the Storefront theme that is offered by the WooCommerce plugin.

image description

When you're done with the Wizard it should have created the necessary shop pages for you. To see go to your Dashboard > Pages and you should have the following pages that look like this:

image description

If you don't have the pages and their assigned roles then go to WooCommerce > Status > Tool > Create Pages as seen below:

image description

Import Demo Products

go to the top

To import dummy products go to Dashboard > Tools > Import and select the WooCommerce Products CSV - Run Importer

image description

Click on Choose File and navigate to the theme folder you downloaded and go to angie > inc > demo > products.csv. Select the products.csv

image description
image description

Continue. A Column Mapping screen appears. Scroll down and Run the Importer.

image description
image description

Once done go to Products.

image description

Customizer Settings

go to the top

Hide Components Hide "add to cart" button and/or the rating stars on the main shop page
Shop Page Layout Select the number of columns for the main shop page - 2, 3 or 4 columns
Number of products per page As the title suggest assigns the number of products per page. If left blank it will default to the number of posts per page.
Shop Page Layout Select the layout of the main shop page and assign a sidebar to be displayed.
Product Page Layout Select the layout of the Product page and assign a sidebar to be displayed.

To change the layouts of the Cart, Checkout and Account pages, go to Dashboard > Pages and choose the page you want to edit, then below check the "Override Customizer Settings" and pick and choose layouts and sidebars for the corresponding pages.

To learn how to use WooCommerce we recommend that you go to their site here - WooCommerce Docs

Theme Text and Translation

  1. Default Theme Text
  2. Translation

Default Theme Text

go to the top

If you wish to change the Default Theme strings (text) such as "Continue Reading" or "Next Post", "Older Posts" but don't want to translate the theme then you can do that by going to Appearance > Default Text Settings. Here you can change a variety of words and sentences which are usually hard coded into a theme.

If you still wish to translate the theme, then see the following section regarding translation.

Translation

go to the top

Angie theme is ready for translation. In the download package, you can find an example .po and .mo translation files, which you can use as a starting point. The theme also comes with the angie.POT file to create new translation .po files.

But before you start translating make sure you go to Customizer > General Settings > Enable Translation and click on Enable Translation. This will allow the translation of the Theme's default text via .PO and .MO files. If left unchecked the text you entered in the Default Text option will remain displayed.

image description

In order to create your own translation, you only need to download Poedit (or similar application) and follow this simple instructions.

In the theme folder, inside the languages folder, you will find a file called angie.pot. Open that file using Poedit. You will find a screen like this one:

image description

Just replace each string with your new translated one, and save the file using your language-country code. In case you do not know which is your code, search it here.

To change the language of your site go to Settings > General > Site Language. Note: In any case that the language that you need is not available in the above option, please refer to installing the language files manually.

For WorPress versions 3.9.2 and below follow the following steps to change the Site's language.

Open the file wp-config.php at the root of your WordPress website. Search for the PHP code: define ('WPLANG', ''); and replace it with define ('WPLANG', 'de_DE');

You will probably want to replace the German language code with your own one.

You can read more about translating Wordpress in this guide.

IMPORTANT: Once again, before you start translating make sure you go to Customizer > General Settings > Enable Translation and click on Enable Translation. This will allow the translation of the Theme's default text via .PO and .MO files. If left unchecked the text you entered in the Default Text option will remain displayed.

Changelog


Version 1.1.1 - 11.05.2020.
-- Bug Fix - Settings for hiding add to cart button and product ratings were not being applied
(files changed: woocommerce.php)

Version 1.1 - 22.09.2019.
-- Major Fix - Due to changes to the Instagram API, our custom Instagram Feed solution no longer works 100%. If you're having issues displaying your Instagram Feed we added support for a, highly regarded, third party plugin (Smash Balloon Social Photo Feed).
Either way we recommend to switch to using the aforementioned plugin to avoid any potentially arising issues. The support for our Instagram Feed solution will eventually be dropped entirely.
(files changed: footer.php, style.css; Angie Options plugin: instagram-settings.php)

Version 1.0.1 - 15.07.2019.
-- Removed the leftover debugging code
-- Fixed the demo import files (menus were not being created)

Version 1.0 - 20.06.2019.
-- Initial release