How To: Use Organic Customizer Widgets

The Organic Customizer Widgets plugin is an extremely powerful plugin for building dynamic pages using custom widgets as content sections. The plugin utilizes the core WordPress customizer, and works with ANY theme.

Adding Widgets

After installing and activating the theme, follow these steps to start adding and using widgets:

  1. Add a new page under Pages > Add New.
  2. Under Page Attributes apply the “Organic Custom” page Template.
  3. Update or Publish the page.
  4. Click the blue Customize Page button. This will take you into the WordPress Customizer for that page.
  5. Click the + Add a Widget button to begin adding Organic Widgets to the page.
  6. Continue adding and arranging widgets on the page as you see fit.
  7. Save & Publish your changes.

Note: The “Organic Custom” page template needs to be applied to any page before you can begin adding widgets to it.

It’s that simple. There are several custom Organic Widgets included with the plugin. Each widget acts as a unique content section — such as a slideshow, testimonials or pricing table. The widgets can be dragged and dropped into position to change the order in which they appear on the page. Additionally, your changes update in real-time within the Customizer. So you can see exactly what your site looks like at all time. It’s a fast, simple and secure way to build dynamic pages.

Editing Widgets

It’s possible to lose track of where widgets have been added after leaving and re-entering the Customizer. Follow these steps to edit a widget you have already added:

  1. Within the Customizer preview window, navigate to the page on your site where the widgets have been added.
  2. Click the Blue Edit Icon next to the widget. This will automatically pull up the widget panel and options for that widget within the Customizer.
  3. Begin changing the widget options.
  4. Save & Publish your changes.

Click the blue edit icon to change options for any widget.

Included Widgets

The following widgets are included with the Organic Customizer Widgets plugin. Click the link for each widget to demo the appearance within our StartUp Theme.

  • Hero – A full browser height section with featured text and a call to action.
  • Blog – Display a section of blog posts from any category in a chosen layout.
  • Content Slideshow – A full width slideshow of featured posts with background images.
  • Feature List – A list of features with icons displayed in multiple column layouts.
  • Portfolio – A section of posts displayed as portfolio images in a masonry layout.
  • Subpage – Display any page content as a section within another page or use custom content.
  • Team – A section of team members from a selected post category.
  • Testimonials – A slideshow of testimonials from a selected category or custom post type.
  • Profile (Groupable) – A personal profile with an image, bio and social media links.
  • Pricing Table (Groupable) – A section of pricing tables with a featured list and link to purchase.
  • Featured Content (Groupable) – Custom content that can be grouped together with other featured content widgets.

Each widget can be customized by changing the background color, images and custom options. Once you’re familiar with using these widgets, the options really are endless.

Groupable Widgets

Profile Widgets that have been grouped together.

The Profile, Pricing Table and Featured Content widgets are groupable. Meaning, if you add multiple widgets of the same type next to each other, they will automatically group together into a single section. Groupable widgets are visually marked with a colored border within the Customizer, as seen in the screenshot to the left.

Note: If a non-groupable widget, or a groupable widget of a different type is added between a defined group, it will break the group. Groupable widgets will display as single full-width sections if they are not grouped with other widgets.

Using Organic Customizer Widgets, you can create dynamic pages on any WordPress website, using virtually any theme! The plugin uses core WordPress functionality. That means there is no bulky proprietary code or endless shortcodes that will drastically decrease the performance of your website. Plus, it’s completely free! There is no vendor lock-in, and your widgets can be migrated between themes and websites with ease. Pretty cool.

If you have any questions regarding usage of the plugin, please post your requests in the support forums. This is a completely free plugin, so if you are in need of faster support, please refer to our Priority Support service.

How To: Add New Google Fonts To Your Theme

With Organic Themes, we believe some functionality should be reserved for plugins, not theme options. Adding or changing fonts within your theme is one of those features.

In this tutorial we will explain how to manually add new fonts within the code using Google Fonts, and how to change fonts using a plugin.

The History of Fonts on the Web

