Okay
  Print

Getting Started: Gratify

This Article is for the Gratify Theme.

Are you're ready to get started with Gratify? We've created this easy to follow guide that will get you up and running in no time!

Need to skip to a particular section? Use the index links below.



Pre-Installation

If you currently have a Wordpress blog I recommend making a copy of all content. The new template will not affect your data, but it’s good to do this every time you install anything new.

To make a backup:

1) Login to your Wordpress dashboard.
2) Go to Tools→Export


3) Select All Content.
4) Click on Download Export File. A file will be downloaded to your computer.

back to top



Theme Install

To install the Gratify Theme you will need WordPress v4.0 or newer. Make sure to update your Wordpress to the latest version before you install the theme.

IMPORTANT: In the Gratify-Doc folder located the theme file called "gratify.zip". This is the file you will upload to Wordpress.

1) Go to Appearance→Themes.

2) Click Add New.

3) Click Upload Theme.

4) Click the Browse button and locate the gratify.zip file in the Gratify-Doc folder. Make sure you select the .zip file.

5) Next click Install Now. When prompted, activate the theme.

back to top



Logo/Header

1) Go to Appearance→Header or Appearance→Customize.

2) You can change the header title and tagline description simply by clicking the down arrow next to the Site Title & Tagline Section. Make sure "Display Header Text" checkbox is selected.

3) To display a logo, locate the Header Image Tab , click "add new image." Your header should be no larger than 1080px wide.

4) If you wish to hide the header text title, click the Site Title & Tagline tab, uncheck "Display Header Text".

5) Finally click Save Changes.

back to top



Header Social Icons

To add the Social Media Widget to your sidebar, follow the instructions below.

Go to Appearance→Widgets.

Locate the NMD Social Media Widget on the left side under Available Widgets. Drag this widget to the Top Social area on the right. You can expand the widget settings by clicking the arrow next to the widget.

In the social media widget settings, leave the title blank. Next, add the full URL to each of your social media sites. Make sure your link begins with http:// . The icon will only display if a full URL is added to each field. So if you don't want an icon to appear, such as Vimeo, leave the URL field blank.

Here's an example: http://www.facebook.com/nudgemediadesign if entered into the Facebook field would show the Facebook icon in the sidebar and link to our Facebook page.

For the Email Field, enter your full email address.

Once you've entered your URLs for the Social Media Widget, click Save.

back to top



Menus

1) Go to Appearance→Menus

2) There you will find these options: a. Use pages that already exist; b. Create your own link; c. Use your already existing categories and tags. You can add from any of the above and organize them as you wish.

3) To add a page to the menu structure click Add to Menu. You can change the order simply by dragging and dropping.

4) Before saving, please make sure Top primary menu is selected.

5) Click on Save Menu.

back to top



Featured Post Slider

The featured post slider is set to display under two conditions: 1) Featured Image is set in a post and 2) Post Category is set to "Featured".

To set up the featured post slider, you will need to create a "Featured" post category.

1) Go to Post→Categories.

2) Enter Featured in the name field.

3) Enter featured (all lowercase) in the slug field.

3) Click Add New Category .

Now that the "Featured" category has been created, you can now assign any post with the "Featured" category. Just remember to also set a featured image for your post.

Recommended image size for your featured image is 1080px by 650px. The post thumbnail and recent post thumbnail will automatically resize correctly using those dimensions.

back to top



Posts

You can begin adding blog posts by going to Posts→Add New.

>> Limit Number of Post Displayed

Go to Settings→Reading. Change the number located next to Blog pages show at most.

>> Add Continue Reading Button

While in a post, put your cursor where you want to end the excerpted content of your post and click the more quicktag button in the post toolbar.

>> Featured Images

To set a featured image for your post, go to Post→Add New→Set Featured Image.

Upload your image and click "Use as featured image".

Recommended image size for your featured image is 1080px by 480px. The post thumbnail and recent post thumbnail will automatically resize correctly using those dimensions.

Once uploaded, Wordpress will automatically resize the image to fit the thumbnail sizes throughout the theme such as the post thumbnail and "you might also like" section.

>> Post Signature

The post signature appears on single post only.

To change the default signature, go to Theme Options→Post.

Next locate the Post Signature field and enter your name. You may also disable the post signature by checking the Hide Post Signature checkbox.

back to top



Pages

To add a new page, go to Dashboard→Pages→Add New.

Enter a title for your page and type your page content in the text box below.

Under the Page Attributes section on the right hand side, click the down arrow next to Template and select either:

Default Template (content on the left and sidebar on the right)
About Page (full width layout with social buttons - see instructions below)
Full Width Page (no sidebar).

>> About Page Social Icons

Go to Appearance→Widgets.

Locate the NMD Social Media widget on the left side under available widgets. Drag this widget to the About Page Widget area on the right. You can expand the widget settings by clicking the arrow next to the widget.

In the social media widget settings, leave the title blank. Next, add the full URL to each of your social media sites. Make sure your link begins with http:// . The icon will only display if a full URL is added to each field. So if you don't want an icon to appear, such as Vimeo, leave the URL field blank.

Here's an example: if this URL, http://www.facebook.com/nudgemediadesign was entered into the Facebook field would show the Facebook icon in the sidebar and link to our Facebook page.

For the Email Field, type "mailto:youremailaddress", without the quotes.

3. Once you've entered your URLs for the Social Media widget, click Save.

back to top


Sidebar

