Website Guider

The Ultimate Resource for WPadmins and Geeks

Skyscraper Technique 2.0: The Developer Guide 2019

What Is Skyscraper Technique?

You might have heard a lot about skyscraper link building technique, but still not able to understand it very well.

Well,it is a technique used for building backlinks to your website.

The term ‘Skyscraper’ in SEO was coined by Brian Dean(SEO Giant) famously known for his link building strategies.

The Skyscraper technique is quiet good for grabbing backlinks from authority sites just like Brian Dean does.

Personally, I learned much from Backlinko SEO blog and I grabbed this technique from there.

Brain already have posted a Case Study on it and is worth reading.

From my own experience and some by Brian’s knowledge, I define this technique as:

Skyscraper Content is the type of content which takes every bit of SEO into consideration.

Raashid Din Dar, WebsiteGuider

From HTML tags to UI, everything is taken into consideration while writing, creating, designing, etc.

You may ask.

If Brian has already posted an article on it, then why you are reinventing it?

Well, I have answer of it.

When I completely read the Brian’s post, I navigated towards comment section and what I saw, a user asked Brian:

Brian i just wanna ask you is that how you create custom pages like Backlinks: The definitive guide 2018 post on your blog….Are there any template you use to hire the freelancers to do this work for you ..?

BACKLINKO Blog

The Brian answered the question and the best part of the comment, the user was asking question about Skyscraper technique 2.0.

So, I thought to write a tutorial on it so everyone will be able to take benefit of this technique.

What you get after reading the tutorial?

This tutorial wouldn’t teach you how to write a content or how to do SEO.

But in this tutorial, you are going to learn the coding part of Skyscraper technique 2.0 in WordPress.

For example, you already have a good hold on copy-writing, SEO but you don’t know how to design it.

That is what I will teach you in this tutorial. So be ready to get started.

Chapter 1:Requirements

You must have few things before you start to build a skyscraper post.

The requirements I am going to tell are necessary because I don’t want you to just copy and paste. Instead I will teach you how to do it correctly and efficiently.

The aim of the tutorial is to teach you the coding part once, next time you should be able to create the Skyscraper content by own on live website without any assistance.

Are you ready?

Skyscraper Technique 2.0: The Developer Guide 2019 4

Two Basic Requirements

Let me clear you, without these two things you wouldn’t be able to create a Skyscraper post.

These two things are:

  • Local WordPress Run Machine.
  • A code editor.

Local WordPress Run Machine:

Don’t worry, it isn’t a physical machine but a virtual computer software.

With this machine you can easily setup a local WordPress on your computer in order to test the code.

The name of the tool is ‘DesktopServer’.

If you are beginner and you don’t know how to setup it then you can read my article on it.

How To Set Up WordPress Site Locally With DesktopServer

Also, I am not limiting you to this specific tool. If you search for such kind of tools, you will get hundreds of tools like Bitnami WordPress, WAMP, XAMP, LAMP, Flywheel, etc.

But for the sake of simplicity and taking time into consideration, I recommend this tool.

From my experience, it was the best tool I found.

A Code Editor:

If you have some experience with WordPress, you already know that WordPress has in-built code editor.

But I wouldn’t use that.

The question raises here, “Why wouldn’t you use inbuilt code editor?”

The reason for not using the in-built editor is that it doesn’t come with auto-completion and code checking.

The code editor I will use is ‘Sublime Text 3‘.

It would be better if you already have any other editor like PHPStorm, Atom, Brackets, etc.

If you don’t have, install this tool and you will forget other tools.

Other Necessary Requirements

If you met the above requirements then go onwards otherwise not.

We are not just limited to these but we have few more. Let me tell you those.

Any WP Theme:

You might have thought that we will create a plugin but we will not.

We will use theme to create such type of post.

We will test code in two themes, one is Genesis (premium) and other is default Twenty Nineteen.

In genesis, we have different code and in Twenty Nineteen we have other.

In general, the code we will write for Twenty Nineteen will almost work with other themes. The code of Genesis is specific to it not for any other theme.

Knowledge of PHP, HTML and CSS

This is a must have requirements.If you are not an advanced developer or intermediate, no worries.

You should at-least know the basics of these three programming languages like variables, array, functions, etc.

A Fresh and Devoted Mind

Without a fresh and devoted mind, it wouldn’t be possible for you to grab this technique.

