WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] adding additional css files to a page (6 posts)

  1. gransar
    Member
    Posted 1 year ago #

    Hi.
    I have a custom page that requires an additional css file. I thought I would simply copy the content of header.php and embed css links after it has called its css... but the new css is not being recognized. I searched the forum and in one post Esmi suggested to add the css to the main css. I would like to keep them separated... Is this easy to do?

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    The best way is to make a child theme
    http://codex.wordpress.org/Child_Themes

    Then you can target a specific page using class output by body_class()
    http://codex.wordpress.org/Function_Reference/body_class

    or even post_class()
    http://codex.wordpress.org/Function_Reference/post_class

    if the style is big enough to be on its own file then use this
    http://codex.wordpress.org/Function_Reference/wp_enqueue_style

  3. gransar
    Member
    Posted 1 year ago #

    Thank you paulwp for a very comprehensive list. I skipped first and third links since I already operate from a child theme and this is a page. Before trying out functions again I like to add that it would be best for me to just to hard-code this values. It seems no matter what I give wordpress it chooses to ignore them. Here is what I have so far:

    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <link rel="stylesheet" type="text/css" media="all" href="js/imageMenu.css" />
    <script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript" src="js/imageMenu.js"></script>
     <?php
     wp_register_style( 'myImageMenu', 'http://www.gransar.net/wp-content/themes/twentyeleven-child/' );
     wp_enqueue_style( 'myImageMenu');
     ?>
  4. paulwpxp
    Font hero
    Posted 1 year ago #

    The code from the 4th link must be used in function.php, not in the template file like header.php

    Please look inside the function.php of TwentyTwelve theme as an example, it's easier to understand from real example.

  5. gransar
    Member
    Posted 1 year ago #

    oh ok. I created a new functions.php in the child theme. It only has the following:

    <?php
    //deano loading css for portfolio
    function my_external_links() {
    /* Register our new css and js files */
    wp_register_style( 'myImageMenu', 'http://www.gransar.net/wp-content/themes/twentyeleven-child/imageMenu.css' );
    }
    ?>

    and in the beginning of my customPage (not the header.php) where there are other css files being call I added the call function:
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript" src="js/imageMenu.js"></script>
    <?php
    wp_enqueue_style( 'myImageMenu');
    ?>

    again I would like to just hardcode the value. It doesn't make sense to write a function that's longer than a hardcoded value. I think the files are not being read either way.

  6. gransar
    Member
    Posted 1 year ago #

    basically the answer is not to use relative links...
    Here is a sample link:
    <script type="text/javascript" src="http://gransar.net/wp-content/themes/twentyeleven-child/js/imageMenu.js"></script>

    notice that src attribute has a full html link.

Topic Closed

This topic has been closed to new replies.

About this Topic