Support » Themes and Templates » how to add css for custom page template

how to add css for custom page template

  • hi everyone

    I made frontpage using custom page template, the template is frontpage.php was taken from page.php

    I have plan to make frontpage differently per month using this template, my problem is How and Where place to add the css for the frontpage

    I am absolutly newbie for coding, so the code advices that closely to copy-paste is realy needed, this is my link pandjalu

    many thanks

Viewing 9 replies - 1 through 9 (of 9 total)
  • Tara


    Volunteer Moderator

    Have you consider incorporating an unique id or class for your “custom page template” and then add to CSS to the main stylesheet(s) using the id/class?

    However, if you want to use a standalone additional CSS sheet, you could use a conditional to call it in header.php?

    you mean something alike this:

    <body<?php if ( is_page(array('somepage1', 'somepage2', 'somepage3'))) {
    echo ' class="myclass" '; } ?>>


    .myclass #content { background-color: #123456; }
    .myclass #content p { color: #987654; }


    Volunteer Moderator

    For example: Let’s suppose your newsletter template is called newsletter.php, you could do something like this:

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
    <?php if(is_page_template('newsletter.php')) :?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/newsletter.css" media="screen" />
    <?php endif;?>

    Generally I would recommend using the body_class filter instead of the if statement on the body.

    However, since you are newbie, I would recommend using the Custom Classes plugin for easily adding classes to specific pages.

    Once the class is added, simply add the styles to the main stylesheet for the theme.

    t-p & kopepasah, thanks the support, since i dont know how to implement your advices, now i made the frontpage with inline code in the page:

    body {background-image:url('http://aryapandjalu.net/wp-content/uploads/2013/01/depan-front.jpg'); background-position: center center; background-size: cover;}
    <p style="text-align: right;"><span style="font-family: 'trebuchet ms', geneva; color: #88C34B; font-size: xx-large; padding-right: 140px;">ARYA PANDJALU</span></p>
    <h2 style="text-align: right;"><span style="color: #88C34B;"><span style="font-family: 'trebuchet ms', geneva;">                                                                                                                                         </span><span style="font-family: 'trebuchet ms', geneva;"><a href="http://aryapandjalu.net/arya-pandjalu/"><span style="color: #99cc00; padding-right: 140px;">Welcome /</span></a></span></span></h2>
    <h2 style="text-align: right;"><span style="color:#88C34B;"><a href="http://aryapandjalu.net/arya-pandjalu/"><span style="font-family: 'trebuchet ms', geneva; color: #99cc00; padding-right: 140px;">Selamat Datang</span></a></span></h2>
    <p style="text-align: right; margin-right: 45px;"></p>

    this is the best i did at the moment

    Justin, thanks for the advice, I’m trying to add the body_class_filter. Unfortunately the codex is incomplete. From the example on that page, where does the code go? If I were to take a wild guess I’d put the below in the page template.

    // Apply filter
    add_filter('body_class', 'multisite_body_classes');

    And the following in the themes function file?

    function multisite_body_classes($classes) {
            $id = get_current_blog_id();
            $slug = strtolower(str_replace(' ', '-', trim(get_bloginfo('name'))));
            $classes[] = $slug;
            $classes[] = 'site-id-'.$id;
            return $classes;

    Am I correct?

    Then do I still add some custom css in my main css file?



    Forum Moderator

    @square_eyes: If you require assistance then, as per the Forum Welcome, please post your own topic.

    But then I would be accused of a duplice post? I don’t see how posting a new question which directly relates to getting clarification from an answer in this question benefits anyone.



    Forum Moderator

    Please post your own topic. Your new topic will not be removed as a duplicate as I am now closing this topic.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘how to add css for custom page template’ is closed to new replies.