You have to put all of your efforts to learn the code I am going to teach you.

So be prepared, take a glass of water, put computer on, be fresh minded because now we are heading towards coding part.

Chapter 2:Coding

Coding is the most important part of this guide.

Without coding, it is impossible to create such a kind of post. Many of us grab the whole Skyscraper technique, but when it comes to create it in real world, a non-programmer seems to be frustrated.

As said earlier,this is the most important part. Any single mistake can stop the working website.

Skyscraper Technique 2.0: The Developer Guide 2019 5

Two Golden Rules of Skyscraper Technique 2.0

We have two golden rules to keep in mind when coding a Skyscraper post.

  • Quality and Less Code.
  • Keep things simple and clean.

Quality and Less code lets your page to load faster. And keeping things simple and clean lets your article to reach heights.

How Skyscraper Post Is Made

If you want to know how such kinds of posts are made, then the quick answer is template.

Another question is, “Should we use page or post?

Answer: You can use both of them, but post type is recommended.

We will create a specific template for Skyscraper posts. Also, we have to style it as per the theme.

Let’s start coding the template for Skyscraper post.

Coding Skyscraper Technique in Genesis

Before starting to code, let me provide you insights about the theme and website.

REQUIREMENTS

Theme Using: Genesis Sample.

Child Theme: Yes

Parent Theme: Genesis.

WordPress Version: 5 and above

PHP Version: 7

I hope your local machine will have these settings.

As Genesis users already know that using a child theme is better option than using parent.

If you have any other genesis child theme, the code is compatible but needs HTML 5 support.

Be sure to check that your child theme supports HTML 5.

Let’s dirt our hands with code.

Creating a Template

Template is the backbone of the skyscraper technique. Because template let us to create custom code or loops.

So to create a template, head towards wp-content>>themes>>child-theme. Inside the child theme folder create a file named as skyscraper-post.php.

Now start to edit the file and add this code inside it.

<?php

/*
* Template Name: Skyscraper Post
* Template Post Type: post
*/

add_filter( 'body_class', 'skyscraper_post_body_class' );
function skyscraper_post_body_class($classes) {
	$classes[] = 's-post';
	return $classes;
}

// Forces full-width layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

// Removes default loop
remove_action( 'genesis_loop', 'genesis_do_loop' );

add_action( 'genesis_loop', 'skyscraper_post_custom_loop' );
function skyscraper_post_custom_loop() {

	// Use old loop hook structure if not supporting HTML5.
	if ( ! genesis_html5() ) {
		genesis_legacy_loop();
		return;
	}

	if ( have_posts() ) {

		/**
		 * Fires inside the standard loop, before the while() block.
		 *
		 * @since 2.1.0
		 */
		do_action( 'genesis_before_while' );

		while ( have_posts() ) {

			the_post();

			/**
			 * Fires inside the standard loop, before the entry opening markup.
			 *
			 * @since 2.0.0
			 */
			do_action( 'genesis_before_entry' );

			genesis_markup( array(
				'open'    => '<section %s>',
				'context' => 'skyscraper',
			) );

			/**
			 * Fires inside the standard loop, after the entry header action hook, before the entry content.
			 * opening markup.
			 *
			 * @since 2.0.0
			 */
			do_action( 'genesis_before_entry_content' );

			genesis_markup( array(
				'open'    => '<div %s>',
				'context' => 'entry-content',
			) );
			/**
			 * Fires inside the standard loop, inside the entry content markup.
			 *
			 * @since 2.0.0
			 */
			do_action( 'genesis_entry_content' );
			genesis_markup( array(
				'close'   => '</div>',
				'context' => 'entry-content',
			) );

			/**
			 * Fires inside the standard loop, before the entry footer action hook, after the entry content.
			 * opening markup.
			 *
			 * @since 2.0.0
			 */
			do_action( 'genesis_after_entry_content' );

			genesis_markup( array(
				'close'   => '</section>',
				'context' => 'skyscraper',
			) );

			/**
			 * Fires inside the standard loop, after the entry closing markup.
			 *
			 * @since 2.0.0
			 */
			do_action( 'genesis_after_entry' );

		} // End of one post.

		/**
		 * Fires inside the standard loop, after the while() block.
		 *
		 * @since 1.0.0
		 */
		do_action( 'genesis_after_endwhile' );

	} else { // If no posts exist.

		/**
		 * Fires inside the standard loop when they are no posts to show.
		 *
		 * @since 1.0.0
		 */
		do_action( 'genesis_loop_else' );

	} // End loop.

}

