Bulk WordPress Page/Post ID CSS

I created this tool to save time when you need to apply CSS to specific pages and/or posts. You can find instructions on how to use this tool below.

Processing

Loading Dots

Results

How to use Bulk WordPress Page/Post ID CSS

To use the Bulk WordPress Post/Page ID Grabber, simply add the URL’s of the pages whose ID’s you want to grab and the CSS you want to apply to those pages (optional). You can easily copy all of the URL’s that are opened in your browser’s tabs by using the Chrome extension Copy All Urls.

When you press the “Get Page/Post IDs” button, it will display the Page ID’s under the results column with the CSS. You can then press the “Copy Results” button to copy them to your clipboard.

To avoid overloading websites, I have limited simultaneous connections to each website to 10.

How To Apply CSS To Specific WordPress Posts/Pages

As this is not a CSS (Cascading Style Sheets) tutorial, I am going to assume that you know how to apply basic CSS and that you want to know how to apply it to a specific page/post on a WordPress site.

To apply CSS to a specific page you just need to add its ID in front of your CSS code as per the below example. This example would change the font color of this page to red.

                    
                        .page-id-7478 p {
                            color: red;
                        }

To apply CSS to specific pages you will use .page-id-x (x being the ID) and for posts, you will use .postid-x.

To find the ID for each page you can…

  • Use the Reveal IDs plugin.
  • I like to keep plugin installations to a minimum so I personally prefer to use the below methods.
    1. Find it in the URL address of the specific page you are editing in the backend.
      Example: peterstavrou.com/wp-admin/post.php?post=7478
    2. Find it manually by using your browser's developer tools or viewing the page source code.

How To Find Page/Post ID using Chrome’s Developer Tools

  1. Go to the page/post whose ID you want to get and press F2 to open up developer tools. Other ways to open it include:
    • Ctrl+shift+i
    • Right-click on the page and select “Inspect”.
    • Click on ⋮ in the top-right corner > More tools > Developer tools.
  2. Press ctrl+f and search for page-id if it’s a page or postid if it’s a post.
    Alternatively, you should be able to find these at the top of the Elements page once it’s opened.
How To Find Page/Post ID using Chrome’s Developer Tools