Code Monkey home page Code Monkey logo

wp-customize-posts-css's Introduction

Customize Posts CSS

Add custom CSS for any post or page on any archive or singular template with editing and previewing in the Customizer.

Contributors: xwp, westonruter
Tags: customizer, customize
Requires at least: 4.9
Tested up to: 4.9
Stable tag: 0.1.0
License: GPLv2 or later
Requires PHP: 5.4
Depends: Customize Posts

Build Status Built with Grunt

Description

Since WordPress 4.7 core has provided an Additional CSS section in the Customizer for users to add and preview custom CSS for their site (see #35395).

This plugin brings the same functionality to be able to provide custom CSS for individual posts and pages on your site. The custom CSS will be output in style elements whenever the_post is done. The CSS is stored in a custom_css postmeta and Custom CSS is presented for every post that has the custom_css post type support, which is given to all public posts by default.

This plugin has a few dependencies:

  • It requires the Customize Posts plugin for adding the ability to manage and preview postmeta in the Customizer. The Custom CSS control is added to the post/page Customizer sections which this plugin adds.
  • It relies on CodeMirror being in core as of 4.9-alpha. See #12423.
  • It uses the WP_Customize_Code_Editor_Control proposed for WordPress 4.9. See #41897.

See also #38707 which proposes extending the Custom CSS editor in core with being able to edit per page CSS.

Screenshots

Custom CSS control appears in each post section with initial selectors for targeting post/page in post container (post_class()) and body container (body_class()).

Custom CSS control appears in each post section with initial selectors for targeting post/page in post container (post_class()) and body container (body_class()).

The custom CSS appears with the post on an index page and here the .hentry selector is key for targeting the post in The Loop.

The custom CSS appears with the post on an index page and here the .hentry selector is key for targeting the post in The Loop.

The custom CSS also appears with the post on its singular template, and here a body selector with an appropriate post-specific class name is useful for changing the look of the entire page.

The custom CSS also appears with the post on its singular template, and here a body selector with an appropriate post-specific class name is useful for changing the look of the entire page.

Changelog

0.1.0

Initial release.

wp-customize-posts-css's People

Contributors

westonruter avatar

Stargazers

Patrick Villanueva avatar Andrei Lupu avatar

Watchers

 avatar James Cloos avatar Andrei Lupu avatar  avatar

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.