genesis();

Above code is full code you need for skyscraper post. We have to do other code also but first we will discuss the above mentioned code.

I started the file with PHP tag <?php which is necessary and after that I wrote these lines.

/*
* Template Name: Skyscraper Post
* Template Post Type: post
*/

Template Name describes the name of the template we will see on back-end which is Skyscraper Post.

Another line is Template Post Type: post which tells the WordPress to show the template for only post types not any other.

For example, if you visit the Pages and Add New page, you wouldn’t see any template named as Skyscraper Post. Instead, if you visit Posts and click Add New, a template with such name will be shown.

Next to the above code, I am adding this code.

add_filter( 'body_class', 'skyscraper_post_body_class' );
function skyscraper_post_body_class($classes) {
    $classes[] = 's-post';
    return $classes;
}

In the above code, I am adding specific class to the body of the posts with Skyscraper Post template.

// Forces full-width layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

Now with above code I am forcing a full width layout on such posts. The sidebars are gone now.

// Removes default loop
remove_action( 'genesis_loop', 'genesis_do_loop' );
// Custom Loop
add_action( 'genesis_loop', 'skyscraper_post_custom_loop' );

The above code removes the original content and I am adding a custom loop.

The reason for removing original loop is that I needed a custom HTML structure. With current html structure it isn’t possible to create such content type.

The skyscraper_post_custom_loopfunction is a part of custom loop. Inside it, I removed the article tag and used new section tag. I did some minor changes also.

After the custom function I run a genesis(); function which is also important.

Advanced Coding

We haven’t done all the work yet. We have to do other coding part also.

Now, we don’t have to edit template file further but we will write code in functions.php.

Open the file and add this code to the functions.php.

function get_hero_class( $class='') {
	
	global $post;

	$hero = array();

	if ($post->_wp_page_template === 'page-templates/skyscraper-post.php' && is_single()) {
		$hero[] = 'hero-section';
	}

	if (!empty($class)) {
		$hero = array_merge($hero, $class);
	} else {
		$class = array();
	}

	$hero = apply_filters( 'hero_class', $hero, $class );

	return array_unique($hero);
}


function hero_class($class = '') {
	echo 'class="'. join( ' ', get_hero_class($class)) . '"';
}

// Adds Hero section markup
add_action( 'genesis_before_content_sidebar_wrap', 'sky_hero' );
function sky_hero() {
	$post_id = get_the_ID();
	$strong_sky = get_post_meta($post_id, 'skyscraper_strong', true );
	?>
	<section <?php hero_class(); ?>>
		<div class="section-wrap">
			<div class="hero-top">
				<h2><strong><?php echo esc_textarea( $strong_sky ); ?></strong><?php echo get_post_meta($post_id, 'skyscraper_post_title', true ); ?></h2>
			</div>
			<div class="hero-bottom">
				<div class="h-b-left h-box">
					<?php echo get_post_meta($post_id, 'skyscraper_post', true ); ?>
				</div>
				<figure class="h-b-right h-box">
					<img src="<?php echo get_post_meta($post_id, 'skyscraper_post_image', true ); ?>">
				</figure>
			</div>
		</div>
	</section>
	<?php 
}

require_once get_stylesheet_directory() . '/custom-metaboxes.php';

Before I explain the above code, you to create another file inside your child theme. Name the file as custom-metaboxes.php.

Inside it, paste this code.

add_action( 'save_post', 'post_meta_box_save' );
add_action( 'add_meta_boxes_post', function ( $post ) {
    if ( $post->_wp_page_template === 'page-templates/skyscraper-post.php' ) {
        add_meta_box( 'sky_post_excerpt', 'SkyScraper Post Excerpt and Links', 'sky_post_excerpts', 'post', 'advanced', 'high' );
    }
});

