menu

Mammoth WordPress Documentation

Version: 2.1.0Date of Publication: March 4, 2014View Changelog for this theme
Buy this Theme on themeforestview a Demo of this themeSupport center

Introduction

Back To Top

Thank you!

We would like to take this opportunity to thank you for your purchase!

This instruction manual will give you the knowledge (with screen shots) to set up your theme with ease. However, should you have any questions concerning your purchase, please go to our Support Center and open a ticket.

You will need to create an account and verify your purchase as support is only offered for verified purchases. If you need help with purchase verification, please follow this link.

Feel free to explore the FAQ page to answer any general questions relating to this theme.

If this is an upgrade to this theme, you will need to pay close attention to the plugins section as the short codes are no longer included in the theme, but come as part of a plugin which means you will have to re-work all of your content that uses the short codes.

Also, the audio post formats have changed. You will need to familiarize yourself with that section as well.

We also have changed the word length on blog index page by using the ‘read more’ tag. If you need to learn about this, please follow this link.

Getting Started

Back To Top

Your theme has been developed using the latest version of WordPress (which at the time of this publication is 3.8.1). If you do not have the latest version – it’s highly recommended that you upgrade your site version to this to ensure the themes capabilities. To get the latest version, click here.

WordPress is extremely easy to get set up on your server – it comes with simple directions and you can be up and running within just a few short minutes. Once you have your WordPress set up and running, you can upload your theme and plugins and we will begin set up shortly.

Please ensure you download ‘All Files and Documentation!’ from Themeforest. Once downloaded, you’ll want to unzip the package.

To do this:

  1. Open your Themeforest download (the theme you just purchased) – you will need to unzip this first. Inside this folder you will see a number of other folders and files (mammoth-wp, mammoth-wp.zip, help file, photoshop files.zip and wordpress_content.xml).
  2. The file you will be uploading to your “/wp-content/themes/” directory is the mammoth-wp. This directory contains all your necessary files for your theme. Alternatively you can take the mammoth-wp.zip and navigate to Appearance / Themes. Click the tab at the top that says ‘Install Themes’ and follow the onscreen instructions to upload the mammoth-wp.zip.
  3. If this is a fresh install of WordPress, you will want to delete the sample data that WP installs on activation. There is 1 page, 1 post and several widgets you will need to delete/remove from the install.
  4. Plugins are no longer included in the download, but later on you will see what plugins we used with links to download and setup. You can upload these plugin directories via FTP or just navigate to Plugins / Add New. Click the link at the top to ‘Upload’ and upload the .zip version of the plugin. Follow the onscreen instructions from there to set up and activate your plugins.
  5. Navigate to ‘Appearance’ / ‘Themes’ and find the screen shot for Mammoth and click activate.
  6. Permalinks – You can set the permalinks to whatever you would like that makes sense to you. Please remember, leaving the permalinks as ‘default’ will not help boost your SEO.
  7. Media Settings – Navigate to ‘Settings’ / ‘Media’, make sure you set your ‘Thumbnail size’ to ‘Width 252 Height 183’. Also make sure the box to ‘Crop thumbnail to exact dimensions (normally thumbnails are proportional)’ is checked.
  8. We will be setting up the content and admin settings next.

Mammoth Admin

Back To Top

Mammoth Admin Panel comes with several areas that you will need to set up in order to finish your install. Everything is documented in the admin section, but below you will find each section in more detail of what it does for your site. To access the Admin Panel, click on ‘Appearance’ and ‘Theme Options’.

General Setup

Back To Top
General Setup Tab

Top Logo

Upload your top logo to appear in the head of all pages. Our live preview logo size is 178px x 45px (transparent png).

Favicon

This process works the same as above. Recommended size is 16px x 16px (transparent png).

Read More Button Text

Enter the text for all of your post links here (for example: “Read More” or “Continue Reading”).

Tracking Code

This is where you need to place your tracking code for your analytics (such as Google Analytics) and the theme will call this code at the end of every page for your reporting needs.

Custom CSS

This is an easy way for you to ‘override’ any CSS that is in the style.css file. If you don’t want an ‘underline’ on your links when someone hovers over it – simply navigate to this box and enter a:hover: text-decoration:none; etc depending on the class you want to change, (this was just an example).

Header Setup

Back To Top
Header Setup Tab

Header Background Image

Upload the image you have selected for your background image of your header.

Header Background Image Repeat

