Tagged: plugins Toggle Comment Threads | Keyboard Shortcuts

  • Jay Versluis 12:30 pm on September 8, 2014 Permalink | Reply
    Tags: plugins   

    Categories: WordPress ( 145 )   

    How to add Icons and Banners for your Plugins hosted on WordPress.org 

     

    Screen Shot 2014-09-08 at 12.29.32

    WordPress 4.0 introduced a new way to browse Plugins in the admin interface: beautiful icons show up that make Plugins looks like Mini-Apps. When a user clicks on one they get a description right there and then without the need to browse to the WordPress site in a different tab. This gives easy and instant access to important info without disrupting the user experience. Simply put: it’s beautiful!

    It’s very simple to add your own icons and banners to this experience and stand out from the crowd. Let me show you how.

    Plugin Icons

    Create a square icon, much like you would for iOS and Android Apps. Avoid text and keep it simple. Icons can be either jpg or png (transparency is recognised in the latter format). You can upload two sizes with the following file names:

    • icon-128×128.jpg (or icon-128×128.png) for standard displays
    • icon-256×256.jpg (or icon-256×256.png) for retina/hi-res displays

    The second file is optional and will show up if a suer browses on an iPad or Retina Laptop. Both files need to reside in the plugin’s assets folder. This is something that is not download when a plugin is installed and only lives on the WordPress repo.

    Assets is the same folder that houses your screenshots you may have added which show up in the plugin descriptions. If yours live in the main plugin folder, perhaps now is a good time to move them into assets and keep downloads smaller.

    If you don’t already have an assets folder, create one in your root directory of your svn repo (as provided by the WordPress Plugin Master), on the same level as trunks, tags and branches:

    your-plugin-folder (root)
        trunk
            plugin-files-live-here
        tags
            1.0
            1.1
        branches
        assets
            icon-128x128.png
            icon-256x256.png
    

    Commit your files using your favourite SVN Tool and now they’ll show up in the WordPress admin interface as seen in the screenshot above. It’s that simple.

    Plugin Banners

    Banners were introduced to plugin authors sometime in July 2012. Back then they were only displayed on the WordPress.org site as part of your plugin URL, like this: http://wordpress.org/plugins/child-theme-wizard

    Screen Shot 2014-09-08 at 11.48.04

    The new feature in WordPress 4.0 is that those banners now show up when a user clicks your plugin to get more information.

    And just like with icons, those banners live in the same assets directory and follow the same pattern for standard and retina displays. Banner sizes are 772×250 and 1544×500 respectively. Again both jpg and png formats are accepted:

    your-plugin-folder (root)
        trunk
            plugin-files-live-here
        tags
            1.0
            1.1
        branches
        assets
            banner-772x250.png
            banner-1544x500.png
    

    Here’s what a banner looks like in the WordPress admin interface:

    Screen Shot 2014-09-08 at 11.50.08





     
  • Jay Versluis 10:00 am on January 4, 2014 Permalink | Reply
    Tags: , plugins   

    Categories: WordPress ( 145 )   

    How to tweak style code blocks in WP Code Highlight 

    I love the WP Code Highlight plugin by BoLiQuan. It brings well deserved colour to code blocks wrapped in PRE tags. I use them a lot, but until I discovered this plugin they all looked grey and bland.

    Since last year I was using them on my iOS Dev Diary and thought since both sites are now running the same layout I’d integrate code highlighting here to (new for 2014).

    Out of the box however it didn’t look as nice as I wanted it to:

    Screen Shot 2014-01-04 at 09.41.51

    I’m using it with P2 (or P2 Categories actually) so it needed some pazzazz. Here’s what I wanted to change:

    • make sure the border is cropped on the right
    • give the blocks rounded corners
    • and a bit more padding on the inside
    • make the text a bit bigger
    • offset the background and turn it light grey

    And here’s what it looks like after the treatment:

    Screen Shot 2014-01-04 at 09.49.48

    Here’s the code that did it. Add this to the bottom of your style.css file, include it in your Child Theme or add it to a custom CSS option field (JetPack provides this for example):

    /* style code sections */
    pre {
    	background: #eee;
    	padding: 10px;
    	padding-top: 20px;
    	padding-bottom: 20px;
    	border-radius: 10px;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
    }
    
    /* code blocks could look better */
    .wp-code-highlight {
    	background: #eee;
    	font-size: 1.0em !important;
    	padding: 10px !important;
    	padding-top: 20px !important;
    	padding-bottom: 20px !important;
    	width: 95% !important;
    }
    

    The first block styles the PRE tags and gives them padding, rounded corners and a grey background. If you’re not using the WP Code Highlight plugin then this will work fine too.

    The second block styles the plugin’s CSS specifically. Note how I have to repeat the padding and declare those rules as important. This is because the plugin uses inline styles that cannot be targeted with a standard override. The last line removes the cropping on the right hand side of the code blocks.

    To increase the size of the code text, change the font-size property in the second block to 1.1 or higher.

    Enjoy!





     
  • Jay Versluis 10:22 am on November 28, 2013 Permalink | Reply
    Tags: plugins   

    Categories: WordPress ( 145 )   

    How to link to graphic assets within WordPress Plugins 

    When you want to display graphics that reside inside your own plugin directory you can serve those via a handy built-in WordPress function called plugins_url. It works just like its counterpart get_stylesheet_directory_uri does in themes.

    For example, if you’d like to link to a file that resides at

    http://yourdomain.com/wp-content/plugins/your-plugin/images/your-graphic.png
    

    then you can write this URL out like so:

    
    

    Note the usage of the PHP constant __FILE__ (that’s two underscores before and after FILE), it’s called a Magic Constant. In this case it points to your own plugin’s directory. If you leave this parameter out you’ll get the URL to the main plugins directory.

    If instead you’d like to access the full server path to this file rather than its URL, you can use the plugin_dir_path function.





     
  • Jay Versluis 9:42 pm on September 3, 2013 Permalink | Reply
    Tags: plugins,   

    Categories: WordPress ( 145 )   

    How to disable update notifications in WordPress 

    wordpress_iconsSometimes “new” doesn’t always mean “better” or “suitable”.

    Sometimes we require older versions of plugins and I’d rather WordPress would not tell me that there’s a newer version available. After all, I might accidentally update a plugin – or perhaps my clients do, breaking the site or overwriting customisations.

    Let’s take a look at how we can disable those notifications, both for single plugins and for the entire site.

    (More …)





     
c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Reply
e
Edit
o
Show/Hide comments
t
Go to top
l
Go to login
h
Show/Hide help
shift + esc
Cancel