custom theme per page

  • Hi all ,
    I’m new in Wordspress and probable my question is fully but
    How can i attach different theme for each page i have or
    how to attach different CSS per page. I found “custom css and js” plugin
    but with him i can couldn’t;t attach css per page

    is it any plugin that i can use to attach theme or different css per page ? Or group of pages to get same template / or css / different from default

    Best Regards
    Emil T.

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

  • You can make a template for each page in your theme. You can even have a different header and footer for each page. If you copy and paste the three files then rename them, eg. header-new.php, new.php, footer-new.php you can then make the new.php call the different header and footer then use CSS to make the pages look completely different ??

    If you look through the wordpress documentation you can find more details.

    Versi

    Thread Starter foxy202

    (@foxy202)

    Thanks Versi
    I really didn’t find that way. I just thinking about solution like that but i seek something that is much user friendly :
    https://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template

    It’s because i have 3 groups with 4-5 pages on each group/ category /
    and i need to have 3 different CSS. Your solution will give me option to
    have different file per page , not for category or group of pages.

    Best Regards
    Emil

    You can use “conditionals” and trigger the action to insert extra css files into your header (loaded via header.php) .

    Enter something like this in your functions.php

    function more_css_to_this_category()
{
  if( in_category(array('blue','Blue Cheese')) )
  {
    wp_enqueue_style( 'bluecss', get_bloginfo('stylesheet_directory') . '/bluecss.css' );
  }
  elseif( in_category(array('green','Green fish')) )
  {
    wp_enqueue_style( 'greencss', get_bloginfo('stylesheet_directory'). '/greencss.css' );
  }
  else
  {
    // a default: wp_enqueue_style( 'redcss', get_bloginfo('stylesheet_directory'). '/redcss.css' );
  }
};
add_action('wp_print_styles', 'more_css_to_this_category');

function more_css_to_this_page()
{
  if( is_page(array(42,'about-joe','About Joe'))  )
  {
    wp_enqueue_style( 'joecss', get_bloginfo('stylesheet_directory') . '/joecss.css' );
  }
  elseif( is_page(array(41,'about-linda','About Linda'))  )
  {
    wp_enqueue_style( 'lindacss', get_bloginfo('stylesheet_directory'). '/lindacss.css' );
  }
  else
  {
    // a default: wp_enqueue_style( 'dudecss', get_bloginfo('stylesheet_directory'). '/dudecss.css' );
  }
};
add_action('wp_print_styles', 'more_css_to_this_page');

    For more options, see codex for conditional tags: https://codex.www.ads-software.com/Conditional_Tags

    BR \ Emil ??

    An alternative to the above mentions, if the theme has the body_class(); in the <body> tag you can use CSS to design for each individual page

    If you view-source of your outputted page, and look at the <body class=”*classes here*”> you will find one that says page-id-#

    That page-id-# is specific to the exact page your on (if it’s a page)

    Otherwise it will give you other information like single home attachment etc.

    Which you can then use targetted CSS, so if you do

    body.page-id-2 {
    background: #000;
}

/* changing the links color just for that page id 2 */
body.page-id-2 a {
     color: #f00;
}

    It will change the background of whatever page is with the ID of 2 and etc, can target anything specifically on that page by prefixing the CSS with the body.page-id-# or body.single or body.home etc, whatever classes are available.

    There are a few people who made filters to the body classes to give you even more individualistic control.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘custom theme per page’ is closed to new replies.