Choose how you want your header background image to repeat. Repeat means that the image will repeat horizontally and vertically (to fill the space allocated for this area). Repeat-x means that the image will ONLY repeat horizontally. Repeat-y means that the image will ONLY repeat vertically.

Header Background Color

Click in the box where you see the #f0f4f7 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Menu Item Color

Click in the box where you see the #575757 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Menu Item Hover & Active Color

Click in the box where you see the #da6456 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Body, Typography & Styles

Back To Top
Body, Typography & Styles Tab

Background Image For Body

Upload the image you have selected for your background image of your body.

Background Image for Body Repeat

Choose how you want your body background image to repeat. Repeat=this image will repeat horizontally and vertically (to fill the space allocated for this area). Repeat-x=this image will ONLY repeat horizontally. Repeat-y=this image will ONLY repeat vertically.

Background Color for body

You can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Background Image For Inner Page Intro Sections

This area is for the header on inner pages that shows the Page Title and (if set) the intro text for each page and will also be the background image for the slider on the homepage. Upload the image you have selected for your background image of your body. Upload your image via the Media Library, just before you click ‘save’ on the image upload, copy the URL so you can paste it here.

Background Image for Inner Page Repeat

Choose how you want your inner page / slider background image to repeat. Repeat=this image will repeat horizontally and vertically (to fill the space allocated for this area). Repeat-x=this image will ONLY repeat horizontally. Repeat- y=this image will ONLY repeat vertically.

Slider/Inner Page Title Bar Background Color

his area is for the page title/slider title background color. Click in the box where you see the #dc6456 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Slider/Inner Page Title Bar Font Color

This is for the font color for the above title. Click in the box where you see the #ffffff and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Slider Content Background Color

This is for the background color for the slider content (on the homepage). Click in the box where you see the #83b2bd and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Slider Content Font Color

This is for the font color for the above content (on the homepage). Click in the box where you see the #ffffff and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Background Color for Inner Page

This is for the background color for the page title and intro text on the inner pages. Click in the box where you see the #f0f4f7 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Inner Page Paragraph Text Color

This is for the font color for the page title and intro text on the inner pages. Click in the box where you see the #575757 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Background Color For Content on Links & Quotes

This is for the background color for the links and quotes post formats on the blog page (holds the content of the quote / the link text). You can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Background Color For Title on Links & Quotes

This is for the background color for the links and quotes post formats on the blog page (holds the title of the quote / link). You can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Border Color

This is the border color used throughout the theme, including hr’s. Click in the box where you see the #e1e1e1 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Paragraph Text Color

This is the font color used throughout the theme. Click in the box where you see the #888888 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Headings Text Color

This is the font color used throughout the theme for headings. Click in the box where you see the #474747 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Link Color

This is the font color used throughout the theme for all links (excludes the header areas, footer areas, and copyright area – just in the body). Click in the box where you see the #88bbc8 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Link Hover Color

This is the font color used throughout the theme for all link hovers (excludes the header areas, footer areas, and copyright area – just in the body). Click in the box where you see the #d2695b and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Button Background Color

This is the background color used throughout the theme for shortcode active button (also will be the hover for the reverse background color button) – (excludes the footer areas – just in the body). Click in the box where you see the #d2695b and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Button Hover Background Color

This is the background color used throughout the theme for shortcode reverse button (also will be the hover for the active background color button) – (excludes the footer areas – just in the body). Click in the box where you see the #88bbc8 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Button Link Text Font Color

This is the font color used throughout the theme for shortcode active button (also will be the font color for the active background color button) – (excludes the footer areas – just in the body). Click in the box where you see the #ffffff and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Portfolio Setup

Back To Top
Portfolio Setup Tab

Portfolio List Page Background Color

This is the background color used for the portfolio items. Click in the box where you see the #ffffff and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Homepage Setup

Back To Top
Homepage Setup Tab

Portfolio Loop Title

If you are using the homepage template Home-3PortfolioOnly OR Home-3Blog3Portfolio – you will see here on our live preview : http://mythemepreviews.com/mammoth-wp/ OR here: http://mythemepreviews.com/mammoth-wp/home-2/, you will see there is 1 column that contains a Title, Text and text that links somewhere – these next few areas are specifically for this first box. Enter some text to appear in the first column as your title before the portfolio loop which will display the latest 3 portfolio items (their featured image and their titles). Example: Recent Work.

