Giter VIP home page Giter VIP logo

wordpen's Introduction

=== WordPen ===
Contributors: gingersoulrecords,ideag
Donate link: http://gingersoulrecords.com/
Tags: codepen, snippets
Requires at least: 4.6
Tested up to: 4.7
Stable tag: 0.1.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Embed pens from CodePen without the 'edit' frame

== Description ==

[CodePen](http://codepen.io/) is a 'playground for the front end web' where you can write public-facing HTML/CSS/JS demos, called pens. It's a fountain of inspiration for web designers and a useful resource for those learning to write, organize, and share front end code.

WordPen by [Ginger Soul Records](https://gingersoulrecords.com/) is an effort to bring the best of CodePen to WordPress, with minimal code work. Simply paste a CodePen URL, save your WordPen, and embed a shortcode in your layout.

HTML, CSS, and JS code will be editable, and all connected resources linked to the pen will be included with the shortcode.

Not all pens were designed to be featured with WordPen, so you may wish to start with background- and foreground-friendly pens, which are collected [here](http://codepen.io/gingersoulrecords/collections/public/).

== Installation ==

1. Upload the plugin files to the `/wp-content/plugins/wordpen` directory, or install the plugin through the WordPress plugins screen directly.
1. Activate the plugin through the 'Plugins' screen in WordPress
1. Use the `WP Admin -> WordPens > Add New` screen import new pens

== Frequently Asked Questions ==

= How do I make this plugin work? =

Go to `WP Admin > WordPens > Add new` and import a new pen from Codepen. Then use the shorcode provided there, to insert the pen into any WordPress post/page/custom post type.

== Screenshots ==

1. Pen Editor Screen
2. Pen Editor Screen (continued)

== Changelog ==

= 0.1.0 =
* first version to be submitted to wordpress.org

== Upgrade Notice ==

= 0.1.0 =
Initial version

wordpen's People

Contributors

ideag avatar gingersoulrecords avatar

Stargazers

 avatar

Watchers

 avatar  avatar

wordpen's Issues

Customized plugin assets

I just received an informal notice from WP plugin team that we should have different banner images icons for different plugins. They do not need to be completely different, but they need to be individualized

CSS / JS not making it to the Document

Hey, I left a message in Slack to this effect. I wasn't able to pull requisite CSS/JS into the Document on GSR Developer (there's a pen called Neon Soup in there).

Manually copying and pasting the JS into a scripts file ended up working. Please take a look, thx :)

DB

WordPen examples

Hey there!

I'd like you to select three of your favorite background pens and three of your favorite foreground pens from GSR's 'loved' list, here:

http://codepen.io/gingersoulrecords/pens/loved/

fork them, and convert them to WordPen-friendly formats (single container element, no global CSS or fixed/absolute positioning). I'd like to know what challenges you face doing this, so we can write some useful instructions for WordPen users to prepare their own pens for website use.

Thanks!

DB

Submitting to wp.org

Hi, for submitting to WP.org there are a couple of things you would be better at doing, than I would:

  1. Short description (up to 150 characters, no formatting)
  2. Long description - can include links, bullet lists, bold/italic, etc. At least a couple paragraphs. A good place to mention your other plugins, including premium ones.
  3. Logo and cover images - we discussed those before and they will only be needed after plugin is confirmed, but it is always good to have them ready.

P.S. is gsr username on wordpress.org yours? it seems to be registered but never used really used. If it is, could you give me access to that account - I'll do your submissions using it.

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.