Giter VIP home page Giter VIP logo

bueltge / wordpress-admin-style Goto Github PK

View Code? Open in Web Editor NEW
952.0 57.0 124.0 4.49 MB

This plugin reference elements from wp-admin in an overview with the necessary markup and CSS classes to help you to develop WordPress compliant.

Home Page: http://wpengineer.com/2226/new-plugin-to-style-your-plugin-on-wordpress-admin-with-default-styles/

License: GNU General Public License v2.0

CSS 40.45% PHP 55.48% JavaScript 3.87% Hack 0.20%
wordpress genericons dashicons layout styleguide design-patterns wordpress-mp6

wordpress-admin-style's Introduction

WordPress Admin Style

FOSSA Status Latest Stable Version

Shows the WordPress admin styles on one page to help you to develop WordPress compliant

  • List markup and examples for '2 Column Page Layout', Headers, Header Icons, Buttons, Tables, Admin Notices, Alternative Colours, Pagination, Form Elements, Form Helper Functions, Tabs, Default Admin Color Schemes
  • WP Color Picker
  • Helper Classes
  • jQuery UI Examples
  • Dashicons
  • Genericons

Description

WordPress is developing fast - this also applies to the design of the backend. So it is important not to use your own styles in the admin area and use tags and classes of WordPress. This is the best way you can simplify your work as a developer, and you don't have to test the design with every update. Unfortunately, there are quite extensive opportunities in the backend to implement the requirements. Several different classes and HTML structures are used. To be able to look up something this simple, I have developed this small plugin, which tinkers in the development environment and quickly represents the necessary elements.

Also see the post about the idea and also the comments for a discussion.

Screenshots & history

Part of the Admin Style information in WordPress version 5.7

The plugin is still active in usage and development since an early WordPress version, so you should see it on the screenshots from the different versions below.

  1. Admin Style in WordPress 3.1
  2. Admin Style in WordPress 3.4
  3. Admin Style in WordPress 3.6-alpha
  4. Admin Style in WordPress MP6 Design
  5. Dashicons in WordPress MP6 Design
  6. Genericons in WordPress 3.9-alpha
  7. Admin Style in WordPress 5.3

Installing

Manual

  1. Download the plugin as a ZIP file from GitHub.
  2. In your WordPress admin click Plugin -> Add New -> Upload Plugin.
  3. Upload the ZIP file.
  4. Activate the plugin.

Via Composer

The plugin is available as Composer package and can be installed via Composer from the root of your WordPress installation.

composer require bueltge/wordpress-admin-style

If you have changed the default directory structure or just want the plugin to a specific location, you can create a project from the Composer package.

composer create-project bueltge/wordpress-admin-style <optional-name>

Via Git

  1. Go to your Must Use folder cd path
  2. git init .
  3. git remote add origin https://github.com/bueltge/wordpress-admin-style.git
  4. git fetch origin
  5. git checkout master
  6. Check in the network plugin page, if it works

Automatic Udates

The plugin supports the GitHub Updater plugin for WordPress. The plugin enables automatic updates from this GitHub Repository. You will find all information about the how and why at the plugin wiki page.

Other Notes

Bugs, technical hints or contribute

Please give me feedback, contribute and file technical bugs on this GitHub Repo, use Issues.

License

Good news, this plugin is free for everyone! Since it's released under the GPLv2+, You can use it free of charge on your personal or commercial blog. But if you enjoy this plugin, you can thank me and leave a small donation for the time I've spent writing and supporting this plugin. And I really don't want to know how many hours of my life this plugin has already eaten ;)

Contact & Feedback

The plugin is designed and developed by me (Frank Bültge)

Please let me know if you like the plugin, or you hate it or whatever ... Please fork it, add an issue for ideas and bugs.

Disclaimer

I'm German, and my English might be gruesome here and there. So please be patient with me and let me know of typos or grammatical farts. Thanks

wordpress-admin-style's People

Contributors

brasofilo avatar bueltge avatar fossabot avatar glueckpress avatar jbradach avatar jeffrey-hearn avatar julien731 avatar lriaudel avatar ocean90 avatar pierrelebedel avatar stefanpejcic avatar talater avatar tivnet avatar wormeyman avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wordpress-admin-style's Issues

Gutenberg

It is necessary to add style guides for the Gutenberg project?

2 Columns Layout: static (px)

In the 2 Columns Layout: static (px) section, it seems that the handle div markup has been changed to a button ( not sure in which version )

Old markup :
<div title="Click to toggle" class="handlediv"><br></div>

New markup :

	<button type="button" class="handlediv" aria-expanded="true" >
	<span class="screen-reader-text">Toggle panel</span>
	<span class="toggle-indicator" aria-hidden="true"></span>
	</button>

the current version of the plugin does not display the toggle button .

Clarify admin-notices

Clarify how, when and where admin notices are moved.

The wrap class is important and since WordPress 4.3 the notices are moved after the first h1 or h2 (whichever comes first).

There is also the possibility of keeping a notice inline.

WordPress Built In Dialog Box For My Plugin

I want to using wordpress defaults model box in post edit page

[wp-admin/post.php?post=368&action=edit]

Model I wanted : Model I wanted

i tried the following instruction in https://codex.wordpress.org/Javascript_Reference/ThickBox

http://i.stack.imgur.com/nGlNK.png

