Identifying posts/pages that use specific css class

  • Resolved Keirwatson

    (@keirwatson)


    3 years, 9 months ago

    My custom css has grown to 1300 lines. I keep adding more.

    Some of these custom css classes only apply to one or two posts. My aim is to remove them from the main custom css and add them just to the posts/pages where they are used.

    My problem is this: how do I track down which posts/pages use a particular custom css class?

    I have several hundred posts and the idea of looking through them all, one by one is impractical. It will be quicker to search for each custom class, identify the posts using it, then move the css to those posts.

    Is there a backend search that can identify css classes and list the posts/pages containing them?

    The page I need help with: [log in to see the link]

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

  • The Posts List (or Pages List) admin page has a search. If the custom class is in the content, it will find it.
    You can also use a plugin like Search Regex.

    1300 lines seems excessive. Perhaps instead of moving the definitions into the posts themselves, you can combine or generalize to pare down the rules. Surely some of these should be defaults in your theme CSS? It’s better to have CSS in one place than to have it spread haphazardly among the posts.

    Thread Starter Keirwatson

    (@keirwatson)

    Thanks Joy.I went back and tried the post search again. This time it worked! The problem was that I was searching for the css class with a leading dot “.min-width-200” – which returned no results. When I search for “min-width-200” then it correctly identifies the posts that use it.

    The reason I have so many lines of css is because in my blog I like playing with layout (graphic design), so I often experiment with custom css. Here in the UK I get page load speeds of under 1 second, so performance isn’t taking a hit. It’s more an issue of editing such a long css file.

    I appreciate your thoughts about keeping css all in one place but the alternative argument is that it is bad practice to load unused css on every page. I use a plugin “simple css” which provides a meta box under each post for post-specific css. This gets rolled into one css file on the backend so does not increase the number of files required to load the page. I guess the downside is that the css can’t be cached by the browser effectively if it keeps changing from page to page. The balance, for me I think, is to offload css that is only used on one or two posts, so I can trim down the main custom css to theme specific styling that is used on every page.

    I have a similar issue. We have some CSS classes that are added internally using the style tag in the header.php file and we have an external CSS file. I am trying to move all the internal CSS classes into the external CSS file. Some CSS classes in the style tag are overriding the CSS classes in the external file so I need to find the posts/pages that use these classes and test them. I tried to find the CSS classes using Search Pages/Search Posts but couldn’t find any posts or pages that use the internal CSS classes. I also installed the Search Regex plugin but that didn’t help either. Do you have any suggestions? Thanks for reading my question.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Identifying posts/pages that use specific css class’ is closed to new replies.