menu

Gutenberg 2.0 WordPress Documentation

Version:1.0.1Date of Publication: December 12, 2015View Changelog for this theme
Buy this Theme view 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, each marketplace will have a specific area for you to post a message to us. Please review your chosen marketplace’s guidelines for receiving support.

Getting Started

Back To Top
Your theme has been developed using the latest version of WordPress (which at the time of this publication is 4.4). If you do not have the latest version – it’s highly recommended that you upgrade your site version to this to ensure the theme’s 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.

To do this:

  1. In the download you just received, there are several files. Each have been named accordingly. The main files we will be working with are the gutenberg2-wp.zip, gutenberg2-wp-child.zip, gutenberg2-demo-data.xml, documentation.html.
  2. The file you will be uploading to your “/wp-content/themes/” directory is the gutenberg2-wp. This directory contains all your necessary files for your theme. Alternatively you can take the gutenberg2-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 gutenberg2-wp.zip.
  3. If you are wanting to make changes that deviate from the original files, you would want to upload the child theme package instead of the gutenberg2-wp package. If you want to learn more about WordPress child themes, follow this link.
  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. It’s now time to start putting the pieces together. If this is a fresh install of WordPress, you can login and delete the ‘Sample Page’ and the ‘Hello World’ post as well as remove all the default widgets that WordPress sets up for you on activation. To delete the page, navigate to ‘Pages’ from the WordPress admin. To delete the post, navigate to ‘Posts’ from the WordPress admin and finally to remove the widgets, navigate to ‘Appearance’ / ‘Widgets’ and click the arrow on each widget and select delete.
  6. Navigate to ‘Appearance’ / ‘Themes’ and find the screen shot for Gutenberg 2 and click activate.
  7. Permalinks – Navigate to ‘Settings’ / ‘Permalinks’, set your permalinks to whatever you wish. We recommend setting them to ‘post name’ as this can help boost SEO.
  8. Media Settings – Navigate to ‘Settings’ / ‘Media’, make sure you set your ‘Thumbnail size’ to whatever you wish your thumbnail size to be. If you change your mind later, it’s not a problem, just make sure you get a plugin to ‘regenerate your thumbails’, such as this one.
  9. We will be setting up the content and admin settings next.

Gutenberg 2.0 WordPress Customizer

Back To Top
Gutenberg 2.0 Admin Panel is located by logging into your WordPress site, clicking ‘Appearance’, then ‘Customize’ and finally clicking ‘Cr3ativ Gutenberg 2.0 Theme Setup’. Don’t foget to click ‘Save & Publish’ after you have completed setting up your theme options.

Setup

Back To Top

Customize  Gutenberg 2.0   A stunning new WordPress theme

Top Logo

Simply upload your top logo to appear in the head of all pages. If you do not upload an image, the theme will default to showing your site title and tag line found under Settings > General.

Favicon

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

Accent Color

Here is a brief description of what this color powers:

Text Links
Button Backgrounds
Pricing Table buttons / featured table background / Featured Table Button hover
Sticky icon background
Title Link Hover
Shortcode Alert Background / Icons
WP Player play bar progress
Color 1

Here is a brief description of what this color powers:

body text color
table colors
Pagination hover / active
Regular Table Header Background / Text
Pricing Table Featured button background / Regular table button hover and header
Shortcode Theme Button Background Hover
Color 2

Here is a brief description of what this color powers:

Playlist hover / Active background
Comment area Background
Shortcode Toggle / Accordion Background
Code Format Background
Color 3

Here is a brief description of what this color powers:

Headings
Read More Link Text
Menu Background
Footer Background
Form Labels
Sub Titles
Comment Reply Button Background on Hover
Comment Reply Button Text
Jetpack Slideshow Background
Social Icon Hover Background
Color 4

Here is a brief description of what this color powers:

Slide Out text color
Menu Text Color
Color 5

Here is a brief description of what this color powers:

Page Background
More Menu Background
Submit Button Hover Background
Media Controls background for WP Player
Color 6

Here is a brief description of what this color powers:

Input fields
Pagination Bar Background
Copyright Information

Enter your copyright information here. HTML is acceptable.

2015 <a href="https://cr3ativ.com" target="_blank">Cr3ativ.com</a>
Homepage background-image

If you are going to use the page template of ‘Home’ included, the next few settings pertain to only that page template. This page template was designed to wow your visitors as soon as they hit your front page and coded to give you the most power to customizing your homepage. Upload an image here that will ‘cover’ your homepage. The image size we used for the live demo is 1810 x 1224.

Homepage Line 1 Title

Enter some text here that will display as the first line of the homepage using 48px font-size. If you do not enter anything here, nothing will show.

Homepage Line 2 Title

Enter some text here that will display as the second line of the homepage using 30px font-size. If you do not enter anything here, nothing will show.

Homepage Text Color

Choose the font color that the above 2 lines of text will use.

Homepage Leftside Overlay Color

