- 1 Installation
- 2 Theme Features
- 3 Theme options (Customizer)
- 3.1 Typography
- 3.2 Custom backgrounds and boxed layout
- 3.3 Custom header image/color
- 3.4 Custom navigation
- 3.5 Custom logo image
- 3.6 Layout options
- 3.7 Different layout for each post/page
- 3.8 Header Layouts
- 3.9 Color options
- 3.10 Featured content
- 3.11 Page templates
- 3.12 Post formats
- 3.13 Featured images
- 4 Recommended Plugins
- 5 Credits
- 6 Uninstalling
Thank you for downloading Gumbo WordPress theme by ThematoSoup.
WordPress is famous for its five minute installation. Easiest way to do it is by following steps described at WordPress Codex page: http://codex.wordpress.org/Installing_WordPress
Installing Gumbo theme
There are three ways to install a theme in WordPress:
- Through WordPress admin pages
- Through cPanel
- Using FTP
You can find out more about all three in detail at WordPress Codex page: http://codex.wordpress.org/Using_Themes#Adding_New_Themes
There are two ways to install a plugin in WordPress:
- Using built-in plugin installer
- Using FTP
You can find out more about both in detail at WordPress Codex page: http://codex.wordpress.org/Managing_Plugins#Installing_Plugins
A child theme (Gumbo Child) that is meant to help jumpstart your customization efforts is included. It’s very important to install and use it, because updating the theme almost never results in unexpected malfunctions. Also, all customization work is safely preserved.
To find out more about child themes, visit the link: http://codex.wordpress.org/Child_Themes
Responsive and Retina Ready
In addition to being coded with WordPress best practices in mind, Gumbo is responsive and will adapt to any screen size. Icons used throughout the theme are part of Genericons icon font and will look good regardless of device’s pixel density.
You can scan the code with your mobile device and see Gumbo in action.
With Gumbo you can not only blog and showcase your photos or other digital art, you can also sell it. WooCommerce plugin (free) is required for this feature.
Here’s how to install WooCommerce:
WooCommerce image settings are located in WooCommerce > Settings > Catalog. For best visual representation use these image sizes:
- Catalog images 250x250px
- Single product image 500x500px
You can use Gumbo’s Masonry page template to create Masonry (Pinterest-like) layout. Using Masonry page template is explained in Page Templates section.
All text strings used in the theme are translatable. Translating them is very easy and requires no coding skills. You can use this guide: http://premium.wpmudev.org/blog/how-to-translate-a-wordpress-theme/
Standardized Theme Hook Alliance hooks are used throughout the theme, making it very easy to customize it via a child theme or a plugin. If you’d rather not touch the code and just need to add some content to a specific location in your site, you can use THA Hooks Interface plugin to do so.
THA Hooks Interface Plugin
By installing the plugin, you’ll be able to customize Gumbo from within dashboard by hooking into Theme Hook Alliance hooks.
Gumbo declares support for the following Theme Hook Alliance hooks:
THA Hooks Interface plugin allows you to easily alter theme functionality using dashboard interface.
The icons are typically placed on the homepage or in the header. These icons link directly to your social media space and social menu is a way to easily display your links in the top menu.
To do this:
- Go to Appearance > Menu and create a menu with the name Social
- Enter your social network URLs (links) as menu items
- You don’t need to give any Navigation labels, full URL to your social profiles will suffice.
- Assign it to the Top Menu
Supported social networks:
Gumbo has 6 widget areas
- Primary sidebar
- Below Header
- Above Footer
- Post Aside
- Widgetized Template
note: Store Sidebar is used with WooCommerce Store pages and is available once you install the WooCommerce plugin.
Mighty Text Widget
Since it’s the most used widget of them all, we’ve decided to add a new layer of functionality to the Text widget.
You can now select:
- No icon
- Variety of Genericons
Infinite scroll (requires Jetpack plugin)
If you use Jetpack plugin, by enabling its infinite scroll module you can activate this feature for blog archives. Infinite scroll will kick in instead of pagination, so discovering more of your content is just scroll away.
To do this go to Jetpack > Infinite Scroll > Activate. Once you do this click Configure. You’ll be redirected to Settings > Reading > To infinity and beyond. Enable it and that’s it.
Theme options (Customizer)
All Gumbo theme options can be set in Theme Customizer screen Appearance > Customize.
This way you can preview all the changes you make before you save them.
Theme Customizer options:
- Featured Content
- Site Title & Tagline
- Header Image
- Background Image
- Static Front Page
You can pick from some of the most popular Google Fonts for your headings and body text. You can also set your headings to be bold or regular weight, as well as uppercase.
All typography options can be found in Typography section of Theme Customizer Appearance > Customizer. As you select body and heading font in dropdowns on the left side you will be able to preview them on the right. Once you’re pleased with selection you made, save your changes and they will be visible to your site’s visitors.
Fonts you’ll find are carefully picked and include:
- Droid Serif
- Open Sans
- Istok Web
- Noto Serif
- Surce Sans Pro
- Titillium Web
Custom backgrounds and boxed layout
When you install Gumbo you can use a color or an image as your site’s background. Using either one will create “boxed layout” and both can be set from Theme Customizer or Custom Backgrounds administration page Appearance > Background.
This documentation explains only how to do it from Theme Customizer, if you’d like to use Custom Backgrounds admin page, use this guide:
Once you’re at Theme Customizer Screen Appearance > Customize, you can either upload a new image or select one of background images you have already uploaded. After you have selected the image you can choose its display options:
- Position – this option allows you to position the background image on the Left (default), in the Center or on the Right of the page.
- Repeat – this option determines if the background image is repeated:
- No repeat – the background image will be shown only once on the page.
- Tile – the background image will be repeated both horizontally and vertically throughout the entire page.
- Tile Horizontally – the background image will repeat only horizontally.
- Tile Vertically – the background image will repeat only vertically.
- Attachment – this determines if you want the background image to scroll with the content or to stay “fixed” in place when the user scrolls down the page.
After you have set your background image options, click Save & Publish button to make them visible to your visitors.
You can remove a background image and go back to fluid layout by clicking Remove Image link and saving your options.
If you’d rather use a color background, you can set it from Theme Customizer’s Background Image section as well. Click the Select Color button, select a color from the color picker or enter a color’s HEX code and save your options.
You can remove a background color you previously set by clicking Clear button and saving your options.
Custom header image/color
If you’re like to add some more flavour to your site you can also custom header image that will be shown in all pages. This can be done from Custom Header admin page Appearance > Header and Theme Customizer.
To select header image(s) go to Custom Header admin page. There you will be able to upload new images or select them from your site’s Media Library. You can also select header text color, to make it more visible when shown on top of background image and decide whether you want to hide header text.
Images should be 1600×320 pixels or larger. If you upload a larger image, you will be able to crop it after uploading it.
Once you have uploaded one or more header images, you can go to Theme Customizer and preview your site with each one of them selected. When you are happy with the results, click Save & Publish.
You can also set custom header color using header background color picker.
The theme has three navigation menu locations:
- Top (above header)
To use them first you need to create some menus. You can create, edit and delete navigation menus in Appearance > Menus page. A new menu is created by clicking Create new menu link in that page. Type in a name for your menu, click Create Menu button and you’ll be able to add links to it.
You can change the order and placement of menu items by dragging and dropping the items to change their order. To create sub-menus or “drop-down” style menus, drag individual items to the right to “nest” them under a given parent tab. You can undo this by dragging them to the left.
To add description to your menu items, use the Description field. The descriptions will appear on your website underneath your menu items.
Once you have created and saved your menu, you can assign it to one of three menu locations by switching to Manage Locations tabs in Appearance > Menus page. Header Menu will display submenus up to five levels deep, while Footer Menu and Top Menu are one dimensional and don’t display submenus.
Even though the theme has three menu locations, you can create as many menus as you like and use them in your site. For example, you can display them in one of widget areas using Custom Menu widget.
You can also assign menus to menu locations from Theme Customizer screen Appearance > Customizer, but you must create the menus first in Appearance > Menus page.
To read more on how to work with menus in WordPress go to the official page:
Navigation below posts allows easy navigation from within posts. It’s located below content and just above the comment area. You can control it via Customizer by ticking or unticking Enable navigation below posts.
Gumbo theme supports WordPress SEO plugin. To enable its breadcrumb function, go to SEO > Internal links > Enable Breadcrumbs.
Custom logo image
You can add a custom logo image and use it instead of text based site title. This is also done from Theme Customizer screen.
Once at Theme Customizer screen, expand Site title and tagline section. There you’ll be able to upload a new image or select one you previously uploaded. Logo image height should be 100px and its width should be 300px or less.
If a logo image is used it will replace textual site title. You can remove logo image by clicking “Remove Image” link.
There are three layouts you can choose from:
- Right sidebar
- Left sidebar
- No sidebar (full width)
Default layout can be set and previewed in Layout section of Theme Customizer Appearance > Customize.
If you select No sidebar layout, your primary sidebar widgets will not be shown. You can use other widget areas to transfer the widgets.
Different layout for each post/page
After you’ve set your default layout you can override it on a post/page basis. That makes it possible to have a left sidebar post even though you’ve set your default layout to right or no sidebar. In addition to this you can hide header and footer and assign different sidebar to each post/page.
First you need to enable Layout Options in Screen Options.
After you do this you’ll find Layout Options meta box underneath your post and pages.
There are several options you’re in control of:
- Layout (right, left or no sidebar)
- Do not show header for this post (on or off)
- Do not show footer for this post (on or off)
- Font Size (small, medium, large)
With these, you can create everything from landing pages using no header and no footer options, to featured posts using no sidebar and large font size.
note: Usage of free WooSidebars plugin is recommended if you’d like to use custom widget areas in certain posts of pages.
Header layouts can also be found in Customizer > Layout. You can choose from three different layouts:
Gumbo has three color schemes:
In addition to this, you can use color pickers to set your site’s:
- Primary Color
- Header Background Color
- Header Text Color
- Background Color
All color options are located in Colors section of Theme Customizer screen Appearance > Customize.