Portfolio Loop Text Block

Enter some text that will appear directly below the above title. Example: This text is set easily in the theme options panel. You can highlight how awesome your work is.

Portfolio Loop Link Text

Enter some text that will appear as a link under the above text. Example: View Full Portfolio.

Portfolio Loop Text Link

Enter the URL that you want the above text link to point to. If you did not set the above Portfolio Loop Link Text, then no text link will appear.

Blog Loop Title

If you are using the homepage template Home-3BlogOnly OR Home-3Blog3Portfolio – you will see here on our live preview : http://mythemepreviews.com/mammoth-wp/ OR here: http://mythemepreviews.com/mammoth-wp/home-3/, you will see there is 1 column that contains a Title, Text and text that links somewhere – these next few areas are specifically for this first box. Enter some text to appear in the first column as your title before the blog loop which will display the latest 3 blog articles (their featured image, their titles, an excerpt and a link to the post). Example: Recent Articles.

Blog Loop Text Block

Enter some text that will appear directly below the above title. Example: This text is set easily in the theme options panel. You can highlight how awesome your blog is.

Blog Loop Link Text

Enter some text that will appear as a link under the above text. Example: Read All Articles.

Blog Loop Text Link

Enter the URL that you want the above text link to point to. If you did not set the above Blog Loop Link Text, then no text link will appear.

Footer Setup

Back To Top
Footer Setup Tab

Footer Background Image

Upload the image you have selected for your background image of your footer.

Footer Background Image Repeat

Choose how you want your footer background image to repeat. Repeat=this image will repeat horizontally and vertically (to fill the space allocated for this area). Repeat-x=this image will ONLY repeat horizontally. Repeat-y=this image will ONLY repeat vertically.

Footer Background Color

Click in the box where you see the #7fadb8 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Footer Paragraph Text

Click in the box where you see the #ffffff and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Footer Form Field Background Color

The next few settings here are only if you are going to use one of the four widget areas in the footer for a contact form / newsletter form. You will be able to set the background color for the input fields, as well as the font color, border color, border color on focus and background color for the input fields on focus. Click in the box where you see the #7fadb8 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Footer Form Field Background Focus Color

As mentioned above, this is the color that will show when the user clicks into the input field text/ textarea box. Click in the box where you see the #ffffff and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Footer Text Box Font Color

This is the paragraph text font color that will show inside the input fields. Click in the box where you see the #575757 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Footer Contact Form Border Color

This is the border color that will appear on all input fields in the footer area. Click in the box where you see the #ffffff and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Footer Contact Form Focus Border Color

This is the border color that will appear on all input fields when the user clicks in one of the input fields in the footer area. Click in the box where you see the #7fadb8 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Copyright Setup

Back To Top
Copyright Setup Tab

Copyright Information

Enter your copyright information here. HTML is acceptable. Example: 2012 Jonathan Atkinson | Hand Crafted In The U.S.A. | Privacy Policy.

Copyright Background Image

Upload the image you have selected for your background image of your copyright.

Copyright Background Image Repeat

Choose how you want your copyright background image to repeat. Repeat=this image will repeat horizontally and vertically (to fill the space allocated for this area). Repeat-x=this image will ONLY repeat horizontally. Repeat-y=this image will ONLY repeat vertically.

Copyright Background Color

Click in the box where you see the #dc6456 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Copyright Paragraph Text Color

Click in the box where you see the #ffffff and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Social Setup

Back To Top
Social Setup Tab

Social Hover Border Color

When a user hovers over your social icon, a border will appear around the icon box. Enter the color value here. Click in the box where you see the #ffffff and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Social Icon Background Color

Click in the box where you see the #9ec1c9 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Title Above Social Icons

Enter some text that will appear above your social icons. Example: MAKE CONTACT.
The rest of the page is for you to place your social icons and social links. We’ve used Socialico for the fonts, here is a link to their site. We’ve place some characters in these spaces for you so you can see just some of the icons that are available. You can have up to 10 icon links here in the footer.

Contact Form Styles

Back To Top
Contact Form Styles Tab

Form Field Background Color

This will set the background color of all form fields (search form, contact form and comment form) used in the body of the theme. Click in the box where you see the #f5f8fa and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Form Field Background Focus Color

This will set the background color of all form fields when selected that is (search form, contact form and comment form) used in the body of the theme. Click in the box where you see the #ffffff and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Contact Form Paragraph Text

