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 ""); echo '" - '; }
elseif (is_archive()) {
wp_title(''); echo ' Archive - '; }
elseif (is_search()) {
echo 'Search for "'.wp_specialchars($s).'" - '; }
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&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 »" 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)
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>
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