I think it’s important to give a brief history of fonts on the web. Until somewhat recently, changing fonts on a website was limited to only a handful of core fonts for the web. There were workarounds using Flash and images, but it was a painstaking process. With the creation of solutions like the CSS rule @font-face, free solutions like Google Fonts and paid services like Typekit — the web finally became a place for good (or bad) typography.

Of the many new solutions, my recommendation is to use Google Fonts when changing fonts in your theme. It’s free, easy and there are plenty of great fonts available. There are plenty of bad fonts available as well. A lesson in typography may be worth considering if you don’t have a design background. If you do have a design background, but the Google font Montserrat just doesn’t cut it as a replacement for Avenir, than you may want to consider using @font-face. However, it will require a license to use the web font and hosting the font files on your server. Using Google Fonts skips that messy stuff, and that will be the focus of this tutorial.

Manually Adding A Google Font

Within Organic Themes, there are 2 files that will need to be edited in order to manually add a Google Font — the style.css and header.php files. I’m going to cover adding a single Google Font to your theme, but the process is similar for adding a “collection” of Google Fonts to your theme.

This is roughly a 10 minute process. If the manual integration isn’t for you, skip to the plugin section to speed things along.

Okay, let’s dive in:

Step 1. Cruise over to Google Fonts and choose your desired font. This is probably the most time consuming portion of the whole process.

Step 2. When you have found that perfect Google Font, choose the Quick Use button as illustrated below. We will be using Montserrat as our example.

google-fonts-quick-use

Step 3. On the Quick Use page, select the font weights and styles you wish to use in the theme.

Step 4. Upon selecting your styles, Google will provide code similar to this:

The code should be added before the closing </head> tag in the header.php file located within the Appearance > Editor section of the WordPress admin, then choosing “Header” from the list of template files on the right. Update the file after the code has been added.

Step 5. Now we need to tell the theme where the new font should be used. That is accomplished within the stylesheet. Still within the Appearance > Editor section, choose “Stylesheet” from the list of files on the right.

Fonts are generally applied to the body and heading classes within the stylesheet. However, there are instances where fonts may be applied to other elements within a theme, such as buttons, forms, etc. Generally, the focus will be on changing the body and heading fonts. As an example, changing the body font may look something like this:

Body class with old font:

Body class with new Google Font applied:

Note: Google Fonts should always be surrounded by single quotations.

Step 6. Update the stylesheet with the new changes, and your new Google Font will be applied to all body text throughout your theme. This same process applies to changing other fonts within the theme.

If your new font isn’t displaying, make sure the font name is spelled correctly, it’s wrapped in single quotes and has a comma after the font if necessary. Also, if you have a caching plugin active, you may need to delete the cache before noticing the change.

Within Organic Themes, every theme stylesheet has a table of contents. The body class is always the first style. This should make it easy to locate your body class and headings for manually changing fonts.

Using A Plugin

If you don’t want to mess with any code, there are plenty of great WordPress plugins available for changing fonts within your theme.

We recommend the Easy Google Fonts plugin. This plugin will load the entire Google Font directory into WordPress. Using the Appearance > Customizer, you can easily change the body and heading fonts, colors and styles within your theme.

Remember to choose your fonts wisely. Legibility is one of the most important factors to consider when creating a professional website. And never use Comic Sans or Papyrus.

Reference: Reading Settings

reading-settings

Your WordPress Reading settings.

Displaying the home page within our themes may require making sure your Reading settings are setup properly.

Navigate to Settings > Reading in your WordPress dashboard.

For older themes, you may need to select the ‘Your latest posts‘ option to ensure that the theme’s home page displays as per the theme demo. Many of our older themes use a home.php file to display a custom home page by default. This will not show a blog post index (as you might expect). If you are interested in the reason, please see the Codex article on the WordPress Template Hierarchy.

Newer themes may require that you apply the home page template to a page. Then, within the Reading settings, choose to display a static page. Select your published home page with the Home Page template applied. Optionally, you can set a Posts page to display your blog.

How To: Setup The Home Page Slider

