WordPress.org

Making WordPress.org

Changeset 1271


Ignore:
Timestamp:
02/17/2015 09:33:10 PM (5 years ago)
Author:
coffee2code
Message:

developer.wordpress.org: Add usage examples for add_menu_page() and register_post_type() on dashicons page.

Fixes #758.
Props ryelle.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/page-dashicons.js

    r969 r1271  
    3838
    3939            jQuery( '#glyph' ).html( tmpl({
    40                 cssClass: cssClass,
     40                cssClass: 'dashicons-' + permalink,
    4141                attr: attr,
    4242                html: htmltext,
    4343                glyph: glyphtext
    4444            }) );
     45
     46            jQuery( '#wp-class-example' ).text( permalink );
    4547        }
    4648    };
     
    5153
    5254        // pick random icon if no permalink, otherwise go to permalink
    53         if ( window.location.hash ) {
     55        if ( window.location.hash && '#instructions' !== window.location.hash ) {
    5456            permalink = "dashicons-" + window.location.hash.split('#')[1];
    5557
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/page-dashicons.php

    r1056 r1271  
    319319            <div id="instructions">
    320320
     321                <h3><?php _e( 'WordPress Usage', 'wporg' ); ?></h3>
     322
     323                <p><?php  printf(
     324                    __( 'Admin menu items can be added with <code><a href="%s">register_post_type()</a></code> and <code><a href="%s">add_menu_page()</a></code>, which both have an option to set an icon. To show the current icon, you should pass in %s.', 'wporg' ),
     325                    'https://developer.wordpress.org/reference/functions/register_post_type/',
     326                    'https://developer.wordpress.org/reference/functions/add_menu_page/',
     327                    '<code>\'dashicons-<span id="wp-class-example">{icon}</span>\'</code>'
     328                ); ?></p>
     329
     330                <h4><?php _e( 'Examples', 'wporg' ); ?></h4>
     331
     332                <p><?php printf(
     333                    __( 'In <code><a href="">register_post_type()</a></code>, set <code>menu_icon</code> in the arguments array.', 'wporg' ),
     334                    'https://developer.wordpress.org/reference/functions/register_post_type/'
     335                ); ?></p>
     336
     337<pre>&lt;?php
     338add_action( 'init', 'create_post_type' );
     339//Registers the Product's post type
     340function create_post_type() {
     341    register_post_type( 'acme_product',
     342        array(
     343            'labels' => array(
     344                'name' => __( 'Products' ),
     345                'singular_name' => __( 'Product' )
     346            ),
     347            'public' => true,
     348            'has_archive' => true,
     349            'menu_icon' => 'dashicons-products',
     350        )
     351    );
     352}
     353</pre>
     354
     355                <p><?php printf(
     356                    __( 'The function <code><a href="%s">add_menu_page()</a></code> accepts a parameter after the callback function for an icon URL, which can also accept a dashicons class.', 'wporg' ),
     357                    'https://developer.wordpress.org/reference/functions/add_menu_page/'
     358                ); ?></p>
     359
     360<pre>&lt;?php
     361function add_my_custom_menu() {
     362    //add an item to the menu
     363    add_menu_page (
     364        'My Page',
     365        'My Title',
     366        'manage_options',
     367        'my-page',
     368        'my_admin_page_function',
     369        'dashicons-admin-media',
     370    );
     371}</pre>
     372
     373                <h3><?php _e( 'CSS/HTML Usage', 'wporg' ); ?></h3>
     374
     375                <p><?php _e( "If you want to use dashicons in the admin outside of the menu, there are two helper classes you can use. These are <code>dashicons-before</code> and <code>dashicons</code>, and they can be thought of as setting up dashicons (since you still need your icon's class, too).", 'wporg' ); ?></p>
     376
     377                <h4><?php _e( 'Examples', 'wporg' ); ?></h4>
     378
     379                <p><?php _e( 'Adding an icon to a header, with the <code>dashicons-before</code> class. This can be added right to the element with text.', 'wporg' ); ?></p>
     380
     381<pre>
     382&lt;h2 class="dashicons-before dashicons-smiley"&gt;<?php _e( 'A Cheerful Headline', 'wporg' ); ?>&lt;/h2&gt;
     383</pre>
     384
     385                <p><?php _e( 'Adding an icon to a header, with the <code>dashicons</code> class. Note that here, you need extra markup specifically for the icon.', 'wporg' ); ?></p>
     386
     387<pre>
     388&lt;h2&gt;&lt;span class="dashicons dashicons-smiley"&gt;&lt;/span&gt; <?php _e( 'A Cheerful Headline', 'wporg' ); ?>&lt;/h2&gt;
     389</pre>
     390
    321391                <h3><?php _e( 'Photoshop Usage', 'wporg' ); ?></h3>
    322392
    323393                <p><?php _e( 'Use the .OTF version of the font for Photoshop mockups, the web-font versions won\'t work. For most accurate results, pick the "Sharp" font smoothing.', 'wporg' ); ?></p>
    324 
    325                 <h3><?php _e( 'CSS Usage', 'wporg' ); ?></h3>
    326 
    327                 <p><?php _e( 'Link the stylesheet:', 'wporg' ); ?></p>
    328 
    329                 <pre>&lt;link rel="stylesheet" href="css/dashicons.css"></pre>
    330 
    331                 <p><?php printf( __( 'Now add the icons using the %s selector. You can insert the Star icon like this:', 'wporg' ), '<code>:before</code>' ); ?></p>
    332 
    333 <textarea class="code" onclick="select();">
    334 .myicon:before {
    335     content: "\f155";
    336     display: inline-block;
    337     -webkit-font-smoothing: antialiased;
    338     font: normal 20px/1 'dashicons';
    339     vertical-align: top;
    340 }</textarea>
    341394
    342395            </div><!-- /#instructions -->
     
    350403            <div class="dashicons {{data.cssClass}}"></div>
    351404            <div class="info">
    352                 <span class="name">← {{data.cssClass}}</span>
     405                <span class="name"><code>{{data.cssClass}}</code></span>
    353406                <span class="link"><a href='javascript:dashicons.copy( "content: \"\\{{data.attr}}\";", "css" )'><?php _e( 'Copy CSS', 'wporg' ); ?></a></span>
    354407                <span class="link"><a href="javascript:dashicons.copy( '{{data.html}}', 'html' )"><?php _e( 'Copy HTML', 'wporg' ); ?></a></span>
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/page-dashicons.scss

    r969 r1271  
    134134            margin: 1.5em 0 0.75em;
    135135        }
     136
     137        h4 {
     138            margin-top: 0;
     139            padding-top: 0;
     140            border-top: none;
     141        }
    136142    }
    137143
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/page-dashicons.css

    r969 r1271  
    112112  margin: 1.5em 0 0.75em;
    113113}
     114.dashicons-page #instructions h4 {
     115  margin-top: 0;
     116  padding-top: 0;
     117  border-top: none;
     118}
    114119.dashicons-page .code {
    115120  display: block;
Note: See TracChangeset for help on using the changeset viewer.