If you enter a color here, how it appears on your site will also depend on the next setting you choose for the opacity. For example, for our live preview, we have selected color #144652 for this option and in the next option, we choose .4 for the opacity. This makes the background image a little see-through – just gives it a nice edge, don’t you think? 🙂

Homepage Overlay Opacity

Choose your opacity layer. 1.0 is full opacity, meaning the color you choose above will completely fill the space with no see-through affect. You can use anything from .01 – 1.0. Play around with it and see what you like best.

Social Sharing

By selecting the ‘on’ value for this option, social sharing links will be injected into the blog single pages and if you are using the Cr3ativ Portfolio plugin, it will also be injected into the portfolio single pages.

Random Portfolio Section

If you are using the Cr3ativ Portfolio plugin and this option is turned on – at the bottom of the single portfolio page, you can have other (randomly chosen) portfolio items populate the bottom of the screen in a 4 column layout.

Plugins

Back To Top
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.

Here is a list of plugins we used in the live preview:

  • Contact Form 7 – This plugin is can be used for the contact form and has been styled for.
  • Creativ Shortcodes – A powerful yet easy to use shortcodes plugin for WordPress from Cr3ativ.
  • Subtitles – This plugin is used to add an extra heading to post titles.
  • Cr3ativ Portfolio – This plugin is used to power the portfolio functionality.
  • Jetpack by WordPress.com – This plugin is used for several elements throughout the site such as galleries and even can be used for forms.
  • Price Table – This plugin is used to power price tables seen throughout the site.

Page Templates

Back To Top
There are 3 page templates included with this theme.

page_templates

Default

This is a regular page that will bring in your content.

Sitemap

This is a special template that will list your pages, posts etc. dynamically.

Home

This page template will pull in your settings from the WP Customizer. It will not display content.

When creating your blog page, you just need to create a new page, name it and publish it. You do not need to choose a page template as WordPress has a specific php file used for the blog index page. Just remember to set it as your ‘Posts page’ as detailed later under the ‘YOUR FRONT PAGE’ section

Widgets

Back To Top
Gutenberg 2.0 comes equipped with 3 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’.

Widgets ‹ Gutenberg 2.0 — WordPress

Page

Back To Top

Page Widgets ‹ Gutenberg 2.0 — WordPress

Page

We’ve used several widgets here.

Take a look below as we break down each widget.

search_widget

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

text_social

Using a text widget, we’ve placed some shortcodes here for the social follow.

[creativ_social][creativ_social_link service="ja-social-icon-twitter" link=""] [creativ_social_link service="ja-social-icon-facebook" link="#"] [creativ_social_link service="ja-social-icon-linkedin" link=""] [creativ_social_link service="ja-social-icon-pinterest" link=""] [creativ_social_link service="ja-social-icon-delicious" link=""] [creativ_social_link service="ja-social-icon-paypal" link=""] [creativ_social_link service="ja-social-icon-gplus" link=""] [creativ_social_link service="ja-social-icon-stumbleupon" link=""] [creativ_social_link service="ja-social-icon-fivehundredpx" link=""] [creativ_social_link service="ja-social-icon-foursquare" link=""][creativ_social_link service="ja-social-icon-forrst" link=""] [creativ_social_link service="ja-social-icon-digg" link=""] [creativ_social_link service="ja-social-icon-spotify" link=""] [creativ_social_link service="ja-social-icon-reddit" link=""] [creativ_social_link service="ja-social-icon-flickr" link=""] [creativ_social_link service="ja-social-icon-rss" link=""] [creativ_social_link service="ja-social-icon-skype" link=""] [creativ_social_link service="ja-social-icon-youtube" link=""] [creativ_social_link service="ja-social-icon-vimeo" link=""] [creativ_social_link service="ja-social-icon-myspace" link=""][creativ_social_link service="ja-social-icon-amazon" link=""] [creativ_social_link service="ja-social-icon-ebay" link=""] [creativ_social_link service="ja-social-icon-github" link=""] [creativ_social_link service="ja-social-icon-lastfm" link=""] [creativ_social_link service="ja-social-icon-soundcloud" link=""] [creativ_social_link service="ja-social-icon-tumblr" link=""] [creativ_social_link service="ja-social-icon-instagram" link=""][/creativ_social]

text_using_regular_text

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

Gutenberg 2 was created as a super slick, bloat-free WordPress theme with heavy focus on displaying beautiful images, photos and artwork. The appearance can be customized via the WordPress customizer in admin to change all your colors to help you to make it your own. Typography is specially sized and is contained at optimum width for readability. We hope you enjoy the theme!

recent_posts

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

Footer One

Back To Top

text_footer

Footer One

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

Use this widget area for anything - such as this email subscription form.

[contact-form-7 id="1008" title="Untitled"] 

Error 404

Back To Top

Error 404 Widgets ‹ Gutenberg 2.0 — WordPress

Error 404

We’ve used several widgets here.

Take a look below as we break down each widget.

text_error_message

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

<p>Yikes! It looks like that page is not here anymore or maybe you typed or clicked an incorrect link. </p>