Code I Entered

This is my hidden content! It will appear in ThickBox when the link is clicked.

I want to control my model with javascript and also needed tab view in that model like

[Media Model ]

Kindly help me to get this done

New element

I find a new element in: wp-admin/tools.php

<div class="card">
	<h2 class="title">Categories and Tags Converter</h2>
	<p>	If you want to convert your categories to tags (or vice versa), use the <a href="import.php">Categories and Tags Converter</a> available from the Import screen.</p>
</div>

Missing tips

Hello,

I submit to you 3 missing tips :

For the 2 columns layout :

<div class="handlediv" title="Click to toggle"><br></div>

For toogle the block.

An other 2 column type in category :

<div id="col-container">
    <div id="col-right">
        <div class="col-wrap"></div>
    </div><!-- /col-right -->
    <div id="col-left">
        <div class="col-wrap"></div>
</div><!-- /col-left -->
</div>

To the place of
:

<div class="clear"></div>

Bye

How to make collapsible meta boxes

Hi
First, awesome project! I'm developing my first plugin for Wordpress 4.9 and this project is really useful.
I'm trying to use meta boxes for settings sections but it does not collapse.

N/A

disregard

The admin tab of the plugin does not change tabs

This is the code:

<h2><?php esc_attr_e( 'Tabs', 'WpAdminStyle' ); ?></h2>
<h2 class="nav-tab-wrapper">
	<a href="#" class="nav-tab">Tab #1</a>
	<a href="#" class="nav-tab nav-tab-active">Tab #2</a>
	<a href="#" class="nav-tab">Tab #3</a>
</h2>

When I click on any of the tabs, it sends me to the top of the page.

Code for jQuery demo

Hello,
It is possible to have the code (css and js) to implemante for have all tools list in the page ?

Two Column Markup, sidebar H3 element outside postbox DIV

Hey Frank...

The copy and paste markup for the two column layout needs a slight adjustment, currently the sidebar has no H3 element styling for its background. Snippet shown below with accompanying screenshot.

https://github.com/bueltge/WordPress-Admin-Style/blob/master/wp-admin-style.php#L286

The following markup;

            <div class="meta-box-sortables">
                <h3><span>Sidebar Content Header</span></h3>
                <div class="postbox">
                    Content space
                </div> <!-- .postbox -->
            </div> <!-- .meta-box-sortables -->

...produces:
whoops

Where as;

            <div class="meta-box-sortables">
                <div class="postbox">
                    <h3><span>Sidebar Content Header</span></h3>
                    Content space
                </div> <!-- .postbox -->
            </div> <!-- .meta-box-sortables -->

...produces:
better

Updation to 4.*

The repo hasn't been updated from some time to incorporate changes from 4.* onwards. Is Some one working on that?

Contributing for new WordPress CSS features

I have looked into WordPress code that many CSS classes and features was added (CSS3, animations, etc) and the project is missing them.

I want to contribute but the contribution instructions aren't very clear. Can you tell me what i need to do? An fork and pull request will be fine?

Escaping using esc_attr_e()

Hi Frank, started using your plugin which is great, really helpful.

Question for you on internalization and strings, I noticed in a lot of examples like below...

<p><?php esc_attr_e('WordPress started in 2003 with a single bit of code to enhance the typography of everyday writing and with fewer users than you can count on your fingers and toes. Since then it has grown to be the largest self-hosted blogging tool in the world, used on millions of sites and seen by tens of millions of people every day.','wp_admin_style'); ?></p>

that text or headings are ecaped with esc_attr_e - I thought that this was really for attribute use and _e for regular text - or does it not matter?

Add Color Picker Example

add_action( 'admin_enqueue_scripts', 'mw_enqueue_color_picker' );
function mw_enqueue_color_picker( $hook_suffix ) {
    // first check that $hook_suffix is appropriate for your admin page
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'my-script-handle', plugins_url('my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}
<input type="text" value="#bada55" class="my-color-field" data-default-color="#effeff" />
jQuery(document).ready(function($){
    $('.my-color-field').wpColorPicker();
});

Since WP 3.5
https://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/

json notice in admin

Notice: Failed to parse plugin metadata. Try validating your .json file with http://jsonlint.com/ in /public_html/wp-content/plugins/WordPress-Admin-Style-master/inc/plugin-updates/plugin-update-checker.php on line 657

WP 3.9.1a, installed plugin from github zip download.

Update readme

  • Lots of to old links to helping plugins.
  • Remove the hint for discussion, the post is old and closed and the currently area of this plugin is this repo, not more.
  • Also I should remove the donation topic, not relevant and to seldom with a result.

jQuery features not working

The features under Admin Style > jQuery UI are not working.

Bildschirmfoto 2021-08-30 um 11 11 41

I already fixed a warning for HTTPS sites caused by

'http://ajax.googleapis.com/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-core']->ver . '/themes/smoothness/jquery-ui.css'

But that didn’t help. There is no further warning I see and could experiment with.

[Feature Request]: Ability to change the colors

Is your feature request related to a problem?

I cannot change colors via the plugin UI

Describe the desired solution

Ability to change the colors via the UI

Describe the alternatives that you have considered

writing my own plugin

Additional context

not sure if this is already possible

Code of Conduct

  • I agree to follow this project's Code of Conduct

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.