WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Undefined Classes in View Source (4 posts)

  1. jborland77
    Member
    Posted 6 months ago #

    My theme is Twenty Ten. When I "view source" on my webpage to see the code spit out by WP I note there are many classes which are undefined. Here is an example:

    Inside the <body> tag, undefined classes are:
    page-id-34
    page-template
    page-template-onecolumn-page-php

    I did a search both in my style.css file and in the rest of the webpage's "source" but can find no reference to any of these class names.

    Also, I looked carefully through all the <link> tags to see if any other files besides style.css were included but found none.

    There are many other places in the "source" where obscure class names and id names are declared but I cannot find their definitions. What do they mean and why are they in my code? Thanks for your help with this question.

  2. CrouchingBruin
    Member
    Posted 6 months ago #

    I'm not sure what you mean by undefined. Oftentimes developers will add class names to certain elements so they can be targeted more easily by either the theme developer or by the end-user web developer. Not all classes will necessarily be used in the CSS, but they are there in case you do need them.

    For example, page-id-34. WordPress assigns a unique ID to every page and post, and the body element will be assigned a class that corresponds to that ID. If you wanted to add some CSS that targets just the elements on that page and no other page, then you can use that ID in your CSS selectors.

    For example, let's say your site has a main content area with a width of 75% and a sidebar with a width of 25%. But there's one page on your site where you want to hide the sidebar and expand the main content area because the content is too wide (I do this a lot when I want to display a Google Calendar on a page). You could add some CSS that looks like this:

    body.page-id-34 #main-content {
       width: 100%;
    }
    body.page-id-34 #sidebar {
       display: none;
    }

    This would hide the sidebar and expand the main content area for just the page that has the ID of 34 without affecting any other page on the site.

    So the short of it is, is you will often see many classes and IDs being declared that may or may not be used by the CSS, but they are there to make things easier for the end-user developer in case they are needed. If the page-id-34 class were not assigned to that page, then it would be virtually impossible to target CSS to a specific page.

  3. jborland77
    Member
    Posted 6 months ago #

    Okay, this makes sense. WP adds a bunch of extra class and id names to the source code, many of which never get used, in case you want to use them in the future by adding some CSS code for them to your style.css file. Thank you very much for your excellent answer to my question.

  4. CrouchingBruin
    Member
    Posted 6 months ago #

    Yes, although it's not just WP, it's the theme and developers as well. What is frustrating, sometimes, are theme or plugin developers who don't add enough classes or IDs to the elements that they create, making it difficult for their users to customize the appearance.

Reply

You must log in to post.

About this Topic