This will set the font color of all text used in the form fields (search form, contact form and comment form). Click in the box where you see the #888888 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Contact Form Field Border Color

This will set the border color of all form fields (search form, contact form and comment form) used in the body of the theme. Click in the box where you see the #e1e1e1 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Contact Form Field Focus Border Color

This will set the border color of all form fields when selected that is (search form, contact form and comment form) used in the body of the theme. Click in the box where you see the #c9c9c9 and a color picker box will open, you can pick a color from here or if you know they color you want, you can type in ‘#COLORNUMBER’. You will see a box floating to the right of this text field – that is just a sample to show you what color you chose.

Plugins

Back To Top

As mentioned previously in the documentation, plugins are no longer provided as part of the download. Here is a list of the plugins we used in the live preview (should you wish to use them) as well as the links to those plugins.

Please note that plugins are created by many users, many for free, from all corners of the world, not all plugins play nicely together and it will be up to you to make sure the plugins you have activated are compatible with each other – this is not a limitation of the theme in any way – it’s just if the plugin author created the code cleanly and using WordPress guidelines.

  • Contact Form 7 – used to power the contact form on the contact page.
  • Creativ Shortcodes – used for all the short codes seen in the live preview.
  • Creativ Profiles – used for the staff functionality within the live preview.
  • Easy FancyBox – used for the lightbox for WordPress gallery images.
  • Single Post Template – used for the single blog pages to provide the ability to select a page template per post.

Page Templates

Back To Top
pagetemplates

This theme comes equipped with several special page templates.

HOME-2BLOG1WIDGET

From the drop down, choose Home-2Blog1Widget – this template has the Slider, Home Welcome, Home One Widget, Home Two Widget, Home Three Widget, a 2-post blog loop and uses the Home Side Wiget area. All content on this template is pulled dynamically.

HOME-3BLOGONLY

From the drop down, choose Home-3BlogOnly – this template has the Slider, Home Welcome, Home One Widget, Home Two Widget, Home Three Widget and uses a 4 column spread – the 1st column is whatever you entered in the Homepage Section of the theme options and the next 3 are the latest 3 blog articles. All content on this template is pulled dynamically.

HOME-3PORTFOLIOONLY

From the drop down, choose Home-3PortfolioOnly – this template has the Slider, Home Welcome, Home One Widget, Home Two Widget, Home Three Widget and uses a 4 column spread – the 1st column is whatever you entered in the Homepage Section of the theme options and the next 3 are the latest 3 portfolio items. All content on this template is pulled dynamically.

HOME-3BLOG3PORTFOLIO

From the drop down, choose Home-3Blog3Portfolio – this template has the Slider, Home Welcome, Home One Widget, Home Two Widget, Home Three Widget and uses 2 rows of a 4 column spread – the 1st column is whatever you entered in the Homepage Section of the theme options and the next 3 combine the latest blog and latest portfolio as mentioned above. All content on this template is pulled dynamically.

HOME-SLIDERONLY

From the drop down, choose Home-SliderOnly – this template has the Slider, Home Welcome, Home One Widget, Home Two Widget, Home Three Widget and whatever content you placed in the content area of your page.

DEFAULT

This is a right sidebar page.

CONTACT

This is a template that will dynamically pull in your Contact Widget area and your content from the contact page.

FULL-WIDTH, RIGHT-SIDEBAR and LEFT-SIDEBAR

These page templates are exactly what they state, a full width page, a right sidebar page (pulls in your widget areas from the ‘Page’ widget section) and a left sidebar page (pulls in the same widget areas mentioned above).

FULL-WIDTHFEATIMG, RIGHT-SIDEBARFEATIMG and LEFT- SIDEBARFEATIMG

These page templates are exactly what they state, a full width page, a right sidebar page (pulls in your widget areas from the ‘Page’ widget section) and a left sidebar page (pulls in the same widget areas mentioned above). The only difference between these page templates and the ones mentioned above is that these page templates use the featured image.

SITEMAP

This is a special template that will list your pages, posts etc. This template also uses the right sidebar page (pulls in your widget areas from the ‘Page’ widget section).

PORTFOLIO

This is a full width page that will dynamically pull in all of your portfolio items into this page template.

CR3ATIVSTAFF

This comes with the Profiles Plugin from our Cr3ativ site and will be used to power the staff index page.

Widgets

