{"id":166,"date":"2025-12-01T17:00:00","date_gmt":"2025-12-01T17:00:00","guid":{"rendered":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/2025\/12\/01\/jake-spurlock-introducing-placeholders-a-wordpress-plugin-for-ad-wireframing\/"},"modified":"2025-12-01T17:00:00","modified_gmt":"2025-12-01T17:00:00","slug":"jake-spurlock-introducing-placeholders-a-wordpress-plugin-for-ad-wireframing","status":"publish","type":"post","link":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/2025\/12\/01\/jake-spurlock-introducing-placeholders-a-wordpress-plugin-for-ad-wireframing\/","title":{"rendered":"Jake Spurlock: Introducing Placeholders: A WordPress Plugin for Ad Wireframing"},"content":{"rendered":"<p>I\u2019m excited to announce the release of <strong>Placeholders<\/strong>, a new WordPress plugin that makes wireframing and prototyping ad layouts easier than ever. The plugin is now available on <a href=\"https:\/\/wordpress.org\/plugins\/placeholders\/\">WordPress.org<\/a> and ready for production use.<\/p>\n<h2 class=\"wp-block-heading\">The Problem<\/h2>\n<p>If you\u2019ve ever worked on a WordPress site that displays advertising, you know the challenge: during the design and development phase, you need placeholder blocks that accurately represent where ads will appear. You want them to match real ad dimensions, but you don\u2019t want to set up actual ad serving just to see if your layout works.<\/p>\n<p>I found myself repeatedly creating custom HTML blocks or CSS to mock up ad placements while working on various projects. Each time, I\u2019d have to look up IAB standard ad sizes, write the markup, and style the placeholders. It was tedious and repetitive work that felt like it should be solved once and reused everywhere.<\/p>\n<h2 class=\"wp-block-heading\">The Solution<\/h2>\n<p><strong>Placeholders<\/strong> solves this by providing 14 Gutenberg blocks for the most common advertising sizes. Each block is pre-configured with the correct dimensions and provides a clean, wireframe-style placeholder that clearly indicates the ad size and space it will occupy.<\/p>\n<h3 class=\"wp-block-heading\">Supported Ad Sizes<\/h3>\n<p>The plugin includes blocks for all the standard IAB ad sizes:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Leaderboard<\/strong>\u00a0(728\u00d790px)<\/li>\n<li><strong>Medium Rectangle<\/strong>\u00a0(300\u00d7250px)<\/li>\n<li><strong>Wide Skyscraper<\/strong>\u00a0(160\u00d7600px)<\/li>\n<li><strong>Mobile Banner<\/strong>\u00a0(320\u00d750px)<\/li>\n<li><strong>Billboard<\/strong>\u00a0(970\u00d7250px)<\/li>\n<li><strong>Large Rectangle<\/strong>\u00a0(336\u00d7280px)<\/li>\n<li><strong>Half Page<\/strong>\u00a0(300\u00d7600px)<\/li>\n<li><strong>Small Square<\/strong>\u00a0(200\u00d7200px)<\/li>\n<li><strong>Square<\/strong>\u00a0(250\u00d7250px)<\/li>\n<li><strong>Small Rectangle<\/strong>\u00a0(180\u00d7150px)<\/li>\n<li><strong>Vertical Rectangle<\/strong>\u00a0(240\u00d7400px)<\/li>\n<li><strong>Large Leaderboard<\/strong>\u00a0(970\u00d790px)<\/li>\n<li><strong>Portrait<\/strong>\u00a0(300\u00d71050px)<\/li>\n<li><strong>Netboard<\/strong>\u00a0(580\u00d7400px)<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n<h3 class=\"wp-block-heading\">Simple to Use<\/h3>\n<p>Just search for any ad size in the block inserter (e.g., \u201cleaderboard\u201d or \u201cmedium rectangle\u201d), insert the block, and you\u2019re done. No configuration required.<\/p>\n<h3 class=\"wp-block-heading\">Customizable<\/h3>\n<p>Each placeholder supports:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Background color<\/strong>\u00a0customization<\/li>\n<li><strong>Text color<\/strong>\u00a0customization<\/li>\n<li><strong>Alignment options<\/strong>\u00a0(wide and full alignment)<\/li>\n<li><strong>Responsive design<\/strong>\u00a0that works on all screen sizes<\/li>\n<\/ul>\n<h3 class=\"wp-block-heading\">Clean Design<\/h3>\n<p>The placeholders feature a minimalist design that clearly shows:<\/p>\n<ul class=\"wp-block-list\">\n<li>The ad size name<\/li>\n<li>Exact pixel dimensions<\/li>\n<li>A subtle border to indicate the space<\/li>\n<\/ul>\n<p>This makes it easy to visualize your layout without the placeholders dominating the design.<\/p>\n<h2 class=\"wp-block-heading\">Use Cases<\/h2>\n<p><strong>Placeholders<\/strong> is perfect for:<\/p>\n<ol class=\"wp-block-list\">\n<li><strong>Wireframing<\/strong>: Quickly mock up ad placements during the design phase<\/li>\n<li><strong>Development<\/strong>: Reserve space for ads while building the site<\/li>\n<li><strong>Client Presentations<\/strong>: Show clients where ads will appear without setting up ad serving<\/li>\n<li><strong>Testing Layouts<\/strong>: Experiment with different ad placements and sizes<\/li>\n<li><strong>Documentation<\/strong>: Create visual guides showing ad placement options<\/li>\n<\/ol>\n<h2 class=\"wp-block-heading\">Technical Details<\/h2>\n<p>The plugin is built with modern WordPress development practices:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>100% Gutenberg native<\/strong>\u00a0\u2013 Works seamlessly with the block editor<\/li>\n<li><strong>No dependencies<\/strong>\u00a0\u2013 Pure PHP, CSS, and JavaScript<\/li>\n<li><strong>Lightweight<\/strong>\u00a0\u2013 Minimal performance impact<\/li>\n<li><strong>Well-tested<\/strong>\u00a0\u2013 Includes comprehensive unit tests<\/li>\n<li><strong>GPL licensed<\/strong>\u00a0\u2013 Free and open source<\/li>\n<\/ul>\n<p>All blocks are grouped in a dedicated \u201cPlaceholders\u201d category in the block inserter, making them easy to find and use.<\/p>\n<h2 class=\"wp-block-heading\">Installation<\/h2>\n<p>You can install Placeholders in three ways:<\/p>\n<p><strong>From WordPress.org<\/strong> (Recommended)<\/p>\n<ol class=\"wp-block-list\">\n<li>Go to Plugins \u2192 Add New in your WordPress admin<\/li>\n<li>Search for \u201cPlaceholders\u201d<\/li>\n<li>Click Install Now, then Activate<\/li>\n<\/ol>\n<p><strong>From the Plugin Directory<\/strong> Download directly from <a href=\"https:\/\/wordpress.org\/plugins\/placeholders\/\">wordpress.org\/plugins\/placeholders<\/a><\/p>\n<p><strong>From GitHub<\/strong> Clone or download from <a href=\"https:\/\/github.com\/whyisjake\/placeholders\">github.com\/whyisjake\/placeholders<\/a><\/p>\n<h2 class=\"wp-block-heading\">What\u2019s Next<\/h2>\n<p>This is the 1.0 release, and I\u2019ve kept the scope focused on solving one problem well. However, I have ideas for future enhancements:<\/p>\n<ul class=\"wp-block-list\">\n<li>Custom ad size support<\/li>\n<li>Templates for common ad layout patterns<\/li>\n<li>Integration with popular ad management plugins<\/li>\n<li>Dark mode styling options<\/li>\n<\/ul>\n<p>If you have feature requests or find bugs, please <a href=\"https:\/\/github.com\/whyisjake\/placeholders\/issues\">open an issue on GitHub<\/a>.<\/p>\n<h2 class=\"wp-block-heading\">Try It Out<\/h2>\n<p>The plugin is available now on WordPress.org. If you work with ad layouts in WordPress, give it a try and let me know what you think!<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Download<\/strong>:\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/placeholders\/\">wordpress.org\/plugins\/placeholders<\/a><\/li>\n<li><strong>GitHub<\/strong>:\u00a0<a href=\"https:\/\/github.com\/whyisjake\/placeholders\">github.com\/whyisjake\/placeholders<\/a><\/li>\n<\/ul>\n<p>Happy wireframing!<\/p>\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n<p><em>Placeholders is free and open source software, released under the GPL v2 license.<\/em><\/p>","protected":false},"excerpt":{"rendered":"<p>I\u2019m excited to announce the release of Placeholders, a new WordPress plugin that makes wireframing and prototyping ad layouts easier than ever. The plugin is now available on WordPress.org and ready for production use. The Problem If you\u2019ve ever worked on a WordPress site that displays advertising, you know the challenge: during the design and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-166","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/posts\/166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=166"}],"version-history":[{"count":0,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/posts\/166\/revisions"}],"wp:attachment":[{"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/categories?post=166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/tags?post=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}