Newbie : Enqueue stylesheet.

  • Rob Stocki

    (@getwebmaxcom_wporg)


    9 years, 4 months ago

    I am a PHP programmer, new to wordpress.

    I am used to building my own CMS systems and web applications. I thought I’d try wordpress for a variety of reasons. Despite being a PHP expert, I have found trying to learn wordpress to be extremely difficult and frustrating.

    Here is one of many examples:

    1. I am used to creating applications where I include(‘functions.php’); I tried this in the header.php script and it turns out wordpress automatically includes the functions.php file. WHERE IS THAT DOCUMENTED? From the tutorials, it seems that the only files required for a theme to work are index.php and style.css. Apparently functions.php is automatically included?

    So, getting to the point, it seems I have to learn the wordpress conventions – baptism by fire. Fine.

    Now I am frustrated because I don’t see how to do even the simplest of things that are supposed to work “simply”.

    After many hours of wasted time and trying / failing to load a stylesheet perhaps someone can help.

    Here is my index.php file:

    <?php get_header(); ?>
    <?php the_content(); ?>

    <?php echo get_stylesheet_uri(); ?>

    <?php get_footer(); ?>

    I can see the stylesheet is properly referenced. That’s who I’m echoing get_stylesheet_uri();

    My stylesheet contains the following:

    /*
    Theme Name: Test Theme
    Theme URI: https://themeshaper.com/
    Author: ThemeShaper
    Author URI: https://themeshaper.com/
    Description: The Shape theme is a simple, minimalist theme based on Underscores and the original Shape Theme by Ian Stewart. It was created especially as a learning theme for The ThemeShaper WordPress Theme Tutorial: 2nd Edition.
    Version: 2.0
    License: GNU General Public License
    License URI: license.txt
    Tags: light, white, one-column, two-columns, left-sidebar, right-sidebar, flexible-width, custom-backgroud, custom-header, custom-menu, featured-images, flexible-header, microformats, post-formats, rtl-language-support, threaded-comments, translation-ready
    This theme, like WordPress, is licensed under the GPL.
    Use it to make something cool, have fun, and share what you've learned with others.
    */

    body {
    background-color:#999;
    }

    header {
    font-size:24px;
    }

    Should be simple enough.

    Here is the header.php file :
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Theme</title>

    </head>

    <body>
    <header><p>I am the header</p></header>

    suffice to say the html markup is correct for the site.

    In the head, if i include:
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>">
    I am able to get the stylesheet to work.

    If I remove the above stylesheet reference, because I’m told the correct way to include a stylesheet is to enqueue it, and try the “correct way”, I cannot get the stylesheet to work.

    Here’s my code in the functions.php file:

    function mycssScript() {
    // Load our main stylesheet.
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    }
    add_action( 'wp_enqueue_scripts', 'mycssScript' );

    The above is the latest attempt. I have tried numerous sites and turorials and examples and nothing is working.

    Am I doing something wrong? –Please help ??

Viewing 1 replies (of 1 total)

  • Hi there. I can try to help here as I am fairly new to WordPress development myself but have experience teaching some of the more basic WordPress things.

    The first thing to note is that while WordPress may recognize certain files automatically, that doesn’t mean they are required. WordPress just knows to look for certain file names and if they exist, do something with them. If they don’t exist, keep on moving. You’ll see a lot of that in the WordPress Template Hierarchy. https://developer.www.ads-software.com/themes/basics/template-hierarchy/

    Your function hooked into wp_enqueue_scripts actually looks good so I can’t see any reason why it wouldn’t work. You don’t see the stylesheet referenced in your header at all with that code? Even after clearing your cache?

    I feel like the best place to start with theming in WordPress is the Underscores starter theme. It’s nothing to look at but its structure is everything. I built a free course that helps developers understand WordPress theming and I used Underscores in all of my examples. I’m not sure if I am supposed to post links here but I’m genuinely trying to help. Here’s the course. https://buildwpyourself.com/topic/how-to-build-a-wordpress-theme/

    I would highly suggest learning WP theming by tweaks before creating. Creating everything in a theme from scratch would be a waste of time in my opinion as many of the templates are almost identical and many of the functions will be the same each time you build a theme. Underscores is based very closely on the default WordPress themes and when you can see it all in action “properly,” you should be able to get a much faster understanding.

Viewing 1 replies (of 1 total)
  • The topic ‘Newbie : Enqueue stylesheet.’ is closed to new replies.