This article was last updated on the January 2, 2017.
Upon activating Cornerstone for the first time, you’ll want to make sure you do some basic setup to integrate with your theme. There are two main locations that you’ll want to do this in. First, you’ll need to specify your global plugin settings in the WordPress admin panel. Secondly, you’ll want to specify your various design options afforded by the plugin in the Customizer.
Admin Settings Panel
The first stop we’ll make along the way is the Cornerstone settings page, located in the WordPress menu under Settings > Cornerstone. Once you’re there, you’ll want to specify a few different global settings for your plugin and how you want it to work in your installation:
Allowed Post Types – for this particular setting, you’ll want to specify which post types to enable Cornerstone on. For example, you may want to utilize it on your pages to build them out as you desire, but you might not plan on utilizing it on your blog posts. In this instance, you can simply select Page and leave Post unchecked, which will remove the Edit with Cornerstone button from your editing page in WordPress. If you have any additional post types available in your installation, you should see them here as well (for instance Product if you’re running WooCommerce). Keep in mind that the content area output for different post types might only be a small section on a page. For example, with WooCommerce, there is a lot of additional generated content on a product page along with the content from the WordPress editor (thumbnails, tabs for product information, generated featured products, et cetera). Cornerstone does not allow these types of features to be altered as these will be handled by the plugin/theme you’re utilizing, or may even need to tap into them using a child theme for greater control. Cornerstone itself is a page builder specific to the content area of the WordPress editor.
Permissions – you may wish to keep Cornerstone hidden from users with certain permissions. If that is the case, you can do that here by deselecting that particular user role. This is great especially if you run a large website with many different content creators. Building off of our previous example, you may wish to have Cornerstone only active on pages and for Administrators, but leave it hidden not only from posts, but also from Authors, so none of your contributors can utilize it if desired.
Enable Legacy Font Classes – this is a setting more specific to X users migrating from a previous version, but in v4.0 of X and v1.0 of Cornerstone, we’ve updated the way in which Font Awesome icons are output to the page (doing so we were able to eliminate 20% of our overhead from our stylesheets). Selecting this option will simply bring back the old CSS font classes if desired (e.g. “x-icon-home,” et cetera). For the most part, this stylesheet is not needed and you can proceed safely without it; however, if you’ve handwritten any icons into your page such as in the menu or elsewhere, you may want to leave this on so icons don’t mysteriously “disappear,” but we do recommend that user update to our new method of outputting icons for a more streamlined approach.
Product Validation – product validation registers your product with us in the member center and allow us to keep things current with automatic updates and various other features. It isn’t required, but is strongly recommended to unlock these various features and for other benefits.
Customizer Design Options
Next, you’ll want to go to the Customizer in the WordPress admin panel (Appearance > Customize) and specify your design options for the plugin. These options will be organized differently depending on how you’re utilizing Cornerstone.
Design Options in X
If you are utilizing X, the options mentioned above are specified in other areas of the Customizer as they are more thoroughly integrated into the theme (the one exception being Base Margin, as this is set automatically for each Stack in X). Container Width and Container Max Width can be found in Layout and Design, link colors can be found under Typography, and button settings can be found under Buttons. If you were using Cornerstone previously but have switched to X (or vice versa), you will want to make sure that your settings are implemented appropriately as these are two separate sets of options, so they will need to be matched manually in the event of a change.
Design Options in Other Themes
If you are not utilizing X, you will find three sections added to the Customizer that give you options to specify various overarching styles for your shortcodes:
Layout – the “Cornerstone – Layout” section has a few options to specify dimensions for various elements on your site. Base Margin is used to determine how much spacing should be between elements. You’ll want to make sure this is matched to your site, and a good way to typically do this is to figure out how much spacing is applied to the bottom of your paragraphs on your website, and then use that unit of measurement here. The Container Width and Container Max Width settings are used for any of the containers used in your sections on the page when activated. This is used to keep your columns contained from the edges of your site.
Typography – here you will want to match these colors to the same colors used for your links on your website. These will then be used throughout our shortcodes for various elements to create a cohesive look that fits in with your website’s color palette when needed.
Buttons – here you can specify your global default button styles used for our shortcodes. You can tap into the various styling options and colors to find the perfect fit that matches your theme.