function sky_post_excerpts() {
	 global $post;
    $values = get_post_custom( $post->ID );
    $data = get_post_meta($post->ID, 'skyscraper_post', true);
    

    $strong_title = isset( $values['skyscraper_strong'] ) ? esc_html( $values['skyscraper_strong'][0] ) : "";
    $title = isset( $values['skyscraper_post_title'] ) ? esc_attr( $values['skyscraper_post_title'][0] ) : "";
    $text = isset( $values['skyscraper_post'] ) ?  $values['skyscraper_post'][0]  : "";
    $image = isset( $values['skyscraper_post_image'] ) ? esc_attr( $values['skyscraper_post_image'][0] ) : "";

    // We'll use this nonce field later on when saving.
    wp_nonce_field( 'my_post_meta_box_nonce', 'post_meta_box_nonce' );
    ?>

    <table class="form-table">
        <tbody>
        <tr valign="top">
            <th scope="row">
                <label><strong>Skyscraper Title</strong></label>
            </th>
            <td>
                <p><input placeholder="Strong" class="widefat" name="skyscraper_strong" id="skyscraper_strong" value="<?php echo $strong_title; ?>" />
                </p>
                <p><input placeholder="Light" class="widefat" rows="4" name="skyscraper_post_title" id="skyscraper_post_title" value="<?php echo $title; ?>"/>
                </p>
            </td>
        </tr>

        <tr valign="top">
            <th scope="row">
                <label for="skyscraper_post"><strong>Skyscraper Page Excerpt</strong></label>
            </th>
            <td>
            	<?php wp_editor( $data, 'post_meta_box', $settings = array('wpautop' => false , 'textarea_name'=>'skyscraper_post')); ?>
            </td>
        </tr>
        <tr valign="top">
            <th scope="row">
                <label for="skyscraper_image"><strong>SVG Image Link</strong></label>
            </th>
            <td>
                <p><input placeholder="Link"> class="widefat" rows="4" name="skyscraper_post_image" id="skyscraper_post_image" value="<?php echo $image; ?>"/>
                </p>
            </td>
        </tr>

        </tbody>
    </table>
    <?php
}


