How to Add CSS for a specific Custom Post Type ?

  • harshmeet

    (@harshmeet)


    10 years ago

    I want to add 2 lines of CSS that will be executed on a custom post type only.

    i have tried using the below code in Single.php

    <?php if( is_post_type=="custom-post-type" ): ?>
          MY CSS CODE
<?php endif; ?>

    but the CSS does not works.

    so i went to header.php and tried the same. but on some research i came to know that we cant retrieve post type in header.php

    Please help me execute a few lines of CSS for a specific custom post type.

Viewing 4 replies - 1 through 4 (of 4 total)
  • RossMitchell

    (@rossmitchell)

    It would help us help you if you posted the address of your website, and specific pages which used this custon post type, and the snippet of css that you would like to incorporate.

    Without this all I can think of is to use a filter to process your page, and when indicated incorporate inline css.

    Thread Starter harshmeet

    (@harshmeet)

    the website address : https://rootmyandroid.org

    The Line of Css i want to use

    #sidebar-left { display: none; }
#content { margin: 40px 0 0 ; }

    Basically i want to remove the left sidebar from the custom post type. According to the theme developer the CSS does the job(yes it does but for every page and even the home page.)
    but i only want left sidebar to be hidden on custom post type page.

    The custom post type url is : https://rootmyandroid.org/custom_roms/hello

    Im using an if(is_post_type==”custom_roms”) to execute the code for the table which is present in the single.php

    So the table only shows when the post type is custom_roms

    Any Inputs ?

    You shouldn’t alter single.php or header.php because they will be overwritten at next theme update. It may be possible to do what you want without any php.

    To make some css apply to only one page, you need to prefix your css with another selector, maybe .single-custom_roms from the body tag. Try this in your custom css.

    .single-custom_roms #sidebar-left { display: none; }
.single-custom_roms #content { margin: 40px 0 0 ; }

    If this doesn’t do what you want, you need to find a class which applies only to the pages which you want the css to apply to.

    RossMitchell

    (@rossmitchell)

    That specific page has a body class with “postid-4929”, if you only want this change for this item, then this is the class prefix to use.
    If on the other hand you want this page style for all pages in the group “single-custom_roms”, then this is your choice.

    So your custom css becomes either:

    .postid-4929 #sidebar-left { display: none; }
.postid-4929 #content { margin: 40px 0 0 ; }

    OR

    .single-custom_roms #sidebar-left { display: none; }
.single-custom_roms #content { margin: 40px 0 0 ; }

    Now we need to get down to business as to making these changes in a sustainable fashion. @lorro is correct, It is best practice to NEVER change WordPress files or themes because when they get updated the changes are lost, and at this time no one remembers what the changes were. The solution is to use a CHILD THEME, details of setting up a child of your current theme are here:
    creating a child theme https://codex.www.ads-software.com/Child_Themes

    When you have created the child theme, you want to copy the theme file “single.php” over into the child theme, this way your changes are safe. Also copy over any other files that you have modified. On the other hand maybe you don’t want to keep these modified files if the modifications were unsuccessful.

    Then put the piece of custom css above into your style.css file of the child theme.

    By the way, I am using some Motorolla Atrix (MB860) phones, one running Cyanogen? BUT it does not play nicely with the laptop dock accessory.
    Is there a good ROM that works with the accessory dock (the dock has a laptop type keyboard and screen, plus a big battery).

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to Add CSS for a specific Custom Post Type ?’ is closed to new replies.