Radius WordPress Theme

Created: 5/5/2013
By: Mike McAlister

Thank you for purchasing Radius! If you have any questions that are beyond the scope of this help file, please feel free to check out the Support Forum.


Installation Video

Upgrading from Radius v2.3

Radius was recoded from the ground up to fit the current framework of Okay Themes. Several major changes in the architecture, features and settings have taken place in this update. Because of this, if you are upgrading from version 2.3, you will have to set up the theme again, as if it were a new theme.

While this is kind of a bummer, the upside is you get this huge and awesome update for free. Radius 3.0 has really slick galleries, a better responsive layout, more white space, more attention to detail, and it's much easier to setup and maintain.

See the install video and instructions below to get your theme updated and setup on Radius 3.0.

A Note About Shortcodes: The shortcodes that came with Radius originally have been removed in version 3.0. This was for several reasons, but mostly because they are more trouble than they're worth for users. They will only be supported in version 2.3 and lower. If you still require the use of shortcodes, you can checkout one of the many shortcode plugins in the repository. This one seems to be be popular: Shortcodes Ultimate

A Note About Portfolio Items: Because of the architecture of the new version of Radius, you will have to recreate your portfolio items and recreate your galleries with the Toolkit (see below). Radius now uses a Portfolio custom post type. To speed things up, you can use a plugin to convert your some of your posts to portfolio items. Post Type Converter can help you do this. Once installed, your post screen will now have a drop down box that lets you choose a new type of post type. Select Portfolio from the list to convert your post to a Portfolio Item. These posts will now show up in the Portfolio Items menu.

Recommended Plugins

This theme uses a few plugins to provide extra functionality to the theme. Install these before proceeding.

  • Contact Form 7 - This plugin creates a fully functional contact form for your site. You can install it directly from your dashboard in the Plugins menu, or grab it from the WordPress.org plugin repository.

    1. Log in and navigate to Plugins → Add New.
    2. Type "Contact Form 7" into the Search input and click the "Search Widgets" button.
    3. Locate Contact Form 7 in the list of search results and click "Install Now".
    4. Click the "Activate Plugin" link at the bottom of the install screen.
    5. There will now be a Contact menu item on the WordPress admin menu. See below for more instructions on using this plugin with the theme.
  • Okay Toolkit - This plugin provides gallery features and several social media widgets including Twitter, Dribbble, Flickr and social media icons. Once installed and enabled, you can find the social media widgets in your Widgets section. You can install it directly from your dashboard in the Plugins menu, or grab it from the WordPress.org plugin repository.

    1. Log in and navigate to Plugins → Add New.
    2. Type "Okay Toolkit" into the Search input and click the "Search Widgets" button.
    3. Locate the Okay Toolkit in the list of search results and click "Install Now".
    4. Click the "Activate Plugin" link at the bottom of the install screen.
    5. Navigate to Settings → Okay Toolkit to modify the plugin's settings. The widgets will be available in Appearance → Widgets.

Okay Toolkit Settings

In order to use the widgets, galleries and portfolio items, you have to activate them in the Okay Toolkit.

  • Make sure the Okay Toolkit plugin is installed and activated. Go to Settings → Okay Toolkit in the admin menu.

  • You can enable or disable each widget depending on what you want to use. Radius uses the Twitter widget and Social Media Icons widget. You may also use the other ones if you'd like!

  • The Portfolio Items and Featured Galleries will be automatically activated once the Okay Toolkit is installed.

  • Save the plugin settings.

Radius Installation

  • First of all, you should have WordPress installed and ready to roll. It's always recommended that you start with a fresh install of WordPress to prevent a conflict of settings from old themes, etc. Make sure you backup your old theme and your posts, pages, etc. in case of a catastrophe!

  • Unzip the theme package. In the folder you'll find the Radius docs and a zip titled radius.zip. This is the theme zip that you need to upload into WordPress.

  • In the WordPress admin, go to Appearance → Themes. Click on the big Install Themes tab at the top of the page. Next, click the Upload link and navigate to the radius.zip file. Install and activate the theme.

  • Optional: Use the included dummy data to get your theme setup with some sample posts, pages and portfolio items. Go to Tools → Import → WordPress. Browse to the Radius download folder and locate the Dummy Data folder. Select the XML file and upload it. You can also find that xml file here: Radius.xml Make sure you have the Okay Toolkit installed and the Portfolio items enabled before importing. Otherwise the portfolio items will not import properly.

Contact Page

