Cornerstone Theme Integration

This article was last updated on the January 2, 2017.

Guidelines

Before you decide on integrating Cornerstone in your theme, there are some things to consider.

Do’s and Don’ts

Please DO:

  • Create your own plugins containing new Cornerstone elements (perhaps from your pre-existing shortcodes).
  • Add your own styling to Cornerstone elements. You may even turn off native styling entirely.
  • Share with us your ideas, feedback, and thoughts, and even contributions if you like.

And some DO NOT’s:

  • Don’t change the markup of our elements or shortcodes. This is important for data portability.
  • Don’t alter the user interface in any way, including introducing new controls, or custom builder features.
  • Don’t extend existing elements, including sections, rows, and columns, with new controls, although your custom theme styling could be used to change how they appear.

If you stick to our documented APIs, this won’t be a concern, but especially in WordPress, there are always workarounds, and we request that you avoid them.

We do understand this is more restrictive than what other builders allow, but we are committed to preserving the Cornerstone user experience – no matter what theme, or combination of plugins is used. We’re also committed to preserving the portability of content created with Cornerstone. If Cornerstone is lacking a certain control or feature you need, feel free to reach out and let us know. We may be able to work with you on making it part of the core plugin.

Bundling Cornerstone in your theme

This is covered in more depth on our listing page FAQ.

Functions and Hooks for Theme Developers

Hiding Themeco Links

As mentioned above, there are still (and always will be) some connection between all Cornerstone users and Themeco. We offer automatic updates, and custom templates to validated installs. We don’t offer a way to remove the validation screen of “Manage Licenses” link, and would ask that you do not tamper with this as part of your theme integration.

That being said, we do understand that you may want to limit exposure to our branding in your own products. And we offer several flags that can be set via the cornerstone_theme_integration function to hide these. Here’s the list of things that can be removed:

  • Cornerstone’s global validation notice. We remind people with a dismissible notice to validate. But we understand you may not want them seeing this with each update.
  • Themeco Offers. Should we ever introduce something that would be considered promotion through Cornerstone, you can ensure it will be turned off in advance, avoiding conflict of interest.
  • Purchase link. On the Cornerstone home page, there is usually a link to purchase another license. This goes to our sales page, so we understand if you’d like to remove it.
  • Support box. The home page also has a box containing links to our knowledge base and support. While we are happy for your users to have the chance to read our articles, this is at your discretion.

To remove all of the above, you can use this code from within the after_theme_setup hook of WordPress:

cornerstone_theme_integration( array(
  'remove_global_validation_notice' => true,
  'remove_themeco_offers'           => true,
  'remove_purchase_link'            => true,
  'remove_support_box'              => true
) );

Adding Default Post Types

By default, Cornerstone is enabled for Posts and Pages. Cornerstone offers the cornerstone_set_default_post_types function to redeclare what post types will use Cornerstone by default. additional post types, or if you want to turn off posts by default, you can use this function.

Examples:

<?php

// Remove "Posts" from what is enabled by default.

function my_theme_set_cornerstone_default_post_types() {

  cornerstone_set_default_post_types( array( 'page' ) );

}

add_action( 'cornerstone_integrations', 'my_theme_set_cornerstone_default_post_types' );
<?php

// Add "My Theme Portfolio" post type.

function my_theme_set_cornerstone_default_post_types() {

  cornerstone_set_default_post_types( array( 'post', 'page', 'my-theme-portfolio' ) );

}

add_action( 'cornerstone_integrations', 'my_theme_set_cornerstone_default_post_types' );

Keep in mind:

  • This does not prevent the user from re-enabling support themselves on the Cornerstone settings page.
  • This function should NOT be used in plugins. It should only be called once, as each call will overwrite the previous declaration.

Removing Cornerstone front end styles.

If you are going to be restyling Cornerstone elements in your own stylesheets, there is a quick and easy way to prevent Cornerstone from enqueuing the built-in styles on the front end.

add_filter( 'cornerstone_enqueue_styles', '__return_false' );

Advanced: It’s also possible to disable Cornerstone’s generated styles, and remove the integration settings we add to the customer. We do this in X to prevent overlap, but we wouldn’t recommend it in most cases, as it’s a considerably deep integration.

These filters will turn off Cornerstone’s generated CSS in the head, and prevent the customizer settings from appearing

add_filter( 'cornerstone_customizer_output', '__return_false' );
add_filter( 'cornerstone_use_customizer', '__return_false' );

Keep in mind that if you opt for this advanced route, you’ll need to add your own styles for base margin, and container widths.

Using an Integration Class

Integration classes are optional, but offer a convenient way to organize your code. With all the changes you may be including, it may help to organize them into a class. It’s even possible for this class to exist in another plugin, but still be assigned to your theme and only load when it is detected that your theme is active.

Creating the class

Create a PHP class including a constructor, and a static stylesheet method. This is what Cornerstone’s integration manager will look for. For example:

<?php

class Cornerstone_Integration_My_Theme {

  /**
   * This integration will load if get_stylesheet() matches the value returned here.
   */
  public static function stylesheet() {
    return 'my-theme';
  }

  /**
   * Loads on the after_theme_setup hook
   */
  public function __construct() {

  }

}

Register the Integration

Integrations need to be registered quite early to allow access to other primary hooks during execution. They are loaded by passing a name and class into the cornerstone_register_integration function. The best place to setup Cornerstone integration is in functions.php of your theme, hooking into cornerstone_integrations. Here’s an example:

<?php
function my_theme_register_cornerstone_integration() {
  
  // Load the file containing the class previously created
  require( 'path/to/class-my-theme-cornerstone-integration.php' );
  
  // Register our class with Cornerstone  
  cornerstone_register_integration( 'my-theme', 'Cornerstone_Integration_My_Theme' );

}
add_action( 'cornerstone_integrations', 'my_theme_register_cornerstone_integration' );

Example

Here’s an example showing a class that makes some common theme integration calls, and adds some filters.

<?php

class Cornerstone_Integration_My_Theme {

  /**
   * This integration will load if get_stylesheet() matches the value returned here.
   */
  public static function stylesheet() {
    return 'my-theme';
  }

  /**
   * Loads on the after_theme_setup hook
   */
  public function __construct() {

    // Set Default Post Types
    cornerstone_set_default_post_types( array( 'post', 'page', 'my-theme-portfolio' ) );

    // Declare theme integration flags
    cornerstone_theme_integration( array(
      'remove_global_validation_notice' => true,
      'remove_themeco_offers'           => true,
      'remove_purchase_link'            => true,
      'remove_support_box'              => true
    ) );

    add_filter( 'cornerstone_enqueue_styles', '__return_false' );
    
  }

}