CINXE.COM
Adding a Banner Image to your WordPress Plugin Page « HardcoreWP
<!DOCTYPE html> <html class="no-js" lang="en-US" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:addthis="http://www.addthis.com/help/api-spec"> <head><script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=7YQSqjSh" charset="utf-8"></script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://hardcorewp.com:80/2013/adding-a-banner-image-to-your-wordpress-plugin-page/","20130213193823","https://web.archive.org/","web","https://web-static.archive.org/_static/", "1360784303"); </script> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=p7PEIJWi" /> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=3PDvdIFv" /> <!-- End Wayback Rewrite JS Include --> <link rel="profile" href="http://gmpg.org/xfn/11"/> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Adding a Banner Image to your WordPress Plugin Page « HardcoreWP</title> <style type="text/css"> pre.pre-code { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -o-pre-wrap; margin-left: 1.5em; line-height: 1.25em; } pre.pre-code code { display: block; padding: 0.25em 0.25em; } </style><link rel="alternate" type="application/rss+xml" title="HardcoreWP 禄 Feed" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/feed/"/> <link rel="alternate" type="application/rss+xml" title="HardcoreWP 禄 Comments Feed" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/comments/feed/"/> <script type="text/javascript">//<![CDATA[ // Google Analytics for WordPress by Yoast v4.2.8 | http://yoast.com/wordpress/google-analytics/ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-173864-16']); _gaq.push(['_trackPageview']); (function () { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://web.archive.org/web/20130213193823/https://ssl' : 'https://web.archive.org/web/20130213193823/http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]></script> <link rel="alternate" type="application/rss+xml" title="HardcoreWP 禄 Adding a Banner Image to your WordPress Plugin Page Comments Feed" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/feed/"/> <link rel="stylesheet" id="bwp-syntax-css" href="https://web.archive.org/web/20130213193823cs_/http://hardcorewp.com/wp-content/plugins/better-wordpress-syntax-based-on-geshi/css/bwp-syntax.css?ver=3.5.1" type="text/css" media="all"/> <link rel="stylesheet" id="tw-bootstrap-css" href="https://web.archive.org/web/20130213193823cs_/http://hardcorewp.com/wp-content/themes/the-bootstrap/css/bootstrap.min.css?ver=2.0.3" type="text/css" media="all"/> <link rel="stylesheet" id="the-bootstrap-css" href="https://web.archive.org/web/20130213193823cs_/http://hardcorewp.com/wp-content/themes/the-bootstrap/style.min.css?ver=0.1" type="text/css" media="all"/> <link rel="stylesheet" id="the-bootstrap-child-css" href="https://web.archive.org/web/20130213193823cs_/http://hardcorewp.com/wp-content/themes/hardcorewp/style.css?ver=3.5.1" type="text/css" media="all"/> <script type="text/javascript" src="https://web.archive.org/web/20130213193823js_/http://hardcorewp.com/wp-includes/js/jquery/jquery.js?ver=1.8.3"></script> <script type="text/javascript" src="https://web.archive.org/web/20130213193823js_/http://hardcorewp.com/wp-content/plugins/better-wordpress-syntax-based-on-geshi/js/bwp-syntax.js?ver=3.5.1"></script> <script type="text/javascript" src="https://web.archive.org/web/20130213193823js_/http://hardcorewp.com/wp-content/plugins/fancy-footnotes/js/script.js?ver=3.5.1"></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://hardcorewp.com/xmlrpc.php?rsd"/> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://hardcorewp.com/wp-includes/wlwmanifest.xml"/> <link rel="prev" title="Submitting your Plugin for Hosting on WordPress.org" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/submitting-your-plugin-for-hosting-on-wordpress-org/"/> <link rel="next" title="Always Omit Closing PHP Tags in WordPress Plugins" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/always-omit-closing-php-tags-in-wordpress-plugins/"/> <meta name="generator" content="WordPress 3.5.1"/> <link rel="canonical" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/"/> <link rel="shortlink" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/?p=534"/> <script type="text/javascript"> (function () { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://web.archive.org/web/20130213193823/http://i.po.st/share/script/post-widget.js#publisherKey=3qvp8i5a7s8i5fdo7i3u'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })(); </script><style type="text/css" id="custom-background-css"> body.custom-background { background-color: #EFEFEF; } </style> <!--[if lt IE 9]> <script src="http://hardcorewp.com/wp-content/themes/the-bootstrap/js/html5shiv.min.js" type="text/javascript"></script> <script src="http://hardcorewp.com/wp-content/themes/the-bootstrap/js/respond.min.js" type="text/javascript"></script> <![endif]--> </head> <body class="single single-post postid-534 single-format-standard custom-background content-sidebar"> <div class="container"> <div id="page" class="hfeed row"> <header id="branding" role="banner" class="span12"> <nav class="subnav clearfix"><ul id="menu-header-menu" class="nav nav-pills pull-right"><li id="menu-item-558" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-558"><a title="Posts Feed for HardcoreWP" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/feed">Feed</a></li> <li id="menu-item-494" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-494"><a title="Hire NewClarity LLC to build your WordPress Plugin" href="https://web.archive.org/web/20130213193823/http://newclarity.net/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-menu/http://newclarity.net']);">Hire Us</a></li> </ul></nav> <hgroup> <h1 id="site-title"> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/" title="HardcoreWP" rel="home"> <span>HardcoreWP</span> </a> </h1> <h2 id="site-description">A Blog about WordPress Plugin Development</h2> </hgroup> <nav id="access" role="navigation"> <h3 class="assistive-text">Main menu</h3> <div class="skip-link"><a class="assistive-text" href="#content" title="Skip to primary content">Skip to primary content</a></div> <div class="skip-link"><a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a></div> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse"> <div class="menu-main-menu-container"><ul id="menu-main-menu" class="nav"><li id="menu-item-509" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-509 dropdown" data-dropdown="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a> <ul class="dropdown-menu"> <li id="menu-item-499" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-499"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/categories/coding-techniques/">Coding Techniques</a></li> <li id="menu-item-501" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-501"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/categories/opinion/">Opinion</a></li> <li id="menu-item-502" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-502"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/categories/publishing-plugins/">Publishing Plugins</a></li> <li id="menu-item-500" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-500"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/categories/tutorials/">Tutorials</a></li> </ul> </li> <li id="menu-item-503" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-503 dropdown" data-dropdown="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">WordPress Hooks <b class="caret"></b></a> <ul class="dropdown-menu"> <li id="menu-item-508" class="menu-item menu-item-type-taxonomy menu-item-object-wordpress-hook menu-item-508"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/hooks/add_filter/">add_filter</a></li> <li id="menu-item-505" class="menu-item menu-item-type-taxonomy menu-item-object-wordpress-hook menu-item-505"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/hooks/init/">init</a></li> <li id="menu-item-506" class="menu-item menu-item-type-taxonomy menu-item-object-wordpress-hook menu-item-506"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/hooks/remove_action/">remove_action</a></li> <li id="menu-item-507" class="menu-item menu-item-type-taxonomy menu-item-object-wordpress-hook menu-item-507"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/hooks/remove_filter/">remove_filter</a></li> <li id="menu-item-504" class="menu-item menu-item-type-taxonomy menu-item-object-wordpress-hook menu-item-504"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/hooks/the_content/">the_content</a></li> </ul> </li> <li id="menu-item-518" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-518 dropdown" data-dropdown="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Tags <b class="caret"></b></a> <ul class="dropdown-menu"> <li id="menu-item-512" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-512"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/action-hooks/">Action Hooks</a></li> <li id="menu-item-517" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-517"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/directories/">Directories</a></li> <li id="menu-item-511" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-511"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/filter-hooks/">Filter Hooks</a></li> <li id="menu-item-516" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-516"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/naming-conventions/">Naming Conventions</a></li> <li id="menu-item-513" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-513"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/plugin-classes/">Plugin Classes</a></li> <li id="menu-item-514" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-514"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/plugin-repository/">Plugin Repository</a></li> <li id="menu-item-515" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-515"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/plugin-submission/">Plugin Submission</a></li> <li id="menu-item-510" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-510"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/singletons/">Singletons</a></li> </ul> </li> </ul></div> <form id="searchform" class="navbar-search pull-right" method="get" action="https://web.archive.org/web/20130213193823/http://hardcorewp.com/"> <label for="s" class="assistive-text hidden">Search</label> <input type="search" class="search-query" name="s" id="s" placeholder="Search"/> </form> </div> </div> </div> </div> </nav><!-- #access --> </header><!-- #branding --> <section id="primary" class="span8"> <div id="content" role="main"> <article id="post-534" class="post-534 post type-post status-publish format-standard hentry category-publishing-plugins tag-banner-images"> <header class="page-header"> <h1 class="entry-title">Adding a Banner Image to your WordPress Plugin Page</h1> <div class="entry-meta"><span class="sep">Posted on </span><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/" title="4:06 am" rel="bookmark"><time class="entry-date" datetime="2013-01-23T04:06:30+00:00" pubdate>2013-Jan-23</time></a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/author/mikeschinkel/" title="View all posts by mikeschinkel" rel="author">mikeschinkel</a></span></span> <span class="sep"> | </span> <span class="comments-link"> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comments" title="Comment on Adding a Banner Image to your WordPress Plugin Page"><strong>17</strong> Replies</a> </span> </div><!-- .entry-meta --> </header><!-- .entry-header --> <div class="entry-content clearfix"> <div class="pw-widget pw-counter-horizontal pw-horizontal" pw:url="http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/" pw:title="Adding a Banner Image to your WordPress Plugin Page"> <a class="pw-button-facebook pw-look-native"></a> <a class="pw-button-twitter pw-look-native"></a> <a class="pw-button-linkedin pw-look-native"></a> <a class="pw-button-googleplus pw-look-native"></a> <a class="pw-button-post-share"></a> </div><p><a href="https://web.archive.org/web/20130213193823/http://make.wordpress.org/core/2011/12/21/been-giving-a-lot-of-thought-to-how/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://make.wordpress.org/core/2011/12/21/been-giving-a-lot-of-thought-to-how/']);">As of December 2011</a> every plugin hosted on WordPress.org has the option to display a visually pleasing banner image at the top of its plugin page. </p> <p>If you are publishing a quick ad-hoc plugin you might not want to go to the effort, but for everyone else, especially plugins that represent a brand we consider a good banner to be <em>a must</em>. Not creating a banner leaves your plugin looking distinctly unprofessional. Besides, it need not be elaborate; a simple colored gradient is better than nothing at all.</p> <h2>Banner Dimensions and Font</h2> <p>The basic plugin banner is 772x250 pixels wide-by-tall and it will be overlaid with the plugin's name in 30px Helvetica Neue font. The rounded black box containing the plugin name will be aligned 30px from the banner's left margin and 24px from it's bottom margin. You can see this in the following annotated white banner image:</p> <figure id="attachment_527" class="wp-caption thumbnail alignnone" style="width: 599px;"> <a class="" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/annotated-plugin-banner/" rel="attachment wp-att-527"><img src="https://web.archive.org/web/20130213193823im_/http://hardcorewp.com/wp-content/uploads/2013/01/annotated-plugin-banner.png" alt="Annotated WordPress Plugin Banner with Dimensions and Font Size and Family" width="599" height="328" class="size-full wp-image-527"/></a> <figcaption class="wp-caption-text">Annotated WordPress Plugin Banner with Dimensions and Font Size and Family</figcaption> </figure> <h2>Design with Plugin Name in Mind</h2> <p>Be aware that WordPress.org will overlay your plugin name on top of your banner. This mean you <em>should not</em> add your plugin's name to your banner images but you <em>should</em> design the banner to accommodate the name being overlaid.</p> <p>Note the dimensions and font in the annotated banner image above. You get a left margin of 30px and a bottom margin of 24px and then the length of your plugin name at 30px using Helvetica Neue determines how much space you need to reserve for your plugin name.</p> <h3>Use Chrome's "Inspect Element" to Preview</h3> <p>Given that the plugin name overlays your image it can be a real pain to get your banner design <em>"just right"</em> so we came up with a way to use Chrome's <em>"Inspect Element"</em> to see what it will look like. Using Chrome navigate to any plugin page that has a banner on WordPress.org and right-click on the banner; you'll get a menu option to select the element inspector:</p> <figure id="attachment_531" class="wp-caption thumbnail alignnone" style="width: 600px;"> <a class="" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/chrome-inspect-element/" rel="attachment wp-att-531"><img src="https://web.archive.org/web/20130213193823im_/http://hardcorewp.com/wp-content/uploads/2013/01/chrome-inspect-element.png" alt="Screenshot showing Chrome's "Inspect Element" Developer Tool" width="600" height="449" class="size-full wp-image-531"/></a> <figcaption class="wp-caption-text">Screenshot showing Chrome's "Inspect Element" Developer Tool</figcaption> </figure> <p>Then upload your banner to a live site somewhere on the web via FTP or other method <em>(note our screenshot below shows using a local <code>file:///</code> reference, which does not work.)</em> </p> <p>Next add a CSS select for the <code>#plugin-title</code> element and add a CSS <code>background-image</code> property to reference a local copy of your banner:</p> <pre><code>#plugin-title { background-image: url(http://example.com/path/to/where/banner/can/be/found/your-banner-772x250.png); } </code></pre> <figure id="attachment_532" class="wp-caption thumbnail alignnone" style="width: 600px;"> <a class="" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/swapping-out-the-banner/" rel="attachment wp-att-532"><img src="https://web.archive.org/web/20130213193823im_/http://hardcorewp.com/wp-content/uploads/2013/01/swapping-out-the-banner.png" alt="Swapping Out the Banner for your Own on a WordPress.org Plugin Page" width="600" height="449" class="size-full wp-image-532"/></a> <figcaption class="wp-caption-text">Swapping Out the Banner for your Own on a WordPress.org Plugin Page</figcaption> </figure> <p>The last step is to right-click on the exiting plugin name to have Chrome select its HTML element in the HTML viewer and then you can double click on the inner text of the <code><h2></code> element change the plugin's name so you can preview your own plugin's name:</p> <figure id="attachment_533" class="wp-caption thumbnail alignnone" style="width: 600px;"> <a class="" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/previewing-plugin-name-on-banner/" rel="attachment wp-att-533"><img src="https://web.archive.org/web/20130213193823im_/http://hardcorewp.com/wp-content/uploads/2013/01/previewing-plugin-name-on-banner.png" alt="Previewing your Plugin's Banner and Name as it will Appear" width="600" height="449" class="size-full wp-image-533"/></a> <figcaption class="wp-caption-text">Previewing your Plugin's Banner and Name as it will Appear</figcaption> </figure> <p>There is supposedly a method that allows you to <a href="https://web.archive.org/web/20130213193823/http://wordpress.org/extend/plugins/about/faq/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://wordpress.org/extend/plugins/about/faq/']);">add <code>?banner_url=<url-to-your-banner></code> to the end of your own plugin's URL</a> but I was never able to get it to work. Besides, the browser approach is more flexible so why not just use it?</p> <h2>Optionally Add High DPI/<a href="https://web.archive.org/web/20130213193823/http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/']);">Retina Images</a></h2> <p><a href="https://web.archive.org/web/20130213193823/http://make.wordpress.org/core/2012/07/04/fun-with-high-dpi-displays/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://make.wordpress.org/core/2012/07/04/fun-with-high-dpi-displays/']);">In July 2012</a> WordPress.org also added <em>optional</em> support for high DPI <em>(a.k.a. "<a href="https://web.archive.org/web/20130213193823/http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/']);"><em>Retina</em></a>")</em> images at a dimension of 1544x500 pixels. If you provide a high DPI image WordPress.org will serve it instead when it senses that the device viewing is a high DPI device such as an <a href="https://web.archive.org/web/20130213193823/http://www.apple.com/macbook-pro/features-retina/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://www.apple.com/macbook-pro/features-retina/']);">Apple MacBook Pro with Retina Display</a>. </p> <figure id="attachment_573" class="wp-caption thumbnail alignnone" style="width: 770px;"> <a class="" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/non-retina-banner/" rel="attachment wp-att-573"><img src="https://web.archive.org/web/20130213193823im_/http://hardcorewp.com/wp-content/uploads/2013/01/non-retina-banner-1024x415.png" alt="Banner Image for in Normal DPI a.k.a. Non-Retina Format" width="770" height="312" class="size-large wp-image-573"/></a> <figcaption class="wp-caption-text">Banner image for <a href="https://web.archive.org/web/20130213193823/http://wordpress.org/extend/plugins/wordpress-23-related-posts-plugin/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://wordpress.org/extend/plugins/wordpress-23-related-posts-plugin/']);" title="WordPress Related Posts Plugin" target="_blank">WordPress Related Posts plugin</a> in normal DPI a.k.a. non-Retina 722x250px format</figcaption> </figure> <figure id="attachment_574" class="wp-caption thumbnail alignnone" style="width: 770px;"> <a class="" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/retina-banner/" rel="attachment wp-att-574"><img src="https://web.archive.org/web/20130213193823im_/http://hardcorewp.com/wp-content/uploads/2013/01/retina-banner-1024x407.png" alt="Plugin Banner in High-DPI a.k.a. Retina Format" width="770" height="306" class="size-large wp-image-574"/></a> <figcaption class="wp-caption-text">Banner image for <a href="https://web.archive.org/web/20130213193823/http://wordpress.org/extend/plugins/wordpress-23-related-posts-plugin/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://wordpress.org/extend/plugins/wordpress-23-related-posts-plugin/']);" title="WordPress Related Posts Plugin" target="_blank">WordPress Related Posts plugin</a> in high-DPI a.k.a. Retina 1544x500px format<br/></figcaption> </figure> <p>If you are going to provide a High DPI image it's probably best to design at the larger size and then also save the image to the smaller size. However, since we are a plugin coding blog and not a design techniques blog we might not be giving you the best advice here; consult your favorite web designer for best practices instead.</p> <h2>Save in Either .PNG or .JPG Format</h2> <p>Choose one of these two (2) image formats for your banner. Again we are not a design techniques blog but I think the rule of thumb is to use .JPG for photos and for everything else use .PNG. But again, consult your favorite web designer:</p> <figure id="attachment_538" class="wp-caption thumbnail alignnone" style="width: 420px;"> <a class="" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/jpg-vs-png/" rel="attachment wp-att-538"><img src="https://web.archive.org/web/20130213193823im_/http://hardcorewp.com/wp-content/uploads/2013/01/jpg-vs-png.png" alt="PNG vs. JPEG by Louis Brandy" width="420" height="450" class="size-full wp-image-538"/></a> <figcaption class="wp-caption-text">PNG vs. JPEG: The <a href="https://web.archive.org/web/20130213193823/http://lbrandy.com/blog/2008/10/my-first-and-last-webcomic/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://lbrandy.com/blog/2008/10/my-first-and-last-webcomic/']);">First and Last Webcomic</a> by <a href="https://web.archive.org/web/20130213193823/https://twitter.com/lbrandy" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://twitter.com/lbrandy']);">Louis Brandy</a></figcaption> </figure> <h2>Keep the Design Simple</h2> <p>There is <a href="https://web.archive.org/web/20130213193823/http://english.stackexchange.com/questions/38837/where-does-this-translation-of-saint-exuperys-quote-on-design-come-from" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://english.stackexchange.com/questions/38837/where-does-this-translation-of-saint-exuperys-quote-on-design-come-from']);">a well-known aphorism</a> that goes something like this:</p> <blockquote> <p><em>"Perfection is finally attained not when there is no longer anything to add but when there is no longer anything to take away."</em></p> </blockquote> <p>We believe the same is true for plugin banner design; the more you add the worse your results will be. Most visitors will only spend a split-second of their attention to decide it they want to learn more about a plugin so we sure not to overwhelm them with complexity in your graphic. </p> <p>So plugin banners should only attempt to capture the most important aspect of the plugin in an easy-to-comprehend visual and not be used as a menu of features. If the banner can capture the visitor's attention then they are more likely to actually read about the features and benefits in the description below. </p> <p>We think the <a href="https://web.archive.org/web/20130213193823/http://wordpress.org/extend/plugins/tumblr-importer/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://wordpress.org/extend/plugins/tumblr-importer/']);">Tumbler Importer</a> is <strong>a good example of this done right</strong> <em>(except they could have done a better job of reserving "white space" around the plugin name):</em></p> <figure id="attachment_530" class="wp-caption thumbnail alignnone" style="width: 599px;"> <a class="" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/tumbler-importer-banner/" rel="attachment wp-att-530"><img src="https://web.archive.org/web/20130213193823im_/http://hardcorewp.com/wp-content/uploads/2013/01/tumbler-importer-banner.png" alt="Banner Image for the Tumbler Importer WordPress Plugin" width="599" height="317" class="size-full wp-image-530"/></a> <figcaption class="wp-caption-text">Banner Image for the <a href="https://web.archive.org/web/20130213193823/http://wordpress.org/extend/plugins/tumblr-importer/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://wordpress.org/extend/plugins/tumblr-importer/']);" title="Banner Image for the Tumbler Importer WordPress Plugin" target="_blank">Tumbler Importer WordPress Plugin</a></figcaption> </figure> <h2>Three Example Banners</h2> <p>No such post would be complete without three examples so we selected several plugins we developed for clients to showcase. Note that in all cases our clients had their own designers design the banners, we just built the plugins for them:</p> <figure id="attachment_521" class="wp-caption thumbnail alignnone" style="width: 600px;"> <a class="" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/pardot-banner/" rel="attachment wp-att-521"><img src="https://web.archive.org/web/20130213193823im_/http://hardcorewp.com/wp-content/uploads/2013/01/pardot-banner.png" alt="Banner Image for Pardot's Plugin Page on WordPress.org" width="600" height="331" class="size-full wp-image-521"/></a> <figcaption class="wp-caption-text">Banner Image for <a href="https://web.archive.org/web/20130213193823/http://wordpress.org/extend/plugins/pardot/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://wordpress.org/extend/plugins/pardot/']);" title="Banner Image for Pardot's Plugin Page on WordPress.org" target="_blank">Pardot's Plugin Page on WordPress.org</a></figcaption> </figure> <figure id="attachment_523" class="wp-caption thumbnail alignnone" style="width: 600px;"> <a class="" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/content-ad-banner/" rel="attachment wp-att-523"><img src="https://web.archive.org/web/20130213193823im_/http://hardcorewp.com/wp-content/uploads/2013/01/content.ad-banner.png" alt="Banner Image for Content.ad's Plugin Page on WordPress.org" width="600" height="317" class="size-full wp-image-523"/></a> <figcaption class="wp-caption-text">Banner Image for <a href="https://web.archive.org/web/20130213193823/http://wordpress.org/extend/plugins/contentad/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://wordpress.org/extend/plugins/contentad/']);" title="Banner Image for Content.ad's Plugin Page on WordPress.org" target="_blank">Content.ad's Plugin Page on WordPress.org</a></figcaption> </figure> <figure id="attachment_528" class="wp-caption thumbnail alignnone" style="width: 599px;"> <a class="" href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/revostock-gallery-banner/" rel="attachment wp-att-528"><img src="https://web.archive.org/web/20130213193823im_/http://hardcorewp.com/wp-content/uploads/2013/01/revostock-gallery-banner.png" alt="Banner Image for Revostock's Media Gallery Plugin Page on WordPress.org" width="599" height="315" class="size-full wp-image-528"/></a> <figcaption class="wp-caption-text">Banner Image for <a href="https://web.archive.org/web/20130213193823/http://wordpress.org/extend/plugins/revostock-gallery/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://wordpress.org/extend/plugins/revostock-gallery/']);" title="Banner Image for Revostock's Media Gallery Plugin Page on WordPress.org" target="_blank">Revostock's Media Gallery Plugin Page on WordPress.org</a></figcaption> </figure> <p><a name="update"></a></p> <h2>Update</h2> <p>So <a href="https://web.archive.org/web/20130213193823/https://twitter.com/scottreilly" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://twitter.com/scottreilly']);">Scott Reilly</a> (<a href="https://web.archive.org/web/20130213193823/https://twitter.com/coffee2code/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://twitter.com/coffee2code/']);">@coffee2code</a>) <a href="https://web.archive.org/web/20130213193823/https://twitter.com/coffee2code/status/294135521633005569" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://twitter.com/coffee2code/status/294135521633005569']);">tweeted</a> that he was <em>"surprised we didn't include the few basic nuts&bolts, i.e. banners go in assets/ and image filename syntax."</em> Fair point.</p> <p>The reason we didn't include those things because we plan to write other posts where we drill down into the technical aspects of actually publishing plugins via Subversion <em>(SVN)</em> so we didn't do it here. <em>And honestly it was late, I'd spent all day writing the post, still had other work to do and so I just wanted to click "Publish" and be done with it. <img src="https://web.archive.org/web/20130213193823im_/http://hardcorewp.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> </em></p> <p>Still, after thinking about it this post does feel incomplete without that information so I decided to go ahead and update it since I don't know how long it will be before we can write the follow up post. Also <a href="https://web.archive.org/web/20130213193823/http://ottopress.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://ottopress.com/']);">Otto</a> came along and <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-541">mentioned</a> as few things I thought it would be good to add in the body of the post.</p> <h3>Banner File Naming</h3> <p>Banner image files need to be saved with specific names, respectively:</p> <ul> <li><code>banner-772x250.png</code> or <code>banner-772x250.jpg</code>, and</li> <li><code>banner-1544x500.png</code> or <code>banner-1544x500.jpg</code></li> </ul> <p><a name="file-location"></a></p> <h3>Where to Store Banner Files</h3> <p>If you don't already know how to publish a plugin using Subversion then you can wait your our tutorial or better yet look for another tutorial on the web to explain using SVN to publish your plugin, like <a href="https://web.archive.org/web/20130213193823/http://wp.tutsplus.com/tutorials/plugins/the-definitive-check-list-for-publishing-your-wordpress-plugin/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://wp.tutsplus.com/tutorials/plugins/the-definitive-check-list-for-publishing-your-wordpress-plugin/']);">this one</a> by <a href="https://web.archive.org/web/20130213193823/https://twitter.com/jalaine" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://twitter.com/jalaine']);">@jalaine</a>.</p> <p>If you do know how you use Subversion for your plugin but don't yet know how to get the banner to work then here's how. In the root directory for your plugin you'll have these three directories:</p> <ul> <li><code>branches</code></li> <li><code>tags</code></li> <li><code>trunk</code></li> </ul> <p>Add a 4th directory called <code>assets</code> and that's where you commit your banner files from up to the plugin repository's SVN server. This is also where screenshots go now, btw.</p> <p><strong>Important note:</strong> It's really easy to get confused and think you need to create an <code>assets</code> directory in the root of your plugin, especially if you are using GitHub to maintain your plugin's development history. By nature you won't have an assets directory above your plugin directory in a Git repository unless you proactively structure it that way which wouldn't make sense for people who might want to use your plugin directly from GitHub. </p> <p>So, be sure to put your assets directory as a top level directory for SVN:</p> <ul> <li><strong><code>assets</code></strong></li> <li><code>branches</code></li> <li><code>tags</code></li> <li><code>trunk</code></li> </ul> <h3>Keep Banner File Sizes Small</h3> <p>As <a href="https://web.archive.org/web/20130213193823/http://ottopress.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://ottopress.com/']);">Otto</a> mentioned, keep your images small. WordPress.org offers free plugin hosting so don't look a gift horse in the mouth, and you want your own plugin page to load fast anyway. And if you are using .PNG files be sure to shrink them with something like <a href="https://web.archive.org/web/20130213193823/http://punypng.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://punypng.com']);">PunyPNG</a> <em>(thanks <a href="https://web.archive.org/web/20130213193823/http://make.wordpress.org/core/2011/12/21/been-giving-a-lot-of-thought-to-how/#comment-5552" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://make.wordpress.org/core/2011/12/21/been-giving-a-lot-of-thought-to-how/#comment-5552']);"><em>@photomatt</em></a>.)</em></p> <h3>And Beware the Multiplication Sign</h3> <p>As Scott Reilly <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-550" title="Scott Reilly explains the issue with the multiplication sign">commented below</a>, be careful not to cut-and-paste banner file names from WordPress blogs that contain the multiplication sign <em>(<code>脳</code>)</em> instead of what you really want which is is the lowercase 'X' <em>(<code>x</code>)</em>. Anytime WordPress sees two numbers separated by an <code>x</code> — i.e. <code>772x250</code> — it does you the "favor" of converting to a multiplication sign — i.e. <code>772脳250</code> — and that doesn't work for a banner image file name. </p> <p>But thanks to Scott we've made sure our post has banner file names that are safe to copy-and-paste.</p> <h2>Summary</h2> <p>So in summary:</p> <ul> <li>Design a Banner Image <ul> <li>Design as 1544x500 pixels for High DPI/Retina</li> <li>Also save as 772x250 pixels</li> </ul> </li> <li>Accommodate the Plugin Name <ul> <li>Uses 30px Helvetica Neue </li> <li>With a 30px left margin and 24px bottom margin</li> <li>Use Google's Chrome to Preview</li> </ul> </li> <li>Save in One of: <ul> <li>.JPG for Photos</li> <li>.PNG for Anything Else</li> </ul> </li> <li>Keep the Design Simple <ul> <li>Focus Visuals on One Key Aspect</li> </ul> </li> <li>About Banner Files <ul> <li>Name the Files Correctly</li> <li>Store the Files in the Right Place</li> <li>Keep the Files Small</li> <li>And use a real lowercase <code>x</code></li> </ul> </li> </ul> <p><a name="related-links"></a></p> <h2>Related Links and Posts</h2> <p>We just went in-depth about the banner but didn't cover how to get your banner actually published. We didn't cover that because we plan a future post to cover all the technical aspects of published plugins. But until we do you might have questions we didn't answer so we thought it would be nice to give you some other links that might answer them for you:</p> <ol> <li> <p><a href="https://web.archive.org/web/20130213193823/http://make.wordpress.org/plugins/2012/09/13/last-december-we-added-header-images-to-the/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://make.wordpress.org/plugins/2012/09/13/last-december-we-added-header-images-to-the/']);">Last December, we added header images to the top of plugin screens. Since then, we鈥檝e made more changes to the plugin directory and started supporting HiDPI images for those plugin headers as well.</a> by <a href="https://web.archive.org/web/20130213193823/http://ottopress.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://ottopress.com']);">Otto</a> (<a href="https://web.archive.org/web/20130213193823/http://twitter.com/otto42" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://twitter.com/otto42']);">@Otto42</a>) on Make WordPress Plugins (2012)</p> </li> <li> <p><a href="https://web.archive.org/web/20130213193823/http://catn.com/wordpress/add-banner-to-your-wordpress-org-plugin-page/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://catn.com/wordpress/add-banner-to-your-wordpress-org-plugin-page/']);">Add Banner to your WordPress.org Plugin Page</a> by <a href="https://web.archive.org/web/20130213193823/http://www.linkedin.com/in/neilsweeney" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://www.linkedin.com/in/neilsweeney']);">Neil Sweeney</a> (<a href="https://web.archive.org/web/20130213193823/https://twitter.com/WolfieZero/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://twitter.com/WolfieZero/']);">@WolfieZero</a>) (2012)</p> </li> <li> <p><a href="https://web.archive.org/web/20130213193823/http://wpcandy.com/reports/plugin-authors-can-now-add-custom-header-images-on-dot-org/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://wpcandy.com/reports/plugin-authors-can-now-add-custom-header-images-on-dot-org/']);">Plugin authors can now add custom header images to their WordPress.org listings</a> by Ryan Imel (<a href="https://web.archive.org/web/20130213193823/http://twitter.com/ryanimel" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://twitter.com/ryanimel']);">@ryanimel</a>) on <a href="https://web.archive.org/web/20130213193823/http://wpcandy.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://wpcandy.com']);">WPCandy</a> (2011)</p> </li> <li> <p><a href="https://web.archive.org/web/20130213193823/http://www.velvetblues.com/web-development-blog/add-custom-banner-image-wordpress-plugin-page/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://www.velvetblues.com/web-development-blog/add-custom-banner-image-wordpress-plugin-page/']);">How to Add a Custom Banner Image to your WordPress.org Plugin Page</a> on <a href="https://web.archive.org/web/20130213193823/http://www.velvetblues.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://www.velvetblues.com']);">velvet blues</a> (<a href="https://web.archive.org/web/20130213193823/http://twitter.com/velvetblues" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://twitter.com/velvetblues']);">@velvetblues</a>) (2011)</p> </li> <li> <p><a href="https://web.archive.org/web/20130213193823/http://www.gravitationalfx.com/how-to-add-a-header-image-to-your-wordpress-org-plugins/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://www.gravitationalfx.com/how-to-add-a-header-image-to-your-wordpress-org-plugins/']);">How to Add a Header Image to your WordPress.org Plugins</a> on <a href="https://web.archive.org/web/20130213193823/http://gravitationalfx.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://gravitationalfx.com']);">gravitationalfx.com</a> (<a href="https://web.archive.org/web/20130213193823/http://twitter.com/gravitationalfx" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://twitter.com/gravitationalfx']);">@gravitationalfx</a>) (2011)</p> </li> <li> <p><a href="https://web.archive.org/web/20130213193823/http://make.wordpress.org/core/2011/12/21/been-giving-a-lot-of-thought-to-how/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://make.wordpress.org/core/2011/12/21/been-giving-a-lot-of-thought-to-how/']);">Been giving a lot of thought to how to give plugin authors more control over their plugin pages. In WordPress custom headers have been hugely beneficial in people鈥檚 ability to make a theme their own without having to be a designer. (And designers can make them really sing.)</a> by <a href="https://web.archive.org/web/20130213193823/http://ma.tt/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://ma.tt']);">Matt Mullenweg</a> (<a href="https://web.archive.org/web/20130213193823/http://twitter.com/photomatt" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-article/http://twitter.com/photomatt']);">@photomatt</a>) on Make WordPress Plugins (2011)</p> </li> </ol> <h2>Did We Miss Anything?</h2> <p>Got any suggestions? Things we should have mentioned? Let us know in the comments.</p> <div class="addthis_toolbox addthis_default_style " addthis:url="http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/" addthis:title="Adding a Banner Image to your WordPress Plugin Page "><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="cat-links block">Posted in <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/categories/publishing-plugins/" title="View all posts in Publishing Plugins" rel="category tag">Publishing Plugins</a>.</span><span class="tag-links block">Tagged <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/banner-images/" rel="tag">Banner Images</a>.</span> </footer><!-- .entry-footer --> </article><!-- #post-534 --> <div id="comments"> <h2 id="comments-title"> 17 thoughts on “<span>Adding a Banner Image to your WordPress Plugin Page</span>” </h2> <ol class="commentlist unstyled"> <li id="li-comment-528" class="comment even thread-even depth-1"> <article id="comment-528" class="comment row"> <div class="comment-author-avatar span1"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://1.gravatar.com/avatar/312a558dc3619f40b429d60b6fde9ee1?s=70&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span7"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://www.carriedils.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://www.carriedils.com']);" rel="external nofollow" class="url">Carrie Dils</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-528"><time pubdate datetime="2013-01-23T11:34:29+00:00">2013-Jan-23 at 11:34 am</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span7"> <p>Great tut! I just created my first banner image for a plugin a couple of weeks ago (<a href="https://web.archive.org/web/20130213193823/http://wordpress.org/extend/plugins/click-to-copy-grab-box/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-comment/http://wordpress.org/extend/plugins/click-to-copy-grab-box/']);" rel="nofollow">http://wordpress.org/extend/plugins/click-to-copy-grab-box/</a>). I had the dimensions, but was guessing at the rest. I like your method of previewing the plugin title.</p> <a class="comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/?replytocom=528#respond" onclick="return addComment.moveForm("comment-528", "528", "respond", "534")">Reply <span>↓</span></a> </div><!-- .comment-content --> </article><!-- #comment-528 .comment --> <ul class="children"> <li id="li-comment-536" class="comment byuser comment-author-mikeschinkel bypostauthor odd alt depth-2"> <article id="comment-536" class="comment row"> <div class="comment-author-avatar span1 offset1"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://0.gravatar.com/avatar/c988a2da603a19e827a39ab4d9186909?s=70&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span6"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://about.me/mikeschinkel" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://about.me/mikeschinkel']);" rel="external nofollow" class="url">mikeschinkel</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-536"><time pubdate datetime="2013-01-23T16:11:09+00:00">2013-Jan-23 at 4:11 pm</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span6"> <p>Hi @Carrie, </p> <p>Thanks for your comment. I really like what you’ve done with the banner, especially the image; I think that works really well. </p> <p>However I do have a few suggestions about the wording which gave me the idea to do a <em>“Banner Content Makeover”</em>. If you wouldn’t mind I’d like to do a quick post showing how we would change it, but I don’t want to put you on the spot and showcase your work if you’d rather we not.</p> <p>-Mike</p> <a class="comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/?replytocom=536#respond" onclick="return addComment.moveForm("comment-536", "536", "respond", "534")">Reply <span>↓</span></a> </div><!-- .comment-content --> </article><!-- #comment-536 .comment --> <ul class="children"> <li id="li-comment-537" class="comment even depth-3"> <article id="comment-537" class="comment row"> <div class="comment-author-avatar span1 offset2"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://1.gravatar.com/avatar/312a558dc3619f40b429d60b6fde9ee1?s=70&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span5"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://www.carriedils.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://www.carriedils.com']);" rel="external nofollow" class="url">Carrie Dils</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-537"><time pubdate datetime="2013-01-23T16:13:52+00:00">2013-Jan-23 at 4:13 pm</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span5"> <p>Hey Mike,<br/> I’d be glad for your feedback! The plugin was created by David Wang (<a href="https://web.archive.org/web/20130213193823/http://twitter.com/blogjunkie" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-comment/http://twitter.com/blogjunkie']);" title="David Wang on Twitter" target="_blank" rel="nofollow">@blogjunkie</a>), so I’d feel better if we had his permission. I’d certainly be interested in your comments.</p> <p>Cheers,<br/> Carrie<br/> p.s. I’ll shoot David a message so he can chime in.</p> <a class="comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/?replytocom=537#respond" onclick="return addComment.moveForm("comment-537", "537", "respond", "534")">Reply <span>↓</span></a> </div><!-- .comment-content --> </article><!-- #comment-537 .comment --> <ul class="children"> <li id="li-comment-538" class="comment byuser comment-author-mikeschinkel bypostauthor odd alt depth-4"> <article id="comment-538" class="comment row"> <div class="comment-author-avatar span1 offset3"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://0.gravatar.com/avatar/c988a2da603a19e827a39ab4d9186909?s=70&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span4"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://about.me/mikeschinkel" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://about.me/mikeschinkel']);" rel="external nofollow" class="url">mikeschinkel</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-538"><time pubdate datetime="2013-01-23T16:16:40+00:00">2013-Jan-23 at 4:16 pm</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span4"> <p>Hi @Carrie,</p> <p>Good deal. I’m thinking 3 specific things to tighten up the wording and make it easier for people to recognize it’s value at a glance. Looking forward to <em>“meeting”</em> David.</p> <a class="comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/?replytocom=538#respond" onclick="return addComment.moveForm("comment-538", "538", "respond", "534")">Reply <span>↓</span></a> </div><!-- .comment-content --> </article><!-- #comment-538 .comment --> </li> </ul> </li> </ul> </li> </ul> </li> <li id="li-comment-529" class="comment even thread-odd thread-alt depth-1"> <article id="comment-529" class="comment row"> <div class="comment-author-avatar span1"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://1.gravatar.com/avatar/b633452832ed5613b18a4432b0149ae9?s=70&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span7"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://unserkaiser.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://unserkaiser.com']);" rel="external nofollow" class="url">Kaiser</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-529"><time pubdate datetime="2013-01-23T11:53:32+00:00">2013-Jan-23 at 11:53 am</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span7"> <p>Great article, but yes, one thing is missing: How do we get this into our SVN repo? And how would we do that from within our local git repo (as we develop on GitHub mainly – the official repo isn’t for development, according to Otto/official sources).</p> <a class="comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/?replytocom=529#respond" onclick="return addComment.moveForm("comment-529", "529", "respond", "534")">Reply <span>↓</span></a> </div><!-- .comment-content --> </article><!-- #comment-529 .comment --> <ul class="children"> <li id="li-comment-542" class="comment byuser comment-author-mikeschinkel bypostauthor odd alt depth-2"> <article id="comment-542" class="comment row"> <div class="comment-author-avatar span1 offset1"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://0.gravatar.com/avatar/c988a2da603a19e827a39ab4d9186909?s=70&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span6"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://about.me/mikeschinkel" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://about.me/mikeschinkel']);" rel="external nofollow" class="url">mikeschinkel</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-542"><time pubdate datetime="2013-01-23T19:41:43+00:00">2013-Jan-23 at 7:41 pm</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span6"> <p>Hi @Kaiser,</p> <p>Thanks for visiting and for your comments. Yes, I didn’t cover SVN or Git because I was planning to cover those details in a future post. Since I’ve returned to blogging less than a month ago I’m realizing just how hard it is to decided on the scope of a post and also how to handle the inevitable comments from people who rightly mention that I didn’t cover something when they don’t know I’m planning to cover it in the near future.</p> <p>Anyway, I added some related links to this post and might even post a quick update that at least mentions the file structure.</p> <a class="comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/?replytocom=542#respond" onclick="return addComment.moveForm("comment-542", "542", "respond", "534")">Reply <span>↓</span></a> </div><!-- .comment-content --> </article><!-- #comment-542 .comment --> <ul class="children"> <li id="li-comment-546" class="comment even depth-3"> <article id="comment-546" class="comment row"> <div class="comment-author-avatar span1 offset2"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://1.gravatar.com/avatar/b633452832ed5613b18a4432b0149ae9?s=70&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span5"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://unserkaiser.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://unserkaiser.com']);" rel="external nofollow" class="url">Kaiser</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-546"><time pubdate datetime="2013-01-23T20:15:30+00:00">2013-Jan-23 at 8:15 pm</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span5"> <p>Hey @Mike,</p> <p>didn’t know that and just responded to “Things we should have mentioned?”. We just published a plugin to the repo but couldn’t get SVN integrated to Git seamlessly and therefore have no banner at the moment. Thought it might be a good opportunity to ask for further <em>Clarity</em><em>fication.</em></p> <a class="comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/?replytocom=546#respond" onclick="return addComment.moveForm("comment-546", "546", "respond", "534")">Reply <span>↓</span></a> </div><!-- .comment-content --> </article><!-- #comment-546 .comment --> <ul class="children"> <li id="li-comment-547" class="comment byuser comment-author-mikeschinkel bypostauthor odd alt depth-4"> <article id="comment-547" class="comment row"> <div class="comment-author-avatar span1 offset3"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://0.gravatar.com/avatar/c988a2da603a19e827a39ab4d9186909?s=70&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span4"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://about.me/mikeschinkel" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://about.me/mikeschinkel']);" rel="external nofollow" class="url">mikeschinkel</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-547"><time pubdate datetime="2013-01-23T20:27:43+00:00">2013-Jan-23 at 8:27 pm</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span4"> <p>@Kaiser,</p> <p>LOL, good point! As for Git we’ve been using Mercurial for our private repositories so I’m going to have to do research to be able to write about GitHub. On the other hand I’m started to put a lot of code up on GitHub at our <a href="https://web.archive.org/web/20130213193823/http://github.com/newclarity" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-comment/http://github.com/newclarity']);" rel="nofollow">NewClarity GitHub account</a> so I’m becoming much better acquainted with Git. On the other hand, I still like Mercurial much better.</p> <a class="comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/?replytocom=547#respond" onclick="return addComment.moveForm("comment-547", "547", "respond", "534")">Reply <span>↓</span></a> </div><!-- .comment-content --> </article><!-- #comment-547 .comment --> </li> <li id="li-comment-548" class="comment byuser comment-author-mikeschinkel bypostauthor even depth-4"> <article id="comment-548" class="comment row"> <div class="comment-author-avatar span1 offset3"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://0.gravatar.com/avatar/c988a2da603a19e827a39ab4d9186909?s=70&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span4"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://about.me/mikeschinkel" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://about.me/mikeschinkel']);" rel="external nofollow" class="url">mikeschinkel</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-548"><time pubdate datetime="2013-01-23T21:47:47+00:00">2013-Jan-23 at 9:47 pm</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span4"> <p>@Kaiser – Check out the <strong>“Important note:”</strong> in the <a href="#file-location" rel="nofollow">update about file locations</a>, it might be the answer you are looking for.</p> <a class="comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/?replytocom=548#respond" onclick="return addComment.moveForm("comment-548", "548", "respond", "534")">Reply <span>↓</span></a> </div><!-- .comment-content --> </article><!-- #comment-548 .comment --> <ul class="children"> <li id="li-comment-559" class="comment odd alt depth-5"> <article id="comment-559" class="comment row"> <div class="comment-author-avatar span1 offset4"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://0.gravatar.com/avatar/0994d5e2e158a24ba8017c2525d78263?s=70&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span3"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://ottopress.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://ottopress.com/']);" rel="external nofollow" class="url">Otto</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-559"><time pubdate datetime="2013-01-24T07:03:55+00:00">2013-Jan-24 at 7:03 am</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span3"> <p>Note: For new plugins created now, the plugin system will auto-create the assets directory for you. Older plugins won’t have this directory, but when I put the new screenshots handling code in, I changed it to create this directory on new plugins by default.</p> </div><!-- .comment-content --> </article><!-- #comment-559 .comment --> </li> <li id="li-comment-561" class="comment even depth-5"> <article id="comment-561" class="comment row"> <div class="comment-author-avatar span1 offset4"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://1.gravatar.com/avatar/b633452832ed5613b18a4432b0149ae9?s=70&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span3"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://unserkaiser.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://unserkaiser.com']);" rel="external nofollow" class="url">Kaiser</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-561"><time pubdate datetime="2013-01-24T07:39:41+00:00">2013-Jan-24 at 7:39 am</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span3"> <p>@Otto Any hint or guidance from you on how to integrate the assets with an (already in use) Git repo? Currently we only got it inside an `~/assets` subdir, but no idea how to “map” that to the official repo / seamlessily integrate that via git-svn.</p> </div><!-- .comment-content --> </article><!-- #comment-561 .comment --> </li> <li id="li-comment-578" class="comment byuser comment-author-mikeschinkel bypostauthor odd alt depth-5"> <article id="comment-578" class="comment row"> <div class="comment-author-avatar span1 offset4"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://0.gravatar.com/avatar/c988a2da603a19e827a39ab4d9186909?s=70&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span3"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://about.me/mikeschinkel" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://about.me/mikeschinkel']);" rel="external nofollow" class="url">mikeschinkel</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-578"><time pubdate datetime="2013-01-24T22:11:30+00:00">2013-Jan-24 at 10:11 pm</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span3"> <p>@Kaiser – We’re developing a command line tool to do that work for us. It’s a lot more complicated than it sounds though, hence why we are still developing it vs. having already finished it. <img src="https://web.archive.org/web/20130213193823im_/http://hardcorewp.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> </p> </div><!-- .comment-content --> </article><!-- #comment-578 .comment --> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li id="li-comment-541" class="comment even thread-even depth-1"> <article id="comment-541" class="comment row"> <div class="comment-author-avatar span1"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://0.gravatar.com/avatar/0994d5e2e158a24ba8017c2525d78263?s=70&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span7"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://ottopress.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://ottopress.com']);" rel="external nofollow" class="url">Otto</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-541"><time pubdate datetime="2013-01-23T19:41:14+00:00">2013-Jan-23 at 7:41 pm</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span7"> <p>I would also suggest trying to keep the file size as small as possible. While we do use a cdn for serving those images, every bit helps.</p> <p>Also, the banner URL trick only works for the logged in owner of the plugin.</p> <a class="comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/?replytocom=541#respond" onclick="return addComment.moveForm("comment-541", "541", "respond", "534")">Reply <span>↓</span></a> </div><!-- .comment-content --> </article><!-- #comment-541 .comment --> <ul class="children"> <li id="li-comment-544" class="comment byuser comment-author-mikeschinkel bypostauthor odd alt depth-2"> <article id="comment-544" class="comment row"> <div class="comment-author-avatar span1 offset1"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://0.gravatar.com/avatar/c988a2da603a19e827a39ab4d9186909?s=70&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span6"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://about.me/mikeschinkel" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://about.me/mikeschinkel']);" rel="external nofollow" class="url">mikeschinkel</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-544"><time pubdate datetime="2013-01-23T19:58:24+00:00">2013-Jan-23 at 7:58 pm</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span6"> <p>Hi @Otto,</p> <p>Great points, thanks. I’m working on an update to this post so I’ll be sure to add to the main content.</p> <p>BTW, I tried to get the banner trick to work on plugins of mine when I was logged in and still couldn鈥檛 get it to work. Are you sure there鈥檚 not a bug? Does the plugin need to already have a banner for it to work?</p> <a class="comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/?replytocom=544#respond" onclick="return addComment.moveForm("comment-544", "544", "respond", "534")">Reply <span>↓</span></a> </div><!-- .comment-content --> </article><!-- #comment-544 .comment --> <ul class="children"> <li id="li-comment-558" class="comment even depth-3"> <article id="comment-558" class="comment row"> <div class="comment-author-avatar span1 offset2"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://0.gravatar.com/avatar/0994d5e2e158a24ba8017c2525d78263?s=70&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span5"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://ottopress.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://ottopress.com/']);" rel="external nofollow" class="url">Otto</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-558"><time pubdate datetime="2013-01-24T06:57:10+00:00">2013-Jan-24 at 6:57 am</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span5"> <p>The plugin does not need to have an existing banner, but you do need to be a “contributor” of the plugin in order to use it. That is, your username must be in the list of contributors in the readme.txt file. Case matters.</p> <a class="comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/?replytocom=558#respond" onclick="return addComment.moveForm("comment-558", "558", "respond", "534")">Reply <span>↓</span></a> </div><!-- .comment-content --> </article><!-- #comment-558 .comment --> </li> </ul> </li> </ul> </li> <li id="li-comment-550" class="comment odd alt thread-odd thread-alt depth-1"> <article id="comment-550" class="comment row"> <div class="comment-author-avatar span1"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://1.gravatar.com/avatar/5af525fba95b93c4e0c8a03b639c9486?s=70&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span7"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://coffee2code.com/" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://coffee2code.com']);" rel="external nofollow" class="url">Scott Reilly</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-550"><time pubdate datetime="2013-01-24T00:54:41+00:00">2013-Jan-24 at 12:54 am</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span7"> <p>Nice write-up. One additional tip that warrants mentioning is that the banner filenames should have an ‘x’ (lowecase ‘X’) between the height and width dimensions, not a ‘×’ (multiplication sign).</p> <p>This becomes especially worthy of mention in tutorials (and *for* the tutorials themselves) because WP will typically convert an ‘x’ joining two numbers into the multiplication sign (e.g. 300×200). Some people copy-and-paste what they find in tutorials like the above when naming their images, which will leave them wondering why the banner doesn’t appear after they’ve otherwise followed all the directions. It can be difficult to spot. </p> <p>When specifying the filename, you may want to use <code>&#120;</code> instead of <code>×</code> <em>(e.g. 300x200)</em>.</p> <a class="comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/?replytocom=550#respond" onclick="return addComment.moveForm("comment-550", "550", "respond", "534")">Reply <span>↓</span></a> </div><!-- .comment-content --> </article><!-- #comment-550 .comment --> <ul class="children"> <li id="li-comment-552" class="comment byuser comment-author-mikeschinkel bypostauthor even depth-2"> <article id="comment-552" class="comment row"> <div class="comment-author-avatar span1 offset1"> <img alt="" src="https://web.archive.org/web/20130213193823im_/http://0.gravatar.com/avatar/c988a2da603a19e827a39ab4d9186909?s=70&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D70&r=R" class="avatar avatar-70 photo" height="70" width="70"/> </div> <footer class="comment-meta span6"> <p class="comment-author vcard"> <span class="fn"><a href="https://web.archive.org/web/20130213193823/http://about.me/mikeschinkel" onclick="javascript:_gaq.push(['_trackPageview','/yoast-ga/outbound-commentauthor/http://about.me/mikeschinkel']);" rel="external nofollow" class="url">mikeschinkel</a></span> <span class="says">said</span> on <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#comment-552"><time pubdate datetime="2013-01-24T00:59:33+00:00">2013-Jan-24 at 12:59 am</time></a>: </p><!-- .comment-author .vcard --> </footer><!-- .comment-meta --> <div class="comment-content span6"> <p>Hi @Scott,</p> <p>Thanks for stopping by and for the comment. That’s a really great point about the multiplication sign and one I did not know. I’ll update the post to make sure all my references are real ‘x’ characters and also add a section to the update. </p> <p>Thanks again.</p> <a class="comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/?replytocom=552#respond" onclick="return addComment.moveForm("comment-552", "552", "respond", "534")">Reply <span>↓</span></a> </div><!-- .comment-content --> </article><!-- #comment-552 .comment --> </li> </ul> </li> </ol><!-- .commentlist .unstyled --> </div><!-- #comments --> <div id="respond"> <h3 id="reply-title"><legend>Leave a reply</legend> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/web/20130213193823/http://hardcorewp.com/2013/adding-a-banner-image-to-your-wordpress-plugin-page/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="https://web.archive.org/web/20130213193823/http://hardcorewp.com/wp-comments-post.php" method="post" id="commentform"> <div class="form-horizontal"> <div class="comment-form-author control-group"> <label for="author" class="control-label">Name</label> <div class="controls"> <input id="author" name="author" type="text" value="" size="30" aria-required="true"/> <p class="help-inline"><span class="required">required</span></p> </div> </div> <div class="comment-form-email control-group"> <label for="email" class="control-label">Email</label> <div class="controls"> <input id="email" name="email" type="email" value="" size="30" aria-required="true"/> <p class="help-inline"><span class="required">required</span>, will not be published</p> </div> </div> <div class="comment-form-url control-group"> <label for="url" class="control-label">Website</label> <div class="controls"> <input id="url" name="url" type="url" value="" size="30"/> </div> </div> <div class="comment-form-comment control-group"><label class="control-label" for="comment">Comment</label><div class="controls"><textarea class="span7" id="comment" name="comment" rows="8" aria-required="true"></textarea></div></div> <div class="form-allowed-tags control-group"><label class="control-label">You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: </label><div class="controls"><pre><a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra=""> </pre></div></div> <div class="form-actions"> <p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment"/> <input type="hidden" name="comment_post_ID" value="534" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="0"/> </p> <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="e631860504"/></p><!-- BEGIN: subscribe to comments reloaded --><p><label for="subscribe-reloaded"><select name="subscribe-reloaded" id="subscribe-reloaded"> <option value="none">Don't subscribe</option> <option value="yes" selected="selected">All</option> <option value="replies">Replies to my comments</option> <!-- option value='digest'>Daily digest</option --> </select> Notify me of followup comments via e-mail. You can also <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/comment-subscriptions?srp=534&sra=s">subscribe</a> without commenting.</label></p><!-- END: subscribe to comments reloaded --></div></div> </form> </div><!-- #respond --> <script type="text/javascript"> jQuery(document).ready(function () { jQuery('#commentform').submit(function () { _gaq.push( ['_setAccount', 'UA-173864-16'], ['_trackEvent', 'comment', 'submit'] ); }); }); </script> <nav id="nav-single" class="pager"> <h3 class="assistive-text">Post navigation</h3> <span class="next"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/always-omit-closing-php-tags-in-wordpress-plugins/" rel="next">Next Post <span class="meta-nav">→</span></a></span> <span class="previous"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/2013/submitting-your-plugin-for-hosting-on-wordpress-org/" rel="prev"><span class="meta-nav">←</span> Previous Post</a></span> </nav><!-- #nav-single --> </div><!-- #content --> </section><!-- #primary --> <section id="secondary" class="widget-area span4" role="complementary"> <aside id="categories-2" class="widget well widget_categories"><h2 class="widget-title">Categories</h2> <ul> <li class="cat-item cat-item-21"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/categories/best-practices/" title="View all posts filed under Best Practices">Best Practices</a> </li> <li class="cat-item cat-item-20"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/categories/coding-techniques/" title="View all posts filed under Coding Techniques">Coding Techniques</a> </li> <li class="cat-item cat-item-33"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/categories/opinion/" title="View all posts filed under Opinion">Opinion</a> </li> <li class="cat-item cat-item-59"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/categories/publishing-plugins/" title="View all posts filed under Publishing Plugins">Publishing Plugins</a> </li> <li class="cat-item cat-item-16"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/categories/tutorials/" title="View all posts filed under Tutorials">Tutorials</a> </li> </ul> </aside><aside id="tag_cloud-2" class="widget well widget_tag_cloud"><h2 class="widget-title">Tags</h2><div class="tagcloud"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/action-hooks/" class="tag-link-38" title="2 topics" style="font-size: 22pt;">Action Hooks</a> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/banner-images/" class="tag-link-64" title="1 topic" style="font-size: 8pt;">Banner Images</a> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/directories/" class="tag-link-53" title="1 topic" style="font-size: 8pt;">Directories</a> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/filter-hooks/" class="tag-link-37" title="2 topics" style="font-size: 22pt;">Filter Hooks</a> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/naming-conventions/" class="tag-link-45" title="1 topic" style="font-size: 8pt;">Naming Conventions</a> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/php-tags/" class="tag-link-65" title="1 topic" style="font-size: 8pt;">PHP Tags</a> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/plugin-classes/" class="tag-link-58" title="2 topics" style="font-size: 22pt;">Plugin Classes</a> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/plugin-repository/" class="tag-link-51" title="2 topics" style="font-size: 22pt;">Plugin Repository</a> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/plugin-submission/" class="tag-link-60" title="1 topic" style="font-size: 8pt;">Plugin Submission</a> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/tags/singletons/" class="tag-link-57" title="2 topics" style="font-size: 22pt;">Singletons</a></div> </aside><aside id="tag_cloud-3" class="widget well widget_tag_cloud"><h2 class="widget-title">WordPress Hooks</h2><div class="tagcloud"><a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/hooks/add_filter/" class="tag-link-50" title="1 topic" style="font-size: 8pt;">add_filter</a> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/hooks/init/" class="tag-link-17" title="1 topic" style="font-size: 8pt;">init</a> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/hooks/remove_action/" class="tag-link-41" title="1 topic" style="font-size: 8pt;">remove_action</a> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/hooks/remove_filter/" class="tag-link-42" title="1 topic" style="font-size: 8pt;">remove_filter</a> <a href="https://web.archive.org/web/20130213193823/http://hardcorewp.com/hooks/the_content/" class="tag-link-18" title="2 topics" style="font-size: 22pt;">the_content</a></div> </aside></section><!-- #secondary .widget-area --> <footer id="colophon" role="contentinfo" class="span12"> <div id="page-footer" class="well clearfix"> <span class="credits alignleft">© 2013 <a target="_blank" href="https://web.archive.org/web/20130213193823/http://newclarity.net/">NewClarity LLC</a>, all rights reserved.</span> <div id="site-generator"> <a href="https://web.archive.org/web/20130213193823/http://wordpress.org/" title="Semantic Personal Publishing Platform" target="_blank" rel="generator">Proudly powered by WordPress</a> </div> </div><!-- #page-footer .well .clearfix --> </footer><!-- #colophon --> </div><!-- #page --> </div><!-- .container --> <!-- 48 queries. 0.444 seconds. --> <script type="text/javascript">if (typeof(addthis_share) == "undefined"){ addthis_share = {"url_transforms":{"shorten":{"twitter":"bitly"}},"shorteners":{"bitly":{"login":"mikeschinkel","apiKey":"R_6a6b0fb856a0a7d42a54108e53a7abbd"}}};} var addthis_config = {"data_track_clickback":true,"data_ga_property":"UA-173864-16","data_ga_social":true,"data_track_addressbar":false,"data_track_textcopy":true,"ui_language":"en","ui_atversion":"300"}; var addthis_product = 'wpp-3.0.2'; </script><script type="text/javascript" src="//web.archive.org/web/20130213193823js_/http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50d7001e4fa397e3"></script><script type="text/javascript"></script><script type="text/javascript" src="https://web.archive.org/web/20130213193823js_/http://hardcorewp.com/wp-content/themes/the-bootstrap/js/bootstrap.min.js?ver=2.0.3"></script> <script type="text/javascript" src="https://web.archive.org/web/20130213193823js_/http://hardcorewp.com/wp-content/themes/the-bootstrap/js/the-bootstrap.min.js?ver=0.1"></script> <script type="text/javascript" src="https://web.archive.org/web/20130213193823js_/http://hardcorewp.com/wp-includes/js/comment-reply.min.js?ver=3.5.1"></script> <!--wp_footer--> </body> </html> <!-- FILE ARCHIVED ON 19:38:23 Feb 13, 2013 AND RETRIEVED FROM THE INTERNET ARCHIVE ON 16:14:43 Feb 21, 2025. JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. SECTION 108(a)(3)). --> <!-- playback timings (ms): captures_list: 0.927 exclusion.robots: 0.043 exclusion.robots.policy: 0.026 esindex: 0.016 cdx.remote: 19.636 LoadShardBlock: 1889.602 (3) PetaboxLoader3.datanode: 1961.194 (4) load_resource: 580.393 PetaboxLoader3.resolve: 464.234 -->