Ask your WordPress questions! Pay money and get answers fast! (more info)

Hooking CSS for Custom Template in a Child Theme WordPress

  • SOLVED

Hello experts,

I am creating a splash page inside a child theme in genesis framework but i can't make my css hook into it. In my previous project i just put the code that i written below in the header area. But knowing that i am now working in a child theme obviously this line of code will no longer work.

<?php if (is_page_template('splash-page.php')) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/splash-page.css">
<?php } ?>


I visit wordpress codex and i found this code below to be the exact solution to my problem but due to my limited knowledge in coding php i still can't make this happen. So i need someone to help me write few lines of codes inorder for my external css to work on my splash page. Thanks.

require_once( get_stylesheet_directory(). '/my_included_file.php' );

Ok to make this more understandable. Since we are using the child theme named "generate". I place the splash page template inside the generate folder. And my CSS is inside the folder that is also named "css" image/images that i'm using for the page is stored in a subfolder name "splash-images"

So my splash page file resides on generate/splash-page.php
My css is under generate/css/splash-page.css
My css images is under generate/css/splash-images/

My splash page code i know this is not semantic but all i need is to make the my css hooked into.

<?php
/*
Template Name: Splash Page
*/
?>

<!DOCTYPE HTML>

<html <?php language_attributes(); ?>>

<head>
<meta charset="<?php bloginfo('charset'); ?>" />

<?php if (is_search()) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php } ?>

<title>
<?php
if (function_exists('is_tag') && is_tag()) {
single_tag_title("Tag Archive for &quot;"); echo '&quot; - '; }
elseif (is_archive()) {
wp_title(''); echo ' Archive - '; }
elseif (is_search()) {
echo 'Search for &quot;'.wp_specialchars($s).'&quot; - '; }
elseif (!(is_404()) && (is_single()) || (is_page())) {
wp_title(''); echo ' - '; }
elseif (is_404()) {
echo 'Not Found - '; }
if (is_home()) {
bloginfo('name'); echo ' - '; bloginfo('description'); }
else {
bloginfo('name'); }
if ($paged>1) {
echo ' - page '. $paged; }
?>
</title>

<?php if (is_page_template('splash-page.php')) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/splash-page.css">
<?php } ?>

</head>

<body>

<section class="splashcontent">

<header>
<h2>Internet Marketing Business</h2>
<p class="slogan">You Rest, We'll Deliver The Leads</p>
</header>

<div id="mc_embed_signup">
<form action="http://GetUsResults.us5.list-manage1.com/subscribe/post?u=75a660daa39a5acae6600a255&amp;id=8edb45b033" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<h2 class="optin-header">Lorem ipsum dolor sit amet, consectetur adipisicing elit!</h2>
<p class="optin-subheader">Confirm your email for this FREE report</p>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<input type="submit" value="Subscribe &raquo;" name="subscribe" id="mc-embedded-subscribe" class="button">
</form>
</div>
<!--End mc_embed_signup-->

<div class="optin-footer-nav">
<p><a href="#">Support</a> | <a href="#">Affiliate Disclaimer</a> | <a href="#">Anti Spam Policy</a> | <a href="#">Copyright and Terms of Use Agreement</a> | <a href="#">DCMA Disclaimer</a> | <a href="#">Earnings Disclaimer</a> | <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
</div>

</section>

</body>
</html>


*Note i don't want to touch any files on framework you already know the reason why.

This is how my splash page look like --> http://internetmarketingbusiness.co/splash-page/

Answers (2)

2012-11-22

Dbranes answers:

Hi, as ktrusak said, the normal and safe way is to use wp_enqueue_style(), more here:

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

and then get_stylesheet_directory_uri()

<blockquote>Retrieve stylesheet directory URI for the current theme/child theme
</blockquote>

http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri


You can therefore add this into your functions.php in your child's theme directory:

function mystyle() {
if (is_page_template('splash-page.php')) {
wp_enqueue_style( 'splash', get_stylesheet_directory_uri() . '/css/splash-page.css', false, '1.0', 'all' );
}
}
add_action('wp_enqueue_scripts', 'mystyle');


and then add this

<?php wp_head();?>

inside your head tags in your splash-page.php template page:

<head>
...
<?php wp_head();?>
</head>

2012-11-21

Kyle answers:

Try this:

if (is_page_template('splash-page.php')) {

wp_enqueue_style('flexslider', get_template_directory_uri() . '/css/splash-page.css');

}


Kyle comments:

Change 'flexslider' to 'splash page' or something

Keep in mind that for genesis the template directory is /themes/genesis/ not your child theme