To add widgets to your sidebar go to Appearance→Widgets. You can add any widget you'd like simply by dragging the widget on the left to the Content Sidebar on the right. Wordpress comes with many built in widgets or you can also find plugins to install as well. Go to Plugins→Add New and search for any plugin you'd like.

IMPORTANT: There are many great plugin developers out there, however there are some NOT so great plugins that could cause your theme to malfunction. Please use caution when installing.


1. NMD About Widget

In order to add your photo to the sidebar, you will first need to upload your photo to the Wordpress Media Library.

Go to Dashboard→Media→Add New.

Click Select Files and upload your sidebar image. Image width should be no larger than 250px. You can set the option of round or square image in the About widget setting (more on that later).

Once uploaded, select your uploaded image and a new window will pop up. Copy the URL on the right and paste into a Word document or somewhere easy to go back to.

Next, we will add the About Widget to your sidebar.

Go to Appearance→Widgets.

Locate the About Widget on the left side under Available Widgets. Drag this widget to the Content Sidebar area on the right. You can expand the widget settings by clicking the arrow next to the widget

Here are the available settings.

a. Title - this will display above your about photo.
b. About Text - you can add a short description here. This will display below your about photo.
c. About Image URL - this is where you will paste the URL to your image that you upload in the Media Library (see instructions above).
d. Rounded Image Effect - select this button if you'd like your image to be round. Default option is square or rectangle depending on the height of your image.
e. Read More URL - this is where you can add a link to an about page or post. Add the URL here.
f. Read More Text - type in the text for your link. Such as "read more", "about me", "continue reading", etc.

3. Once you've entered your settings for the About Widget, click Save.



2. NMD Social Icons

Next, we will add the Social Media Widget to your sidebar.

Go to Appearance→Widgets.

Locate the NMD Social Media Widget on the left side under Available Widgets. Drag this widget to the Content Sidebar area on the right. You can expand the widget settings by clicking the arrow next to the widget.

In the social media widget settings, you can add a title which will appear above the icons or leave this blank. Next, add the full URL to each of your social media sites. Make sure your link begins with http:// . The icon will only display if a full URL is added to each field. So if you don't want an icon to appear, such as Vimeo, leave the URL field blank.

Here's an example: http://www.facebook.com/nudgemediadesign if entered into the Facebook field would show the Facebook icon in the sidebar and link to our Facebook page.

For the Email Field, type "mailto:youremailaddress", without the quotes.

Once you've entered your URLs for the Social Media Widget, click Save.



3. NMD Recent Post

Go to Appearance→Widgets.

Locate the NMD Recent Post widget on the left side under Available Widgets.

Drag this widget to the Content Sidebar area on the right.
You can expand the widget settings by clicking the arrow next to the widget.



4. Instagram Widget

Go to http://www.snapwidget.com

Under Customize Your Widget, enter these settings:
1) Add your instagram username
2) Widget Type: Grid
3) Thumbnail Size: 78px
4) Layout 3x3
5) Photo Border: NO
6) Photo Padding: 5px

Click Get Widget. Copy the code and paste into a Word document or somewhere easy to go back to.

Next, we will add a Text Widget to your sidebar to paste the Instagram widget code.

Go to Appearance→Widgets.

Locate the Text Widget on the left side under Available Widgets. Drag this widget to the Content Sidebar area on the right. You can expand the widget settings by clicking the arrow next to the widget.

Enter a title which will appear above your Instagram Thumbnails or leave blank.

Paste the code that you copied from www.snapwidget.com into the text box. Click Save.

back to top



Footer Instagram Feed

Go to http://www.snapwidget.com

Under Customize Your Widget, enter these settings:
1) Add your instagram username
2) Widget Type: Grid
3) Thumbnail Size: 105px
4) Layout 10x1
5) Photo Border: NO

6) Photo Padding: 3px
7) Responsive: yes

Click Get Widget. Copy the code and paste into a Word document or somewhere easy to go back to.

Next, we will add a Text Widget to your footer to paste the Instagram widget code.

1. Go to Appearance→Widgets.
2. Locate the Text Widget on the left side under Available Widgets. Drag this widget to the Footer Tab area on the right. You can expand the widget settings by clicking the arrow next to the widget.
3. Enter a title which will appear above your Instagram Thumbnails or leave blank.
4. Paste the code that you copied from www.snapwidget.com into the text box.
5. Click Save.


back to top



Theme Options

To change the appearance of fonts and colors go to Appearance→Theme Options

General:

  • Upload a favicon
  • Change slider and animations speeds
  • Add your credits to the footer.
  • Insert analytics code.

Typography:

Here you can change the font size, style, type and color. Once changes are made, click save. Otherwise you can restore the theme's original settings by clicking "Restore Defaults".

Posts:

  • Enable/disable post featured images, post categories, post tags
  • Add post signature
  • Change font size, style, type and color.

Here you can change the font size, style, type and color. Once changes are made, click save. Otherwise you can restore the template's original settings by clicking "Restore Defaults".

back to top



Info

Dimensions - this theme is responsive and is designed to scale according to screen size, however use the sizes below as a guide for adding content.

  • Theme: max-width of 1080px
  • Post and Default Page: max-width of 775px
  • About and Full Width Pages: max-width of 1080px
  • Sidebar: max-width of 250px
  • Featured Post Slider: recommended 1080px by 480px

Fonts used:

back to top



Additional Support

Need help troubleshooting? Check out all of Vine & Lace FAQ Articles here: https://nudgemediadesign.ticksy.com/articles/9883/

back to top