<p><strong>Please continue browsing the website, or alternatively use the search box below.</strong></p>

search_widget

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

Content Import & Setup

Back To Top

Inside your download 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 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 ‘gutenberg2-demo-data.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 ‘Price Tables’ etc.

Back To Top

Menus Part 2 ‹ Gutenberg 2.0 — WordPress

Gutenberg 2.0 supports 1 regular WordPress menu, you can of course, create more menus and use a Custom Menu Widget to show them in the sidebar, but for the primary nav, you will have 1 assigned menu area. 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‘. If you did the XML import, you only need to select the ‘Primary’ from the Theme Locations and click ‘Save’.

Menus Part 3 ‹ Gutenberg 2.0 — WordPress

To get categories from your blog articles or the categories from your Portfolio to show in your menus, click the ‘Screen Options’ from above and select ‘Categories’, ‘Types’, then you can drag and drop your items to your menu.

Menus ‹ Gutenberg 2.0 — WordPress

Then you can drag/drop any item to your Primary menu (or custom).

To get the ‘drop down’ effect for a menu, just make sure your ‘child’ menu items are indented slightly to the right as shown in the screen shot.

WordPress Post Format

Back To Top
Gutenberg 2.0 utilizes the WordPress standard Post Format Types of ‘standard’, ‘audio’, ‘link’, ‘gallery’, ‘video’ and ‘quote’. When you create your posts you just define the ‘format’.

The main blog page works off of ‘the more tag’. So where you want your ‘content’ to stop on the blog index page, you must insert the ‘More’ tag to break the content and provide the read more link.

more-tag-from-text-editor

more-tag-from-visual-editor

Video Post Format

Back To Top
On every post Add New screen, you will see a text box under the content area. If you create a new post and have chosen the ‘Video’ format, you have a text box to enter the URL to the video so that the video can be shown on the blog index and the blog single at full width above everything on the blog post.

See the gallery of images below to help guide the way.

Gallery Post Format

Back To Top
For gallery post format – the layout for this page can be very different based on a few factors. 1 – You have selected ‘Gallery’ as the format, 2 – You have created a gallery and inserted it into your post content area and 3 – you haven’t set a featured image. If those 3 factors have been met, your gallery will be extracted from your content area for the blog index page and placed in a slider area as shown here:

gallery_post_format_frontend

However, if you do not want the slider to show, just set a featured image or choose a ‘Standard’ format for your post.

Portfolio: A Custom Post Type

Back To Top
The portfolio you see on the live demo is powered from the free Cr3ativ Portfolio plugin. If you want to use this plugin and you have it installed and activated, the page templates you need are already created for you with this theme.

To create your ‘index’ page for your portfolio items:

  1. Create a new page.
  2. Choose the ‘Portfolio’ page template.

That’s it, the page will populate automatically with the individual portfolio items you have entered.

To create individual portfolio items:

  1. Under Portfolio, click ‘Add New’
  2. Give your item a name, a category, set a featured image and enter your content.
  3. Under the content area, you will see additional input boxes for you to fill out more information (if you wish) on that portfolio item.
  4. When all information has been entered, click ‘Publish’ and you will be able to see your item now on the page you created in the previous step.

If you want to change the url structure of the portfolio – examples: http://mythemepreviews.com/gutenberg2/portfoliocategory/art/ or http://mythemepreviews.com/gutenberg2/portfoliosinglepage/travel-helps-us-grow/, then go to ‘Portfolio Options’ under the Portfolio menu item in the WordPress admin. You can change /portfoliocategory and /portfoliosinglepage to whatever you wish the url structure to be. Please remember, that any changes you make here – once saved, you will also need to go to Settings > Permalinks and click ‘save’ again to let WordPress know to clear out the old and bring in the new.

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.

Reading Settings ‹ Gutenberg 2.0 — WordPress

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.

Support

Back To Top
Please read all the documentation and follow all steps before opening a support ticket – i can assure you that this documentation should cover all aspects of this theme, it’s use and setup!

We have a dedicated support center as mentioned on the first page of this documentation where you should direct all questions with regard to the functions and operation of this theme.
We supply support not because we have to, but because it’s the right thing to do. I only have a few rules – here they are:

Be polite

This is actually a rule and not a recommendation. We love supporting our buyers but we are not open to demands, alterations to the theme, customizations etc.

It’s Purely help on installing or if you’re not sure quite how to use a function of the theme.

Customization Work

We offer customizations at a price – contact us in the support center with your project scope and we will offer a price and timeline.

We don’t work for free sorry.

If you don’t have a budget then unfortunately it’s time to either start looking at tutorials, grabbing that handy brother-in-law that is a seasoned developer or borrowing money to get a professional to do your customization work.

We do not offer free advise, do the work for you or assist with ‘can you just show me how…” requests.

I hope you understand that at $40 – $55 a WordPress theme doesn’t include a developer at your disposal, but it does get you a rock solid awesome theme.

Jonathan & Barb