function post_meta_box_save( $post_id ) {
   // Bail if we're doing an auto save
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

    // if our nonce isn't there, or we can't verify it, bail
    if( !isset( $_POST['post_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['post_meta_box_nonce'], 'my_post_meta_box_nonce' ) ) return;

    // if our current user can't edit this post, bail
    if( !current_user_can( 'edit_post' ) ) return;
    $allowed = wp_kses_allowed_html();


    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post'] ) )
        update_post_meta( $post_id, 'skyscraper_post', wp_kses_post( $_POST['skyscraper_post'] ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post_image'] ) )
        update_post_meta( $post_id, 'skyscraper_post_image', wp_kses( $_POST['skyscraper_post_image'], $allowed ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_strong'] ) )
        update_post_meta( $post_id, 'skyscraper_strong', wp_kses( $_POST['skyscraper_strong'], $allowed ) );

    // Make sure your data is set before trying to save it
    if( isset( $_POST['skyscraper_post_title'] ) )
        update_post_meta( $post_id, 'skyscraper_post_title', wp_kses( $_POST['skyscraper_post_title'], $allowed ) );
}

Save the file. Now it is time to explain the code and onwards we will do only styling.

In the above code, I created two custom functions get_hero_class() and hero_class() to add class to hero section.

These functions work just like body_class() and get_body_class(). These functions have nothing to do with this technique.

But to add any class to any specific page I wrote these functions to make work easier for you.

In these two functions, I created a filter which will help you in adding a class to any post.

The filter can be used in this way.

add_filter('hero_class', 'new_hero_section_class');
function new_hero_section_class($hero) {
    $hero[] = 'new-class';
    return $hero;
}

Here I am adding class to all posts having Skyscraper Post template.

But you can take it to next level. You can add a specific class to hero section for specific post.

For example, in below code I am a class to post with ID of 2074.

add_filter('hero_class', 'new_hero_section_class');
function new_hero_section_class($hero) {
    if (!is_single( '2074' )) { return; }
    $hero[] = 'new-class';
    return $hero;
}

After these two sections, I am populating hero-section by using action hook.

// Adds Hero section markup
add_action( 'genesis_before_content_sidebar_wrap', 'sky_hero' );

At last, I am adding the file custom-metaboxes.php file. Here I wouldn’t discuss it because this code is some kind of advanced coding.

That is reason I am skipping it.

Styling The Skyscraper Post

Without style the skyscraper post is worthless. You must have a solid knowledge of CSS to make these posts look better.

The CSS code I will put before you does basic work and applies to the hero section only. To style rest of the post, it is up to you how will you style it.

By keeping time in mind, I am only mentioning little bit of CSS.

Go to style.css file and inside it paste this code.

.s-post {
    font-size: 16.4px;
}

.s-post .site-inner {
    max-width: 100%;
    padding: 0 0 60px;
}

.s-post .hero-section {
    padding-bottom: 0;
}

.s-post .hero-section > .section-wrap {
    max-width: 60%;
    flex-direction: column;
    padding: 45px .9375rem;
}

.s-post .hero-top {
    padding-bottom: 40px;
    display: block;
    width: 100%;
}

.s-post .hero-top h2 {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-weight: 300;
    font-size: 45px;
    border-bottom: 1px solid hsla(0,0%,100%,.2);
    padding-bottom: 40px;
    margin: 0;
}

.s-post .hero-top strong {
    font-weight: 700;
    font-size: 35px;
}

.s-post .hero-bottom {
    display: flex;
    align-items: center;
    width: 100%;
}
.s-post .h-box {
    width: 50%;
    padding: 0 1.5rem;
}

.s-post .content {
    width: 100%;
}

And everything is completed.

Coding Skyscraper Technique in Twenty Nineteen

We already have 75% code written for Twenty Nineteen. We just have to change coding of template file and an action hook.

To create such content type in default theme, we have to change the whole coding.

Go to the skyscraper-post.php and inside it paste this code.

<?php

/*
* Template Name: Skyscraper Post
* Template Post Type: post
*/

get_header();

?>
<?php do_action( 'tn_before_content_sidebar_wrap') ?>
<div id="primary" class="content-area">
		<main id="main" class="content">

			<?php

			/* Start the Loop */
			while ( have_posts() ) :
				the_post();

				?>

				<section id="post-<?php the_ID(); ?>" <?php post_class('skyscraper'); ?>>
					<div class="entry-content">
						<?php
						the_content(
							sprintf(
								wp_kses(
									/* translators: %s: Name of current post. Only visible to screen readers */
									__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentynineteen' ),
									array(
										'span' => array(
											'class' => array(),
										),
									)
								),
								get_the_title()
							)
						);
						?>
					</div><!-- .entry-content -->
				</section><!-- #post-${ID} -->
				<?php

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) {
					comments_template();
				}

			endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->


<?php

get_footer();

The code does the same work but is different approach.

Now head towards the functions.php file and inside it locate this line.

add_action( 'genesis_before_content_sidebar_wrap', 'sky_hero' );

Replace this line with this one.

add_action( 'tn_before_content_sidebar_wrap', 'sky_hero' );

And you are all set.

Now it is time to create a real life example. Let’s do that in next section.

Chapter 3:Usage

Are you excited for creating your first skyscraper post.

Well,let me tell you some points you will see while creating a new post.

A new meta-box is added to the post.A new design has been created.

I know you are very eager to create it. Let’s start

Skyscraper Technique 2.0: The Developer Guide 2019 6

Creating First Skyscraper Post

Are you ready? Let’s move fast to Posts and click Add New.

You aren’t experiencing any change in the editor.

Wait! I have to set template first.

Yes, you heard right, you have to set template first then the changes will appear. On the right side, you will notice a new Post Attributes option. Click on it and set it to Skyscraper Post.

Skyscraper Technique 2.0: The Developer Guide 2019 7

Save the post as draft and navigate to the bottom of page. A new box named as Skyscraper Post Excerpt and Links will appear.

The box has all the options related to Hero section. To keep it short and simple, please explore the below image.

Skyscraper Technique 2.0: The Developer Guide 2019 8

You just completed the most critical part of the Skyscraper Technique 2.0. Now you have to use your HTML & CSS knowledge to create other parts of this technique.

To keep it simple and to the point, look at the source of this post and get some idea from it like how I created this post.

Quick Notes

  • Add the post title in editor because it will be used for search engines. Don’t leave it blank in any matter.
  • Close Debugging mode after successful test of the code.
  • Style the page further and as per your needs. It isn’t responsive, so I kept in mind that you will do so of own.

Conclusion

I hope you learned the way of creating a SkyScraper technique 2.0. If you need any help or are facing any issues please let me know in comment section. Please do SHARE this post with your friends.

Raashid Din Dar

Raashid Din Dar is a web developer and designer. He specialises in WordPress Theme and Plugin development. Also, Web Designing is what he loves.He loves to read books and play with friends.

One thought on “Skyscraper Technique 2.0: The Developer Guide 2019

Leave a Reply

Your email address will not be published.

Back to top