Custom child template not editable with cornerstone

Hi,

I’m very new to Pro and cornerstone therefore could use some assistance getting my theme setup. I’ve created a standard custom Wordpress theme outside of Pro. I’ve managed to figure out how to add custom templates by finding another post on this forum however I cannot figure out how to make the content of the theme editable with Cornerstone.

In addition, I am experiencing an error which i’ve seen other users encounter. Here’s an image of the error:

The error reads:

No suitable preview area found.

I am unsure whether this is because I have done something wrong with the child theme or a plugin is getting in the way.

The template I have setup uses custom fields to pull in the data to the page. Here is a preview of my child theme template file:
<?php

// =============================================================================
// VIEWS/INTEGRITY/TEMPLATE-LANDING.PHP (Blank Template)
// -----------------------------------------------------------------------------
// A blank page for creating unique layouts.
// =============================================================================

?>

<?php get_header(); ?>

<?php
$title = get_field('title');
$theme = get_field('theme');
$book = get_field('book_information');
?>


    <!-- Header -->
    <header id="top" class="header header--<?php echo $theme ?>">

        <?php
        $header = get_field('header');
        ?>

        <div class="container-fluid">

            <div class="row no-gutter">

                <!-- Left side -->
                <div class="col-14 col-lg-6 offset-lg-1 col-md-12 offset-md-2 col-md-6 offset-1">
                    <div class="header__content">
                        <h1 data-aos="fade" data-aos-delay="150"><?php echo $header['title'];?></h1>
                        <hr class="<?php echo $theme === 'blue' ? 'colour-background--white' : ''?>" data-aos="fade" data-aos-delay="300"/>
                        <p data-aos="fade" data-aos-delay="500"><?php echo $header['subtitle'];?></p>
                        <button data-aos="fade-up"
                                data-aos-delay="900"
                                data-aos-duration="1000"
                                class="btn btn__double <?php echo $theme != 'blue' ? : 'btn__double--white'?>">
                            <span>$<?php echo $book['price'];?></span>
                            <span>Buy Now</span>
                        </button>
                        <div id="extra-titles" class="extra-titles plus">
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>

                <!-- Right Side -->
                <div class="col-12 col-md-9">
                    <?php if ($theme === 'blue') : ?>
                        <img class="header__person hide-mobile" src="/wp-content/uploads/2018/10/hero-2.png"/>
                    <?php else: ?>
                        <img class="header__person hide-mobile" src="/wp-content/uploads/2018/10/ben.jpg"/>
                    <?php endif; ?>
                </div>

            </div>

        </div>

        <div id="extra-titles" class="extra-titles plus plus-side colour-background--<?php echo $theme?>">
            <span></span>
            <span></span>
        </div>

    </header>


<?php get_footer(); ?>

I’d be grateful for any support regarding this issue or to be pointed in the right direction.

To be clear, my goal is to have a template where padding and margin of elements can be altered in cornerstone however due to the custom nature of the template it cannot be built inside the cornerstone editor.

Thanks,
Alex

Hi Alex,

I’ve changed your code to this:

<?php

// =============================================================================
// VIEWS/INTEGRITY/TEMPLATE-LANDING.PHP (Blank Template)
// -----------------------------------------------------------------------------
// A blank page for creating unique layouts.
// =============================================================================

?>

<?php get_header(); ?>

<?php
$title = get_field('title');
$theme = get_field('theme');
$book = get_field('book_information');
?>


    <!-- Header -->
    <header id="top" class="header header--<?php echo $theme ?>">

        <?php
        $header = get_field('header');
        ?>

        <div class="container-fluid">

            <div class="row no-gutter">

                <!-- Left side -->
                <div class="col-14 col-lg-6 offset-lg-1 col-md-12 offset-md-2 col-md-6 offset-1">
                    <div class="header__content">
                        <h1 data-aos="fade" data-aos-delay="150"><?php echo $header['title'];?></h1>
                        <hr class="<?php echo $theme === 'blue' ? 'colour-background--white' : ''?>" data-aos="fade" data-aos-delay="300"/>
                        <p data-aos="fade" data-aos-delay="500"><?php echo $header['subtitle'];?></p>
                        <button data-aos="fade-up"
                                data-aos-delay="900"
                                data-aos-duration="1000"
                                class="btn btn__double <?php echo $theme != 'blue' ? : 'btn__double--white'?>">
                            <span>$<?php echo $book['price'];?></span>
                            <span>Buy Now</span>
                        </button>
                        <div id="extra-titles" class="extra-titles plus">
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    <?php while ( have_posts() ) : the_post(); ?>
                        <?php the_content(); ?>
                    <?php endwhile; ?>
                </div>

                <!-- Right Side -->
                <div class="col-12 col-md-9">
                    <?php if ($theme === 'blue') : ?>
                        <img class="header__person hide-mobile" src="/wp-content/uploads/2018/10/hero-2.png"/>
                    <?php else: ?>
                        <img class="header__person hide-mobile" src="/wp-content/uploads/2018/10/ben.jpg"/>
                    <?php endif; ?>
                </div>

            </div>

        </div>

        <div id="extra-titles" class="extra-titles plus plus-side colour-background--<?php echo $theme?>">
            <span></span>
            <span></span>
        </div>

    </header>


<?php get_footer(); ?>

Could you please check again?

Hope that helps and thank you for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.