The Contact Page uses the Contact Form 7 plugin, which can grab for free on the WordPress plugin repository. See installation instructions above. Once installed, you'll see there is a Contact link in the left hand sidebar of your WordPress admin.

  • If you haven't already, create a new page called Contact.

  • Go to the Contact menu on the left admin menu to configure your contact form. By default they give you a simple form with Name, Email, Subject and Message. To keep things simple, I suggest using the default form. Otherwise, to customize this form even further, check out the Contact Form 7 docs page here.

  • After you've configured and saved your contact form in the Contact menu, you will be given a small shortcode like this: [contact-form 1 "Contact form 1"]. Copy this shortcode. We'll use this to add the form to our Contact page.

  • Now head back to your Contact page. Paste the Contact 7 shortcode that you copied into the body of the post. Update the post. You should now see the form on the contact page.

Creating the Homepage

The Contact Page uses the Homepage template and needs to be assigned to the front page of your blog.

  • If you haven't already, create a new page called Home.

  • You don't need to add any content to this page, as it will all be brought in by the homepage template.

  • In the right hand sidebar, in the Page Attributes section you'll see the Template settings. From the Template dropdown, select the Homepage. This will apply the unique homepage layout to this page. Publish your page when you're done.

  • Finally, we need to tell WordPress to use this page as the homepage. Go to Settings → Reading. In the Front page displays section, select A static page. Then, set your Home page (created above) as the Front page and your Blog page as the Posts page. Save changes when finished.

  • The rest of the Homepage is setup via widgets in Appearance → Widgets and will be explained further below.

Creating the Blog Page

The Blog page needs to be assigned to as the Posts page of your blog.

  • If you haven't already, create a new page called Blog.

  • You don't need to add any content to this page since this page will just bring in your blog posts. Publish your page when you're done.

  • Finally, we need to tell WordPress to use this page as the Posts page. Go to Settings → Reading. In the Front page displays section, select A static page. Then, set your Blog page (created above) as the posts page and your Homepage page as the Front page. Save changes when finished.

  • The rest of the Blog settings are in Appearance → Customize and will be explained further below.

Menu Setup

WordPress menus can be found under Appearence -> Menus.

  • You'll need to create at least one new menu for the header. Radius also supports a custom menu, which you could use in the widget area. Click the + to add a new menu.

  • Now, on the left hand side, select the pages you would like to have added to the menu. You can then click "Add to Menu" and they will show up on the right side of the page. You can drag the pages around to arrange them the way you'd like.

  • Create a drop menu by dragging menu items under and to the right of another menu item.

  • Save the menu when finished.

  • Now that you have the menu created, you need to assign it in the Theme Locations window located on the left. From the drop down menu, select the appropriate menu for the header and save.

Setting Up the Homepage

Aside from the slider, the homepage is comprised entirely of widgets, and can be setup in Appearance → Widgets.

  • Homepage Text Boxes - Add the Okay Text Column widget to this widget area. You will need to add a Title, Link, Icon, and Content for the text box. To choose an icon, head to the FontAwesome site and take a look at the available icons. When you find one you like, copy the name of it (i.e. icon-check or icon-plus) and paste it into the widget. See an example.

  • Homepage Mid Left - Add a text widget here. Add a title and some copy to populate the mid-left section of the homepage. See an example.

  • Homepage Mid Right - Add a text widget here. In the demo, I used this widget for showing a video, but you can use it for whatever you'd like. See an example.

  • Homepage Portfolio Section - Add the Okay Homepage Portfolio and Blog widget here. Add titles for both the portfolio and blog sections, choose how many posts to show, and add some content next to the portfolio items. See an example.

  • Homepage Portfolio Section - Add the Okay Homepage Portfolio and Blog widget here. Add titles for both the portfolio and blog sections, choose how many posts to show, and add some content next to the portfolio items. See an example.

Add A Slider to the Homepage

Once you've installed the Okay Toolkit, you'll notice you now have a Slider Items menu in your admin menu. This is where you'll create your slides.

  • Click ond Slider Items → Add New in the admin menu.

  • Add a slide title, which won't be outputted anywhere so you can title it anything.

  • On the right hand side of your page, you'll see the Featured Image pane. Click Set Featured Image and upload the image you'd like to be in the slider. Once uploaded, scroll down and click Use as featured image. Once set, you can close the image upload window.

  • Scroll down to the Slide Link box and add a link for your slide. This can be a link to another page on the site or an external link.

  • The content area, excerpt and custom fields don't do anything with Radius, so you can disregard them. You only need to fill out the Featured Image and Slide Link.

  • Once finished, publish the slide and check it out on your homepage.

Widgets