Back To Top

Mammoth comes equipped with several widget areas. Widget areas are simply a place for you to put whatever content you want and you have the option of choosing one of WordPress standard widgets such as ‘Categories’ or ‘Pages’, or even use a text widget to place any text or html that you would like. This theme will allow you to use your shortcodes in the widget areas should you choose the ‘Text Widget’.

Next you will see screen shots and code snippets (if needed) to see how we set up our widget areas. First, to get to Widgets, click on ‘Appearance’ and then click ‘Widgets’.

widgetsarea

Home Widgets

Back To Top

There are 5 widget areas for the different homepages. Each homepage brings in the ‘Home Welcome’, ‘Home One’, ‘Home Two’ and ‘Home Three’. Only Home-2Blog1Widget brings in the ‘Home Side’ widget area.

Below is a screen shot of each widget area, with the code we used. Please keep in mind, just because we many only show 1 widget, does not mean you can’t have multiple widgets in 1 section. You can always experiment and come up with your own winning combination.

homewelcome

Home Welcome

Using a text widget, we’ve placed some HTML here.

<div style="text-align:center;"><p>This is a widget area, so you can set a message and drop in a shortcode button, an image, HTML or pretty much anything else you wish. If you don't set anything here it completely disappears as a section. Nice.</p>
<div class="button"><a href="#">Great call to action button</a></div></div>


homeone

Home One

Using a text widget, we’ve placed some HTML here.

<div class="featimg"><a href="#"><img src="http://mythemepreviews.com/mammoth-wp/wp-content/uploads/2014/02/front_image1.jpg" /></div>
<div class="portfolio_content_wrapper">
<h4><a href="#">Who We Are</a></h4>
<p>This is a widget area where you can put anything, even HTML like we did here with an image, a box around it, some text and a link that can go anywhere - it could as easily of been a service icon and details, or hosting package.</p>
<div class="read_more_block"><a href="#">Read More</a></div>
</div>


hometwo

Home Two

Using a text widget, we’ve placed some HTML here.

<div class="featimg"><a href="#"><img src="http://mythemepreviews.com/mammoth-wp/wp-content/uploads/2014/02/front_image2.jpg" /></div>
<div class="portfolio_content_wrapper">
<h4><a href="#">What We Do</a></h4>
<p>This is a widget area where you can put anything, even HTML like we did here with an image, a box around it, some text and a link that can go anywhere - it could as easily of been a service icon and details, or hosting package.</p>
<div class="read_more_block"><a href="#">Read More</a></div>
</div>


homethree

Home Three

Using a text widget, we’ve placed some HTML here.

<div class="featimg"><a href="#"><img src="http://mythemepreviews.com/mammoth-wp/wp-content/uploads/2014/02/front_image3.jpg" /></div>
<div class="portfolio_content_wrapper">
<h4><a href="#">Where We Do It</a></h4>
<p>This is a widget area where you can put anything, even HTML like we did here with an image, a box around it, some text and a link that can go anywhere - it could as easily of been a service icon and details, or hosting package.</p>
<div class="read_more_block"><a href="#">Read More</a></div>
</div>


homeside

Home Side

We are using a widget area that come with the Cr3ativ Profiles Plugin, the ‘Staff Loop’ widget, you can see we are showing 2 and including the thumbnail

Page Widgets

Back To Top

pagewidgets

The page widget section has several widgets. The search, categories and calendar are just some of the default widgets from within WordPress. We are using a text widget for 1 section that just has some dummy text there wrapped in ‘p’ tags.

Take a look below as we break down each widget.


search

Using a default WordPress widget, we use the ‘Search’.


categories

Using a default WordPress widget, we use the ‘Categories’.


textwidget

Using a text widget, we’ve placed some HTML here.

<p>Vivamus auctor leo vel dui. Aliquam erat volutpat. Phasellus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras tempor. Morbi egestas, urna non consequat tempus, nunc arcu mollis enim, eu aliquam erat nulla non nibh. </p>

<p>Duis consectetuer <a href="#">malesuada velit</a>. Nam ante nulla, interdum vel, tristique ac, condimentum non, tellus. Proin ornare feugiat nisl. Suspendisse dolor nisl, ultrices at, eleifend vel, consequat at, dolor.</p>


calendar

Using a default WordPress widget, we use the ‘Calendar’.

Blog Widgets

Back To Top

blogwidget

