My Custom Styles

Description

An easy to use, with intuitive interface, WordPress plugin that gives you the ability to easily and safely add your custom CSS code to your WordPress website, directly out of the WordPress Admin Area, without the need to have an external editor.

This is a must have tool for authors and website’s owners. Its purpose is to provide a familiar experience to WordPress users. There is no need for any more editing of the files of your theme or plugins for to add custom CSS code. Just add your custom CSS code in the field on the plugin page and this plugin will do the rest for you. It will automatically add your CSS code to the desired section of your website, without changing any of your theme files and without slowing down your website.

The plugin works completely independently of the theme, so you can use it with any theme, and regardless of whether the theme does or does not have a style.css file. The code you place on the plugin page will be entirely unaffected if you edit the contents of the theme’s style.css file, or even completely change the theme. This is really useful in case of updating theme or plugins, because your custom CSS code would never be overwritten. Your custom CSS code will keep on working, no matter how many times you upgrade or switch your theme and plugins.

On the plugin page you find the code editor powered by CodeMirror. This code editor has options such as syntax highlighting, line numbering, and more. And if you want more options, let us know and we will be happy to add them.

Features

  • Lightweight and fast
  • Secure code with using clear coding standards
  • Intuitive interface
  • Cross browser compatible (work smooth in any modern browser)
  • Compatible with all WordPress themes
  • RTL compatible (right to left)
  • Translation ready

Key features include

  • Insert custom CSS code into the site
  • Ability to temporarily disable all custom CSS code
  • Code syntax highlighting
  • Line numbering
  • Active line highlighting
  • Editor allow for Tab indentation
  • And much, much more!

PRO features include

  • CSS minifier
  • Manage which CSS code load on HEAD or FOOTER
  • Controlling the priority of loading CSS code
  • Ability to easily customize the code editor by selecting the desired settings
  • 56 themes for syntax highlighting
  • Toolbar with useful buttons, such as Undo, Redo, etc.
  • Ability to use shortcut keys (both Mac and PC) for Search, Replace, etc.
  • Unlimited number of fields for snippets
  • Automatic backup of all snippets to a downloadable text file
  • Separate activation and deactivation of snippets
  • No ads on the settings page
  • Well documented

Get the PRO version now!

Supported languages

  • CSS

Translation

This plugin is ready for translation and has already been translated into several languages.

  • English (default)
  • Russian (translation by Milena Kiseleva)
  • German (translation by Michael)
  • Spanish (translation by Patricio Toledo)
  • Dutch (translation by Peter Leenders)

If you want to help translate this plugin then please visit the translation page.

Minimum system requirements:

  • PHP version 5.3 or higher.
  • MySQL version 5.0 or higher.

Recommended system requirements:

  • PHP version 7.0 or higher.
  • MySQL version 5.6 or higher.

Contribution

Developing plugins is long and tedious work. If you benefit or enjoy this plugin please take the time to:

“My Custom Styles” is one of the own software projects of Space X-Chimp.

License

This plugin is licensed under the GNU General Public License, version 3 (GPLv3) and is distributed free of charge.
Commercial licensing (e.g. for projects that can’t use an open-source license) is available upon request.

Credits

Links

Screenshots

  • Plugin page.
  • Plugin page with custom CSS code added.

Installation

Install “My Custom Styles” just as you would any other WordPress Plugin.

Automatically via WordPress Admin Area:

  1. Log in to Admin Area of your WordPress website.
  2. Go to “Plugins” -> “Add New“.
  3. Find this plugin and click install.
  4. Activate this plugin through the “Plugins” tab.

Manually via FTP access:

  1. Download a copy (ZIP file) of this plugin from WordPress.org.
  2. Unzip the ZIP file.
  3. Upload the unzipped catalog to your website’s plugin directory (/wp-content/plugins/).
  4. Log in to Admin Area of your WordPress website.
  5. Activate this plugin through the “Plugins” tab.

After installation and activation, the “CSS Inserter” menu item will appear in the “Settings” section of Admin Area. Click on it in order to view the plugin settings page.

More help installing plugins

FAQ

Q. Will this plugin work on my WordPress.COM website?

