Jump to content


Photo

Conditionally Hooking Content Through Your Child Theme


  • Please log in to reply
2 replies to this topic

#1 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 09 February 2016 - 05:48 PM

Once you start diving into hook and templates you'll realize you can control any part of your site's design with a fair amount of ease. Diving into PHP to make changes can be a bit of a scary thing but once you give it some time you'll never want to build websites any other way.

 

One thing that has sped up my development time when making tweaks and designing pages throughout Kolakube has been how easy it is to interact with PHP + MD to add content.

 

In this tutorial I want to quickly go over with you a way to conditionally add blocks of content to any post, page, category — you name it — with an MD Child Theme.

 

I'm going to assume you have a decent understanding of how child theme works as well as functions and hooks. If there's anything you want me to explain more about, just reply to this thread and I can get into more detail for you.

 

 

Step 1: Setting the Intent

 

So much of coding + web design is just knowing what you need to do. Before even looking at code, take a quick assessment of your site or page and determine what you want to do.

 

For example, over the weekend (during the Super Bowl) I realized that sales of Marketers Delight had gone down over the past week and I wanted to know why. After looking around the Kolakube homepage I realized that there was no definitive call to action linking people to the MD Sales page.

 

In fact, it was actually hard to find out any information about MD from the homepage so I needed to make the sales page more obvious to my visitors.

 

I ended up designing the custom Page Lead you see in the screenshot below and applied it only to my homepage:

 

Attached File  Screen Shot 2016-02-09 at 5.34.34 PM.png   435.22KB   0 downloads

 

In short, my intent was to design a giant content block that would have an obvious link to my sales page. With intent in mind, I can begin creating what would eventually be that Page Lead.

 

 

Step 2: Add Functions

 

Now let's dive right into our MD Child theme's functions.php file. We're going to achieve this Page Lead with just 2 functions.

 

The first function, one you will refer to a lot, manages where we add these custom blocks of content. It will determine what pages our custom content gets loaded to as well as where on the page to load it to. This may sound complicated, but it's actually a very useful function that you'll love using.

 

The next function holds template HTML and is the content that will load on the page. Here are the 2 functions with dummy content you can paste in your child theme to see for yourself.

 

Again, I only wanted this message to show after the header on the Kolakube homepage so I used the proper hooks and conditional statement to restrict its access:

/**
 * Hooks Manager
 * Use hooks to add your custom content to various places throughout
 * MD's layout.
 *
 * See all currently available hooks in /themes/marketers-delight/build/hooks.php
 */

function md_child_theme_hooks() {

	if ( is_home() ) { // add custom page lead AFTER HEADER on the blog homepage only
		add_action( 'md_hook_after_header', 'md_child_theme_page_lead' );
	}

}

add_action( 'template_redirect', 'md_child_theme_hooks' );


/**
 * Page Lead HTML that will be added after the site header.
 *
 */

function md_child_theme_page_lead() { ?>

	<div class="kol-custom-page-lead box">
		<div class="inner">

			<div class="feature-content block-full-content format-text-main links-main">
				<h2>See Why Marketers Delight is the Ultimate WordPress Theme For Marketing Just About... Anything!</h2>

				<p class="small-title text-sec">Marketers Delight takes the pain out of building a stunning website that demands attention.</p>

				<p><a href="/marketers-delight/" class="button">Build a smarter website with MD &rarr;</a></p>

			</div>

		</div>
	</div>

<?php }

Some notes:

  • You can use any WordPress and MD conditionals like is_single(), is_category(), md_has_sidebar(), etc. in your Hooks Manager function (md_child_theme_hooks() in the example)
  • Add as many conditional hooks as you want to this function
  • Use MD Helper classes to responsively style your custom content

- Alex
Check out the Kolakube blog or follow me on Twitter.

#2 Seth Ellsworth

Seth Ellsworth

    Advanced Member

  • + Legacy Member
  • PipPipPip
  • 31 posts

Posted 25 May 2016 - 03:27 PM

I'm coming at this from the Thesis world. You usually have a funtion and then add action to the hook that you want. I see a couple extra things in here that I'm not used to. The template redirect and the initial function md_child_theme_hooks. Are those needed for every single instance? What are they for?

 

Also, wondering how to apply tracking scripts to EVERY page and also only ONE specific page (not home page) at a time.

 

Are you planning on adding more hooks?

 

Thanks.



#3 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 25 May 2016 - 11:46 PM

Since you're familiar with Thesis you'll breeze right through this.

 

The reason I setup the md_child_theme_hooks() function was so I can use if() conditionals (see WordPress Conditional Tags) and load hooks to only certain pages. So in the example, I'm loading the custom Page Lead (from the md_child_theme_page_lead() function underneath it) to ONLY the blog homepage.

 

You can't normally use conditionals with hooks so I loaded a function into the template_redirect hook that will let me manipulate when/how hooks are loaded. I usually only add hooks in here when I need to do it conditionally, otherwise I write them outside the functions.

 

So, you could write a function that holds the tracking code:

function se_tracking_script() { ?>

    <!-- Script -->

<?php }

...and then in the function that hooks into template_redirect you can conditionally load the hook like:
 

function se_hooks() {

	if ( is_page( 'about' ) ) { // use the slug of the page (http://example.com/ABOUT/)
		add_action( 'wp_head', 'se_tracking_script' );
	}

}

add_action( 'template_redirect', 'se_hooks' );

...if you wanted to show that on every page, just load the hooks the regular way.

 

As for more MD hooks, I'm always open to it, and MD isn't too reliant on them. Most of the MD layout is pieced together by adding content to the single md_hook_content hook. You can refer to this article to learn more about templates: http://kolakube.net/...-template-file/

 

WordPress has a lot of hooks, like wp_head and wp_footer for inserting scripts. The main hooks in MD are located in the themes /build/build.php file.

 

I prefer to build custom template files when I know I want to build custom templates and use MD Helper Classes to help get the job done. 


- Alex
Check out the Kolakube blog or follow me on Twitter.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users