Radius utilizes several widgetized areas. Make sure you have the Okay Toolkit plugin installed to get all the widgets you see below.

  • Sidebar - You can put whatever you want in the sidebar! On the demo site, I used the Okay Social Icons widget, Recent Posts, a Custom Menu, and a Twitter widget.

  • Footer - There is also a Footer Widget section. I used a few stock widgets such as text wigdets and recent posts. You can use whatever you'd like here.

  • Social Dashboard Links - This widget area utilizes the Okay Social Dash Widget. Once you add one of these to the widget area, an icon will appear in your main menu, which opens up a hidden drawer with social media links. To use the widget, simply select which icon you'd like to show, add a link, and text to sit next to the icon. See an example.

Theme Customizer

Radius is customizable via the WordPress customizer. Here, you can upload a logo, set your link color and accent color.

  • To access the theme customizer, click Appearance → Customize in the WordPress admin menu.
  • You should now be in a live preview of Radius, with the customizer on the left.
  • Use the various menus to set the site title and description, background, logo, accent/link color and more. Make sure you go all the Radius settings in the customizer!
  • Radius Style Settings - Upload your logo, change your color scheme and accent colors, and add custom CSS.
  • When you're finished making changes, click Save & Publish to save the settings.
  • Check out your site to confirm your changes.

Adding Images, Galleries or Videos to Portfolio Items and Blog Posts

To activate the Portfolio Items section of the theme, you need to first install the Okay Toolkit plugin as outlined above. The plugin will provide the theme with the Portfolio post type, which populates the Portfolio (Blocks) page.

  • Install the Okay Toolkit plugin using the steps above in the Recommended Plugins section. Once installed, activate the plugin.

  • Go to Settings → Okay Toolkit. At the bottom of the Okay Toolkit Options page, you'll see the Enable Portfolio Items & Gallery Feature section. Enable them both by selecting Enable from the drop down.Save Changes.

  • Once activated, you'll see there is now a Portfolio Items section on the admin menu.

Now that you've activated the Portfolio, you can start adding posts to it. It's very similar to adding images and video to the Blog section.

Featured Image Post

  • Create a new post and add a title and description.

  • Write your content and add whatever styling you want.

  • On the right hand side of your page, you'll see the Featured Image pane. Click Set Featured Image and upload your image. Once uploaded, scroll down and click Use as featured image. Once set, you can close the image upload window.

  • Once you've added the featured image and content you can publish and preview your post.

If you have the latest version of Verb (v1.3), WordPress (3.5+) and the Okay Toolkit (v1.5), you can use the new Custom Image Galleries. Be sure to read the setup below and also check out this quick video I made showing how it works.

  • To use the awesome new WordPress galleries, you first need to be running WordPress 3.5. Secondly you need to install the Okay Toolkit. See instructions above.

  • Once you have the Okay Toolkit installed, go to Settings → Okay Toolkit. Enable the Portfolio Item & Gallery Features towards the bottom of the page and Save your settings.

  • Create a new portfolio item in Portfolio Items → Add New.

  • On the right hand side of your page, you'll see the Format pane. Click Gallery to set the post format and activate the gallery options.

  • Under your post editor, you'll see the Okay Gallery pane. Click the Edit Gallery button. Once the Edit Featured Gallery dialog opens, upload the images you'd like in your gallery, or select them from images you've already uploaded with the Add to Gallery link. Once your images are selected, click Add to Gallery. When finished, you can arrange your images by selecting and dragging them into position. If the theme supports image captions, you can add one in the Edit Featured Gallery page.

  • Once you've added your images and content you can publish and preview your post.

Video Post

  • Create a new post and add a title and post content.

  • You'll need to add a featured image thumbnail to represent your video. On the right hand side of your page, you'll see the Featured Image pane. Click Set Featured Image and upload your image. Once uploaded, scroll down and click Use as featured image. Once set, you can close the image upload window.

  • Next, scroll down the page a bit and look for the Custom Fields box. If you don't see the Custom Fields box, look up towards the top of your screen and click the Screen Options drop down. Make sure Custom Fields is checked.

  • Now you can add the Custom Field. The Name is going to be okvideo and the value will be your embed code. See this image for reference: Video Custom Field. The embed code should look something like the code below. Click Add Custom Field.

  • Sample embed code:
    <iframe src="http://player.vimeo.com/video/4143170?title=0&amp;byline=0&amp;portrait=0" frameborder="0" width="1200" height="600"></iframe>

  • Once you've added the custom field and content you can publish and preview your post.

Post Styles

Radius comes with a few custom element styles, which are used to easily add extra styling to your WordPress posts.

To use the post styles, simply select your text and then select from the drop down which style you would like to apply. You'll be able to see the changes live, in your editor.

  • Highlight - This will highlight the hell out of some text.

  • Intro Title - As seen on the demo, this is a nicely styled block of text to introduce your page.