A. Sorry, this plugin is available for use only on self-hosted (WordPress.ORG) websites.

Q. Can I use this plugin on my language?

A. Yes. This plugin is ready for translation and has already been translated into several languages. But If your language is not available then you can make one. The POT file is included and placed in the “languages” folder. Just send the PO file to us and we will include this translation within the next plugin update. Many of plugin users would be delighted if you share your translation with the community. Thanks for your contribution!

Q. How does it work?

A. Simply go to the plugin settings page, place your custom CSS code in the code editor field, switch the toggle to the “ON” position and click the “Save changes” button. Enjoy the result of applying your custom CSS code. It’s that simple!
You can find the plugin settings page at “WordPress Admin Area” -> “Settings” -> “CSS Inserter“.

Q. How much of CSS code (characters) I can enter in the code editor?

A. We don’t limit the number of characters.

Q. Does this plugin requires any modification of the theme?

A. Absolutely not. This plugin is configurable entirely from the plugin settings page that you can find in the Admin Area of your WordPress website.

Q. Does this require any knowledge of HTML or CSS?

A. This plugin can be configured with no knowledge of HTML or CSS, using an easy-to-use plugin settings page. But you need to know the HTML or CSS in order to add/remove/modify the HTML or CSS code by using this plugin.

Q. Can I add my custom CSS code to a specific page of my website?

A. For now, this plugin does not have an option to apply the custom CSS code only on specific pages. We plan to add this feature soon. But for now in order to apply your custom CSS code only on specific pages of your website, you need to wrap your custom CSS code in a PHP code that will determine the page you want. You need something like this:

function my_custom_css_code() {

    // Stop the function if this is not the Home page of website
    if ( !is_home() ) {
        return;
    }

    // Print the custom CSS code
    echo '<style>YOUR CUSTOM CSS CODE HERE</style>';

}
add_action( 'wp_head', 'my_custom_css_code' );

To apply the PHP code on a website, we can recommend you to use another our plugin called My Custom Functions.

Q. It’s not working. What could be wrong?

A. As with every plugin, it’s possible that things don’t work. The most common reason for this is a web browser’s cache. Every web browser stores a cache of the websites you visit (pages, images, and etc.) to reduce bandwidth usage and server load. This is called the browser’s cache.​ Clearing your browser’s cache may solve the problem.

It’s impossible to tell what could be wrong exactly, but if you post a support request in the plugin’s support forum on WordPress.org, we’d be happy to give it a look and try to help out. Please include as much information as possible, including a link to your website where the problem can be seen.

Q. The last WordPress update is preventing me from editing my website that is using this plugin. Why is this?

A. This plugin can not cause such problem. More likely, the problem are related to the settings of the website. It could just be a cache, so please try to clear your website’s cache (may be you using a caching plugin, or some web service such as the CloudFlare) and then the cache of your web browser. Also please try to re-login to the website, this too can help.

Q. Where to report bug if found?

A. Bug reports are very welcome! Please visit our contact page and report. Thank you!

Q. Where to share any ideas or suggestions to make the plugin better?

A. Any suggestions are very welcome! Please visit our contact page and share. Thank you!

Q. I love this plugin! Can I help somehow?

A. Yes, any contributions are very welcome! Please visit our donation page. Thank you!

Reviews

Completly useless

It just adds css to your existing, nothing else. You can do it in Appearence/Customize/Additional CSS. Waste of time!

Read all 2 reviews

Contributors & Developers

“My Custom Styles” is open source software. The following people have contributed to this plugin.

Contributors

“My Custom Styles” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “My Custom Styles” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

4.31

  • Improvement: Design of the plugin settings page is improved.

4.30

  • Improvement: Design of the plugin settings page is improved.
  • Content of the “Usage Instructions” section updated.
  • Translation files are updated.

4.29

  • Added new feature: If the changes in the code editor were made, but not saved, the message “NOT SAVED” is displayed.
  • Code commenting improved.
  • Translation files are updated.

4.28

  • Content of the “FAQ” section updated.
  • CSS code, which is located in the file “admin.css” and is related to the “FAQ” section, is improved.
  • The sidebar items are rearranged.
  • Some texts are updated.
  • Translation files are updated.