The blog widget section also has several widgets. The search, recent posts, tag cloud, recent comments, and the calendar are just some of the default widgets from within WordPress. We are using a text widget for 1 section that just has some dummy text there wrapped in ‘p’ tags and again we are using the staff loop widget here as well.

Take a look below as we break down each widget.

staffloop

Using the widget that came with the Cr3ativ Staff Plugin, we are showing 3 staff members.

search

Using a default WordPress widget, we use the ‘Search’.

recentposts

Using a default WordPress widget, we use the ‘Recent Posts’.

tagcloud

Using a default WordPress widget, we use the ‘Tag Cloud’.

recentcomments

Using a default WordPress widget, we use the ‘Recent Comments’.

calendar

Using a default WordPress widget, we use the ‘Calendar’.

textwidget

Using a text widget, we’ve placed some HTML here.

<p>Vivamus auctor leo vel dui. Aliquam erat volutpat. Phasellus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras tempor. Morbi egestas, urna non consequat tempus, nunc arcu mollis enim, eu aliquam erat nulla non nibh. </p>

<p>Duis consectetuer <a href="#">malesuada velit</a>. Nam ante nulla, interdum vel, tristique ac, condimentum non, tellus. Proin ornare feugiat nisl. Suspendisse dolor nisl, ultrices at, eleifend vel, consequat at, dolor.</p>

Footer Widgets

Back To Top

footerone

Footer One

Using a text widget, we’ve placed some HTML here.

<br /><br /><br /><br /><img src="http://mythemepreviews.com/mammoth-wp/wp-content/uploads/2014/02/mammoth_logo2.png">
<br /><br />
<p>Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. <a href="#">Cras vehicula varius turpis</a>.</p>

footertwo

Footer Two

Using a default WordPress widget, we use the ‘Recent Posts’.

footerthree

Footer Three

Using a default WordPress widget, we use the ‘Recent Comments’.

footerfour

Footer Four

For this section, we use a text widget to show some text before the default ‘search’ widget.

<p>Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis.</p>

Contact Page Widgets

Back To Top

contactwidgets

We are using 2 widget in this section, take a look below as we break down each widget.

contacttext

Using a text widget, we’ve placed some HTML here.

<p>Mammoth, 123 Main Street, City, State 12345</p>
<p><strong>Tel:</strong> 1.800.123.4567</p>
<p><strong>Email:</strong> <a href="mailto:us@here.com">us@here.com</a></p>

contactcalendar

Using a default WordPress widget, we use the ‘Calendar’.

404 Page Widgets

Back To Top

404widgets

We are also using 2 widgets for the 404 Page as well, below is a break down.


404text

Using a text widget, we’ve placed some HTML here.

<p class="intro">This whole page content is a widget, meaning you can easily use a text widget for a message, add a search box or even recent posts or anything else</p>

<p>No worries you probably mistyped something, looked for something that does not exist anymore or just downright broke stuffs - just carry on with the menu at the top!</p>
<hr />

404search

Using a default WordPress widget, we use the ‘Search’.

Content Import & Setup

Back To Top

Open up your ‘Mammoth-WP-Package’, inside there you will see an XML file. This is the exported content, pages, images etc from the live preview site. The ONLY thing the XML import will not do is set up your admin and widget areas (which we’ve already covered above).

In the WordPress admin area, click ‘Tools’ > ‘Import’ > ‘WordPress’. WordPress may ask you to install this before allowing you to upload your file, just follow the on screen instructions. Once this is installed, click ‘browse’ and select the ‘wordpress_content.xml’ > ‘open’. From here you just need to select the ‘Upload file and import’.

From the drop down on ‘-Select-’, choose ‘admin’ and then make sure you click the box next to ‘Download and import file attachments’. And that’s it – your site should start looking very similar to the live preview. If you do not choose ‘admin’ or the user you set up with ‘admin’ rights, you will not receive any images on the import.

If you get any error messages like ‘Could not import….post type does not exist’, it could be because you haven’t got the theme activated or the plugin ‘Contact Form 7′ or ‘Cr3ativ Staff Plugin’ activated.

Back To Top

menus

Mammoth supports 2 menus. Navigate to ‘Appearance/Menus’ to create your menu. Click the ‘+’ to create a new menu. Name the menu ‘Primary’ and drag and drop the pages that you wish to have in your menu. When finished, click ‘Save Menu’ and then make sure from the ‘Theme Locations’ (located in the top left) that you choose ‘Primary’ from the drop down for the ‘Primary Navigation‘.

