Search source code of whole site for CSS?

  • Evolvingdoor

    (@evolvingdoor)


    11 years, 11 months ago

    Is there any way I can search the source code of the whole site for a particular CSS code?

    I want to change the CSS on a client’s website by adding new style definitions to the default CSS. However, I don’t want to mess up anything in the website that might be using that style.

    For example, I want to change the H4 style so that I can use it on specific pages where I want to use that style. I just don’t know if any posts or pages are already using the H4 style and would therefore be changed as a result.

    It’s a pretty big site, so I’d rather avoid going through the whole site, page by page, to find where it might be used.

    I haven’t found anything in plugins, this forum or even a general search engine search. It seems like a handy feature that a lot of people might find helpful, so I’m surprised I’m not seeing anything about it, but maybe I’m not using the best search terms.

    Or maybe there’s a clever hack that I could use to tease out the pages where it’s used.

    Thanks in advance for the help.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Clayton James

    (@claytonjames)

    11 years, 11 months ago

    You can find most of that functionality in different developer tools for individual browsers. One of the easiest to learn how to use – in my opinion – is the firebug extension for Firefox. It allows you to very quickly identify and view your code, and lets you “live” edit (it’s only happening in your browser, not on the site) your changes so you can view the result before committing to any actual changes.

    Thread Starter Evolvingdoor

    (@evolvingdoor)

    11 years, 11 months ago

    Thanks ClaytonJames for your reply. What I actually wanted to do was to search the entire site’s source code for the H4 tag or for “<h4”, for example. That way it would give me a list of the pages where that was found.

    I do have Firebug installed (couldn’t live without it), but to my knowledge it won’t search an entire website like that.

    I’ll check out Firefox to see if there are any extensions that might help, though. Thanks!

    Clayton James

    (@claytonjames)

    11 years, 11 months ago

    What I actually wanted to do was to search the entire site’s source code for the H4 tag or for “<h4”, for example. That way it would give me a list of the pages where that was found.

    Okay… You only need to search the active theme’s files, (unless of course, you’re working with a child theme) and if you are only interested in the css, then probably only the style sheets.

    Download the entire active theme (the one you want to modify) directory to your desktop. If you are using a ‘nix based OS, grep the files for the terms you want to display as list of file locations. If you use windows, dngrep for windows is a very easy way to achieve the same result. The GUI will display a list of files containing the terms you searched for in a given directory. It’s free, and available as stand-alone .zip or an installer.

    WPyogi

    (@wpyogi)

    11 years, 11 months ago

    @claytonjames, Yes, but some sites have inline and internal CSS code — in addition to the stylesheets, so you’d really need to search every file. And then you’d fine every instance of whatever tag you were looking for – -which is likely to be a bigger pain to wade through than using Firebug.

    Or is there a way to get around the above?

    Thread Starter Evolvingdoor

    (@evolvingdoor)

    11 years, 11 months ago

    ClaytonJames, thanks for the suggestion, and for the link. I’ve never heard of “grep” before (the term or the utility). The CSS is done through a child file, actually, although I could probably get it all using Firefly.

    Also, WPyogi is right, that if I was looking for anything other than a standard tag (with no in-line style modification), it would be the actual files I would need to search.

    In this case, I changed the style to a big, bold red style that would be easily seen and just went through all the pages to see if any were using the <h4> tag. I didn’t find any; with any luck, there are no in-line modifications to any H4 tags.

    This site isn’t super huge, thankfully, or doing it that way wouldn’t even be an annoying option. It would be nice to have another option for other situations like this, though.

    WPyogi

    (@wpyogi)

    11 years, 11 months ago

    I was thinking about this after posting and agree it would be a very handy tool — but if it were easy to do, I’m sure it would already be widely available! Good creative solution you came up with…

    I guess this kind of situation lends weight to the concept of only using external CSS — and well organized stylesheets at that.

    Clayton James

    (@claytonjames)

    11 years, 11 months ago

    @ WPyogi

    -Yes, but some sites have inline and internal CSS code — in addition to the stylesheets,…
    …which is likely to be a bigger pain to wade through than using Firebug.

    I agree. That’s why I initially made the firebug suggestion, but I think we’re looking for a “cake and eat it too” type of solution on this one.

    WPyogi

    (@wpyogi)

    11 years, 11 months ago

    Yes, indeed! That’s why Firebug rocks!

    Thread Starter Evolvingdoor

    (@evolvingdoor)

    11 years, 11 months ago

    Agreed about the “cake and eat it too” aspect. 🙂 I love Firebug and use it all the time, but unless there’s a search feature in it that I don’t know about, I’d still have to examine each page separately. Better to just View Source and do a Ctrl-F find. (“<h4” will catch all H4s regardless of whether there are in-line modifications.)

    With a non-CMS/blog (i.e. non-database driven) website, the problem with searching the whole site is that a utility could only crawl based on the inter-page links. You’d miss any draft or unlinked pages. However, I’m a bit surprised there wouldn’t be one for DB-driven sites, since they’re all in one place and it would be a matter of searching the content files/entries. But I might be assuming it’s simpler than it is.

    creekdweller

    (@creekdweller)

    11 years, 10 months ago

    I’m surprised there isn’t a plugin for this considering all the potential uses. Search for all posts that link to example.com (some of which may not have used “example.com” in the text), search for all posts with blockquotes, etc. Easy to do in Expression Web, which I’m leaving behind to use WP as my CMS, and I know I’ll regret losing the ability to easily search throughout the html source of my site.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Search source code of whole site for CSS?’ is closed to new replies.

Tags