4.27

  • The design of the message “Successful” is improved.
  • The “readme.txt” file is updated.
  • Some texts are updated.
  • Translation files are updated.

4.26

  • The ‘_add_styling’ function renamed to ‘_prepare’.
  • The function ‘_prepare’ is improved.
  • Code commenting improved.
  • Some texts are updated.
  • Translation files are updated.

4.25

  • Some texts are updated.
  • Translation files are updated.
  • The translation into Russian has been corrected.
  • The translation into Dutch has been corrected.

4.24

  • Dutch translation added. (Thanks to Peter Leenders)
  • The function ‘_load_scripts_codemirror’ is improved. Removed an unnecessary call of constants.
  • The function ‘_load_scripts_admin’ is improved.
  • The banner of Space X-Chimp, located on the settings page of the plugin, is updated. The image ‘banner.png’ is deleted.
  • Some texts are updated.
  • All translation files are updated.

4.23

  • The code block that enqueue the CodeMirror library files is moved to a separate function ‘_load_scripts_codemirror’ within the ‘enqueue.php’ file.
  • Enqueue of the CodeMirror addons is moved to the beginning of the queue, before enqueuing the CodeMirror mods.
  • All translation files are updated.

4.22

  • Fixed: CodeMirror addon ‘autorefresh.js’ was added to one of the previous versions of the plugin, but it was not enabled.

4.21

  • Fixed localization of the word “licence”. (Thanks to Garrett Hyder @garrett-eclipse)
  • Settings for the CodeMirror editor are moved to a separate file ‘codemirror-settings.js’.
  • Added the addon ‘placeholder.js’ to the CodeMirror editor. Added a placeholder for code field.
  • Translations are updated.

4.20

  • Updated the method of loading the addons of the CodeMirror library.
  • Added the addon ‘autorefresh.js’ to the CodeMirror editor. The code for manual refreshing the CodeMirror editor is deleted.

4.19

  • CodeMirror library updated to the latest version v5.38.0. The directory structure is changed (files are better organized). Added a test files for the CodeMirror modes.
  • Updated the method of loading the modes and addons of the CodeMirror library.

4.18

  • Fixed a bug due to which the plugin data that stored in the database to not be deleted during the uninstallation of the plugin.
  • The contents of the file ‘uninstall.php’ is moved to the file ‘core.php’. The file ‘uninstall.php’ is deleted.
  • The upgrade banner has moved from an external source to the plugin folder.
  • Some texts are corrected.

4.17

  • Added new constant “_FILE”.
  • Added a function that runs during the plugin activation. Now the date of the first activation of the plugin is recorded in the database.

4.16

  • Added auto-versioning of the CSS and JavaScript files to avoid cache issues.
  • CSS code in the file ‘admin.css’ is optimized.

4.15

  • Fixed the link “Settings”, located in the plugin’s meta row on the “Plugins” page. The suffix “.php” was deleted.
  • Fixed information stored in the header of the translation files.
  • Translation files updated.

4.14

  • Some texts updated, and typos corrected.
  • All translation files updated.
  • The information about the author of the plugin (including name, links, copyright, etc.) was changed due to the fact that the plugin became the property of SpaceXChimp.
  • The human.txt file updated.

4.13

  • Texts updated.
  • The year in the copyright text is updated.
  • The sidebar items are rearranged.
  • Translation files updated.

4.12

  • The plugin is fully tested for compatibility with WordPress version 4.9.
  • CSS code improved.

4.11

  • German translation added. (Thanks to Michael)
  • Spanish translation updated. (Thanks to Patricio Toledo)
  • Fixed an issue where the “Hello” message could not be hidden.

4.10

  • At the request of some users, plugin settings page moved to the submenu item in the top-level menu item “Settings”, like before.
  • In the “_register_submenu_page” function, “$capability” changed from the ‘edit_theme_options’ to ‘manage_options’.

4.9

  • Fixed the issue due to which the ‘Space X-Chimp’ sub menu item in the brand menu item was displayed.
  • Added branded footer text on the plugin’s settings page.