menusmanagelocation

It is important that you name your menu ‘Primary’ for the responsive menu to work properly.

To get the categories (‘Types’) from your Portfolios to show in your menus, click the ‘Screen Options’ from above and select ‘Types’, then you can drag and drop your items to your menu.

menuscreenoptions

To do a custom link, click the ‘Links’ section of the menu, enter the URL and the name you want to appear, then ‘Add to menu’ and place that item (by dragging/dropping) where you want it to appear

custommenulink2

To get the drop down appearance in your menu, you just need to slightly drag the item under the other so it appears ‘indented’ from the menu.

Special Page & Post Intro

Back To Top

Mammoth has an area on every page and post for you to place some intro text. The only exception to this is that the Blog Index page, any Categories page (including ‘types’), the Search Results page and the 404 page are dynamically created pages by WordPress and therefore will not have the intro text under the page title. Keep in mind, the more text you place in the intro section, the more will appear on your page/post. You can leave these intro sections blank to only display the page/post title.

See the examples below:

introexample

introexample2

WordPress Post Format

Back To Top

Mammoth utilizes the WordPress standard Post Format Types of ‘standard’, ‘status’, ‘audio’, ‘link’, ‘gallery’, ‘video’ and ‘quote’. When you create your posts you just define the ‘format’ and the theme will style the heading of each post based on that format.

Each blog post utilizes the ‘read more’ tag in WordPress. So the content on the blog index page is controlled by you and wherever you put the ‘more’ tag.

Audio Post Format

Back To Top

To get the audio player to appear, you must upload your mp3 files to this post (so that they become attached). The code will look for these attached audio files and display them in a fully styled media player for you.

The audio code is provided courtesy of Mr Chris A Kelley – click here to view his portfolio.

audiopost

Video Post Format

Back To Top

If you are using the Creativ Shortcodes plugin, just click the cr3ativshortcode and select ‘Video’, from the drop down you can choose Youtube or Vimeo and then enter your link. The video will appear wherever you have placed this code (either before or after the more tag) and because you used the short code will automatically resize correctly based on the screen size.

videopost

Gallery Post Format

Back To Top

For the main blog page, the theme will use the featured image.

gallerypost

For the gallery blog single pages, the theme will look to see if you have more than 1 image attached to this post. If there is, the theme will display all attached images in a slider. If not, the theme will just display the featured image again.

Quote Post Format

Back To Top

For quote post format, it will display all of the content from this post. The post title will be the link to that post that will appear under the content.

quotepost

Link Post Format

Back To Top

For link post format, it will display all of the content from this post. The link that appears below is the actual first ‘link’ the code comes to inside the post content.

linkpost

Status Post Format

Back To Top

A short status update. Similar to a Twitter status update. We will call the entire ‘content’ of these types of posts into the page

For this post, we just inserted a twitter embed (status)

https://twitter.com/twsjonathan/status/231160043402309632

statuspost

Standard Post Format

Back To Top

For standard post format, this works just like a regular post, you can set a featured image or not, it’s totally up to you!

standardpost

Portfolio: A Custom Post Type

Back To Top

Portfolio is a custom post type that we integrated into this theme for the ability to showcase your work / play portfolio. We’ve given you the ability to add a ‘Type’ (a category) to sort these items to display as their own menu item.

Just type your text, give a title, assign a ‘Type’ (category) and set a featured image, the theme will do the rest.

The portfolio template (index page) will show the featured image, the title, the excerpt (first 55 words) and then displays the read more link to the portfolio post.

portfolioindex

Sliders: A Custom Post Type

Back To Top

Like Portfolio, Sliders is a custom post type created specifically for this theme. We decided to do the sliders a little different this time.

The slider custom post type, works just like a blog. Add New, Set Featured Image, Set Title, Set Content, Publish and your all set. you can change the ordering of the slides by editing the publish date.

We pull in the featured image, the title and the content.

slideritem

Setting Your Front Page in WordPress

Back To Top

Navigate to ‘Settings’ and then ‘Reading’ and set the front pages as Static and choose “Home” for the “Front Page” and “Blog” for the “Post Pages” as in the image below.

frontpage

We tell WordPress to ‘discourage search engines’, obviously you wouldn’t want to do that, but since this is just a demo site, we have this clicked.