In this tutorial we will describe the process of setting up the ‘Home’ featured content slider.

Reference:

Quick Start Guide (Setting the ‘Home’ page template)
Featured Video
Featured Images

1. Once the ‘Home‘ page template has been set, navigate to Appearance > Theme Options (Appearance > Customizer in newer themes) and under the ‘Homepage‘ tab set a category for the home page slider (Note: The naming of the ‘Homepage’ tab might depend on theme, e.g. you might see ‘Home’ instead of ‘Homepage’).

2. If you see only one or two options, ‘All Categories‘ and/or ‘Uncategorized‘, it means that you have not published a post in the category you wish to show in the slider. Once you create your desired slider category (Posts > Categories), you will need to publish at least one post before it is selectable in your theme options.

3. Once the slider is setup, you can select a post number to determine the number of slides shown, as well as a transition timing within your theme’s options panel.

Note: Each slide in the slider is a post with a Featured Image or Featured Video assigned. This means that if you want ten slides, you will need to publish ten posts within your slider category.

excerpt

Adding an excerpt may be necessary to display text in the slide.

Note: In our newer themes you may not see a text excerpt appear over the slider image. If you do not see text and would like to show it, edit one of your slider posts (Posts > All Posts), and to the top-right of your dashboard, on the post editor screen, you will see a tab that says ‘Screen Options‘ — click it. Once clicked, check the box beside the word ‘Excerpt‘. This will generate a new Excerpt meta box immediately beneath the main editor. The text that you enter here will be shown in your slider, along with the post title.

That’s it!

Quick Start Guide

In this tutorial we will provide instructions for using your theme’s home and page templates.

Reference:
Page Templates (WordPress Codex)
Using Page Templates (Organic Themes Tutorial)
Appearance Menus Screen (WordPress Codex)

Setting the ‘Home’ page template
  1. Navigate to Settings > Reading, and select the ‘Your latest posts‘ option. This will set the home page template as seen in your theme’s demo.
  2. Once set, navigate to Appearance > Theme Options (Appearance > Customizer in newer themes) to begin configuring your home page.
Setting the ‘Full Width’ page template
  1. Navigate to Pages > Add New, and create a new page.
  2. From the ‘Page Templates‘ drop-down menu, select the ‘Full Width‘ page template option. Save and publish.
  3. Navigate to Appearance > Menus to add your full-width page to your (custom) menu.
Setting the ‘Blog’ page template
  1. Navigate to Pages > Add New, and create a new page.
  2. From the ‘Page Templates‘ drop-down menu, select the ‘Blog‘ page template option. Save and publish.
  3. Navigate to Appearance > Theme Options (Appearance > Customizer in newer themes) to configure your blog page.
  4. Navigate to Appearance > Menus to add your blog page to your (custom) menu.
Setting the ‘Portfolio’ page template
  1. Navigate to Pages > Add New, and create a new page.
  2. From the ‘Page Templates‘ drop-down menu, select the ‘Portfolio‘ page template option. Save and publish.
  3. Navigate to Appearance > Theme Options (Appearance > Customizer in newer themes) to configure your portfolio page.
  4. Navigate to Appearance > Menus to add your portfolio page to your (custom) menu.

Note: For themes with a filterable portfolio, the filters are sub-categories of the category set in step #3. For example, you could set a category such as ‘Portfolio’, then create sub-categories as filter options: ‘Photography’, ‘Illustration’, ‘Oil’, and so forth.

Using the ‘Slideshow’ page template
  1. Navigate to Pages > Add New, and create a new page.
  2. From the ‘Page Templates‘ drop-down menu, select the ‘Slideshow‘ page template option.
  3. To add images to your slideshow, click the ‘Add Media‘ button to the top-left of the page editor. Using the media uploader, upload your desired slideshow images. Note: Images must be uploaded because of the way the slideshow template is setup, which means that you cannot choose previously uploaded images from the media library unless you were to use a plugin such as Attachments.
  4. Navigate to Appearance > Menus to add your portfolio page to your (custom) menu.

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match