4.8

  • Added the top level menu item of the brand.
  • The submenu item of the plugin has moved to the menu item of the brand.
  • The menu item of the plugin is renamed.
  • The “Author” tab on the settings page is removed.
  • Content of the “Support” tab on the settings page is updated.
  • Copyright of plugin files is changed to the “Space X-Chimp”.
  • The “Support” tab renamed to the “Support Me”.
  • The “Usage” tab renamed to the “Usage Instructions”.

4.7

  • Added Spanish translation. (Thanks Patricio Toledo)
  • The group name of the ‘_service_info’ option renamed to ‘_settings_group_si’.
  • The ‘admin.css’ file improved.
  • The “Font Awesome” library is integrated for use on the plugin settings page.
  • The ON/OFF switch replaced with new.
  • The ‘bootstrap-checkbox.js’ JavaScript plugin added.
  • Prefixes of the PHP functions changed to ”spacexchimp_p003_.
  • Prefixes of the PHP constants changed to ”SPACEXCHIMP_P003_.
  • Plugin data that saved in the database upgraded to version 0001.

4.6

  • Russian translation updated. (Thanks to Milena Kiseleva)
  • The navigation of the tabs is rearranged.
  • Fixed an issue due to which the sidebar was not hiding on mobile devices.
  • Code of sidebar moved to separate file ‘sidebar.php’.
  • Support page tab moved from external source to plugin code.
  • My avatar moved from external source to plugin folder.
  • Banner moved from external source to plugin folder.
  • Code of PayPal button updated.

4.5

  • Stylesheet in the admin.css file improved.
  • The ‘!important’ declarations in the admin.css file removed.
  • Code formatting in the admin.js file improved.
  • Code commenting improved.
  • Load of the additional remote CSS file removed from the admin.js file.
  • Changed the sorting of enqueueing of scripts.
  • The ‘Family’ page tab renamed to ‘Store’.
  • Added ad banner of my store website.

4.4.1

  • The HTTPS mixed content issue fixed by changing all links to HTTPS.
  • Content of the “FAQ” section updated.

4.4

  • On the plugin settings page, text of buttons are corrected.
  • On the plugin settings page, the information about the plugin version number moved to header section.
  • Some mention of constants replaced with variables for easier access.
  • Content of the “Usage” tab updated.
  • Content of the “FAQ” tab updated.
  • An SSL issue within the admin area fixed. The ‘src=”http://’ replaced with ‘src=”//’.
  • Added load of the jQuery library on the plugin settings page.

4.3

  • To the plugin settings page added information about the plugin version number.
  • The “Tested up to:” comment changed to 4.8 after full testing process.
  • The “version.php” file renamed to “versioning.php”.
  • The “versioning.php” file updated to new version.
  • The “_plugin_version_number” function renamed to the “_versioning”.
  • Values of the variables on the settings page are improved.

4.2

  • Compatibility with PHP version 5.2 improved.
  • PHP shorthands improved.
  • Added function for generating the plugin constants.
  • Some constants now get the value from the plugin header data.
  • The “_plugin_version_number” function improved.
  • Added file “upgrade.php” for future upgrades.

4.1.1

  • Fixed the bug due to which the “Warning: Constants may only evaluate to scalar values in” warning are displayed.

4.1

  • Added new constants: “_SLUG”, “_PREFIX”, “_SETTINGS” and “_NAME”.
  • Value of the “_VERSION” constant replaced with information from the plugin header data.
  • All references to the plugin name, slug, prefix are replaced with constants.
  • The “name” attribute removed from the “form” tag.
  • Code formatting improved.
  • F.A.Q. section updated.

4.0.1

  • Fixed the bug due to which the the “Warning: Illegal string offset ‘version’ in” and the “Warning: Illegal string offset ‘old_version’ in” warnings are displayed. (Thanks to Sven Brill)

4.0

  • The design of the plugin settings page is completely redone.
  • Added additional donate link to the “Plugins” page.
  • The ‘Using’ section renamed to ‘Usage’.
  • My Unicode signature added to the main file.
  • The donate button replaced with new.
  • The ‘Donate’ section renamed to ‘Support’.
  • The ‘donate.png’ image removed.
  • Options from the settings page moved to a separate file.
  • The “Usage” section removed from the sidebar area.
  • Additional “Support” section added.
  • Added tab navigation menu for the settings page.
  • Added additional tabs on the settings page.
  • Code of the ‘admin.css’ file improved and better commented.
  • A full version of the Bootstrap framework is integrated.
  • The ‘mcstyles_load_scripts’ function renamed to ‘mcstyles_load_scripts_admin’.
  • Added the CSS code for the custom list numbers on the plugin settings page.
  • The main font is changed to “Verdana”.
  • All PHP and HTML code is better formatted.
  • The header on the settings page of plugin is redesigned.
  • The “LICENSE.txt” file renamed to “license.txt”.
  • The “humans.txt” file added.
  • Messages from the plugin settings page moved to a separate file “messages.php”.
  • The “_service_info” setting added to the data-base.
  • Added function for managing information about the version number of the plugin.
  • Added the “Hello” message that show when the plugin is just installed.
  • Added the “Error” message that show when user is trying to degrade the version number of the plugin.
  • Fixed the parameter that contain the path to source files in all translation files.
  • The POT file updated.
  • Translations updated.

3.3

  • Added global constant for plugin text-domain.
  • Translations updated.
  • Readme for translations updated.
  • Link of banner image updated.

3.2

  • On the settings page changed an advertisement about the PRO version of this plugin.
  • The Readme.txt file improved.
  • Added the Readme.txt file for translation contribution.

3.1.1

  • Link to the premium version of plugin changed.
  • The Readme.txt file improved.

3.1

  • Added prefixes to the stylesheet and script names when using wp_enqueue_style() and wp_enqueue_script().
  • Added constant for storing the plugin version number.

3.0

  • The structure of files changed.
  • Style sheet of settings page improved and better commented.
  • JS code improved.
  • Donate text added.

2.3

  • Added a toggle for temporarily disable the custom CSS code.
  • Added active-line.js add-on to CodeMirror editor.
  • Added function for stoping execution of user entered code if it empty.
  • Added function of automatic remove the “successful” message after 3 seconds.
  • Removed the default message about successful saving.
  • Color of editors border changed to #ddd.
  • Styles of settings page optimized for mobile devices.
  • The styles.css file better commented.
  • The _enqueue_codemirror_scripts function renamed to mcstyles_load_scripts.
  • The esc_textarea() removed from the preparing function of user entered code.

2.2

  • CodeMirror library updated to version 5.16.0.
  • File js-functions.js renamed to functions.js.
  • Added the ad about PRO version of this plugin.
  • Removed my personal ad about freelance.

2.1

  • Text domain changed to “my-custom-styles”.
  • Added compatibility with the translate.wordpress.org.
  • All images are moved to the directory “images”.
  • Image “btn_donateCC_LG.gif” is now located in the “images” directory.
  • Strict mode enabled in the file js-functions.js.

2.0

  • New design of settings page (new layout).
  • Constants variables added.
  • editor.js deleted.
  • js-functions.js (file with all js functions) created.
  • Plugin URI changed to GitHub repository.
  • Added my personal ad about freelance.
  • .pot file updated.
  • Russian translation updated.

1.7

  • Donate link changed.
  • Localization improved.
  • .pot file updated.

1.6

  • Authors URI changed.

1.5

  • Removed more unused do_action() from page.php file.

1.4

  • The stylesheet of plugin page moved to separate file.
  • The javascript from page.php moved to separate file.
  • Changed the style of title in plugin page.
  • The LICENSE file renamed to LICENSE.txt.
  • Fixed the prefix in name of function “mcstyles_add_styling”.

1.3

  • Fixed the issue due to which nothing appears below line 26 until you click below that line.

1.2

  • Combined and minified the CodeMirror scripts.
  • Deleted excess line: “delete_option( ‘mcstyles_error’ )”.

1.1

  • Added ready for translation (.pot file included).
  • Added russian translation.

1.0

  • Initial release.
  • Added syntax highlighting by CodeMirror.
  • Added line numbering by CodeMirror.

0.3

  • Release candidate.

0.2

  • Beta version.

0.1

  • Alpha version.