Adding javascript to wordpress

New Page

Accept custom JavaScript on the WordPress site

1dfb494a14ba494a42745acbe97ec1d5

Valentin Garcia February 4, 2016

46Comments

Accept custom JavaScript on the WordPress site

In some situations, you may need to add custom Javascript to your site. Normally, this would involve modifying your theme files.

Without embargo, there is an alternativa menos intrusiva. “Scripts de encabezado y pie de página” is an add-on to add custom JavaScript to WordPress without changing its theme.

In this tutorial, you have displayed the most useful function.

First, let’s install the plugin:

  • Launch the session on the WordPress site.
  • Go to Plugins > Add New
  • Look for “Header and Footer Scripts”.
  • Click on “Instalar ahora” and activate the add-on.

Custom JavaScript and WordPress

Option 1. Upload a custom Javascript file

  • Guarde su código JavaScript personalizado en un archivo con el  formato .js
  • Súbalo a su sitio en esta carpeta: wp-content/themes/your-theme/js/
  • Go to Settings > Header and Footer Scripts.

Now you have two options to load the file:

  • Scripts in header (load inside head tag)
  • Scripts in footer (load before closing body tag)

Use the location that match better your needs using this syntax as example:

{codecitation js}<script src=”http://www.yoursite.any/wp-content/themes/your-theme/js/file.js”></script>{/codecitation}

Custom JavaScript and WordPress

  • Click “Save settings” button when you’re done.

Option #2. Load custom JavaScript without a file

Alternatively, you can add your code directly into WordPress without the need for a custom .js file:

Custom JavaScript and WordPress

  • Click “Save settings” button when you’re done.

Instructor

  • 1dfb494a14ba494a42745acbe97ec1d5 Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he considers it the best CMS. Valentin has been coding extensions and templates for Joomla for many years and really enjoys helping people build their own websites with Open Source tools. He lives in San Julian, Jalisco, Mexico.

icon-128x128

To download

Simple custom CSS and JS

Par SilkyPress.com

  • Details
  • Comments
  • Installation
  • Support
  • Development

La description

Customize the look of your WordPress site by easily adding custom CSS and JS code without even having to modify your theme or plugin files. This is perfect for adding custom CSS tweaks to your site.

Features

  • Text editor with syntax highlighting
  • Imprimer le code en ligne ou inclus dans un fichier externe
  • Imprimer le code dans l’en- tête ou le pied de page
  • Add CSS or JS to the frontend or the admin side
  • Add as many codes as you want
  • Keep your changes also when you change the theme

Screenshots

screenshot-1 Manage Custom Codes

screenshot-2 Add/Edit Javascript

screenshot-3 Add/Edit CSS

screenshot-4

Custom administration codes

Add/Modify Javascript Add/Edit CSS screenshot-4

Installation

  • From the WP admin panel, click “Plugins” -> “Add new”.
  • In the browser input box, type “Simple Custom CSS and JS”.
  • Select the “Simple Custom CSS and JS” plugin and click “Install”.
  • Activate the plugin.

OR…

  • Download the plugin from this page.
  • Save the .zip file to a location on your computer.
  • Open the WP admin panel, and click “Plugins” -> “Add new”.
  • Click “upload”.. then browse to the .zip file downloaded from this page.
  • Click “Install”.. and then “Activate plugin”.

OR…

  • Download the plugin from this page.
  • Extract the .zip file to a location on your computer.
  • Use either FTP or your hosts cPanel to gain access to your website file directories.
  • Browse to the wp-content/plugins directory.
  • Upload the extracted custom-css-js folder to this directory location.
  • Open the WP admin panel.. click the “Plugins” page.. and click “Activate” under the newly added “Simple Custom CSS and JS” plugin.

FAQ

What if I want to add multiple external CSS codes?

If you write multiple codes of the same type (for example: two external CSS codes), then all of them will be printed one after another

Will this plugin affect the loading time?

When you click the Save button the codes will be cached in files, so there are no tedious database queries.

Does the plugin modify the code I write in the editor?

No, the code is printed exactly as in the editor. It is not modified/checked/validated in any way. You take the full responsability for what is written in there.

My code doesn’t show on the website

Try one of the following: 1. If you are using any caching plugin (like “W3 Total Cache” or “WP Fastest Cache”), then don’t forget to delete the cache before seing the code printed on the website. 2. Make sure the code is in Published state (not Draft or in Trash). 3. Check if the wp-content/uploads/custom-css-js folder exists and is writable

Does it work with a Multisite Network?

Yes.

What if I change the theme?

The CSS and JS are independent of the theme and they will persist through a theme change. This is particularly useful if you apply CSS and JS for modifying a plugin’s output.

Can I use a CSS preprocesor like LESS or Sass?

For the moment only plain CSS is supported, but you can check out the Pro version in case you need a CSS preprocessor.

Can I upload images for use with my CSS?

Yes. You can upload an image to your Media Library, then refer to it by its direct URL from within the CSS stylesheet. For example: div#content { background-image: url(‘http://example.com/wp-content/uploads/2015/12/image.jpg’); }

Can I use CSS rules like @import and @font-face?

Yes.

Who can publish/edit/delete Custom Codes?

By default only the Administrator will be able to publish/edit/delete Custom Codes. On the plugin activation there is a role created called Web Designer. You can assign this role to a non-admin user in order to allow to publish/edit/delete Custom Codes. On the plugin’s Settings page there is an option to remove this role.

Compatibility with qTranslate X plugin

  • If the qTranslate X plugin is adding some [:] or [:en] characters to your code, then you need to remove the custom-css-js post type from the qTranslate settings. Check out this screenshot on how to do that.

My website has HTTPS urls, but the codes are linked as HTTP

The URL for the linked Codes is built just like the URL for other media (from Media Library) by using the WordPress Address option found on the WP Admin -> Settings -> General page, as shown in this screenshot. If the WordPress Address has HTTPS in the url, then the Custom Codes and all the other media will have HTTPS in the url.

Reviews

a93f4bb6b7304131aa6e63f71697b07c

Yes, that’s what we need

perthykjaerjensen September 17, 2022

This plugin is very effective. Thank you for this excellent work. One innovation I could wish for in the upcoming versions of the plugin would be to add HTML-elements to the <head> section. When we import CDNs or scripts such a feature would come in handy.

0a888f760aba1e5b2e9a614e6616da70

JS File read as HTML File

suhendrayohanaputra September 9, 2022

Hello, I think there’s an issue, when I click hyperlink of JS File, it’s not showing as JS File but html file.

8295c18f9b3fdb341872139fa2f4a48e

+1

botob July 1, 2022

Plugin do everything from description and doing it enough good.

a5cbd801362c75dcf6add025eed1e07f

Einfach Genial

conair May 4, 2022

Sehr guttes un brauchbares Tool. Feines und ohne großen Aufwand zu Bedienen. Danke

09617e415f9e207aefc914ce7ea67043

Great plugin!

borseba April 21, 2022

This plugin is excellent. The only thing missing is the ability to add functions to avoid having to enter the child theme (to edit functions.php).

2f2f99deeaaac5be8c3051d36143aaff

Works ok, but…

Lazylonewolf 11 février 2022

I was hoping this could override the custom CSS from the Customizer, but… My styling works for the most part after completely erasing the custom CSS and replacing it with this. However, my styling for the @media screen of the #header and (max-width: 980px) just doesn’t work for some reason, but it does in Customizer Custom CSS. It continues to use the default #header size. I don’t know if it’s a cascading priority issue or not. Since I don’t know what CSS isn’t working because of this plugin and I don’t have time to recheck everything, I guess I’ll go back to using the Customizer.

Read all 82 reviews

Contributors & Developers

“Simple Custom CSS and JS” is open source software. The following people have contributed to this plugin.

Contributors

  • ef6f9b1dd4efd332104b6727b0cfc24aDiana Burduja

“Simple Custom CSS and JS” has been translated into 14 locales. Thank you to the translators for their contributions.

Translate “Simple Custom CSS and JS” into your language.

Interested in development?

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

Changelog

3.41

  • 10/05/2022
  • Feature: code folding in the editor

3.40

  • 06/10/2022
  • Feature: keep the user-set editor’s height upon page loads and custom code saves
  • Feature: save the custom code upon “Ctrl-S” in the editor
  • Tweak: admin side adjustments for RTL languages

3.39

  • 03/16/2022
  • Fix: load the CodeMirror options from a localized variable
  • Tweak: add the “ccj_code_editor_settings” filter for modifying the editor’s options

3.38.1

  • 12/02/2021
  • Fix: revert the code related to the compatibility with the HTML Editor Syntax Highlighter plugin

3.38

  • 11/09/2021
  • Fix: escape labels on the “Add new custom code” page
  • Feature: keep the last cursor position in the editor and let the editor get focus when the page loads

3.37

  • 07/12/2021
  • Fix: allow the TablePress plugin to load its JS files on the “Add custom code” page in admin
  • Feature: highlight active line in the editor
  • Feature: add “Ctrl + J” shortcut to the editor for jumping to the matching tag

3.36

  • 02/23/2021
  • Fix: fatal error with PHP8.0

3.35

  • 01/19/2021
  • Tweak: change dummy revision dates to fictional dates before 2000
  • Fix: replace the deprecated postL10n JS object with wp.i18n
  • Fix: add “tipsy-no-html” to the tooltips on the settings page

3.34

  • 11/01/2020
  • Feature: enqueue the jQuery library if one of the JS custom codes requires it
  • Fix: set cookie SameSite attribute to lax

3.33

  • 08/20/2020
  • Fix: the user language preferrence was ignored in favor of the site defined language
  • Fix: allow the jQuery library added by plugins like Enable jQuery Migrate Helper or Test jQuery Updates
  • Fix: permalink was not editable with WordPress 5.5
  • Feature: fullscreen editor
  • Feature: button for beautifying the code

3.32

  • 07/08/2020
  • Fix: add “Cmd + ” editor shortcuts for MacOS computers
  • Fix: use file_get_contents instead of include_once to load the custom codes
  • Fix: compatibility issue with the Product Slider for WooCommerce by ShapedPlugin
  • Feature: “Ctrl + /” in the editor will comment out the code
  • Feature: order custom codes table by “type” and “active” state
  • Feature: autocomplete in the editor

3.31

  • 03/21/2020
  • Declare compatibility WooCommerce 4.1
  • Feature: add “After tag” option for HTML codes, if the theme allows it
  • Feature: don’t show type attribute for script and style tags if the theme adds html5 support for it
  • Code refactory
  • Fix: the permalink was mistakingly showing a “.css” file extension when being edited

3.30

  • 03/12/2020
  • Feature: color the matching brackets in the editor
  • Declare compatibility WooCommerce 4.0
  • Declare compatibility WordPress 5.4

3.29

  • 01/31/2020
  • Fix: date Published and Modified date wasn’t shown in Japanese
  • Feature: indentation in the editor
  • Feature: close brackets in the editor

3.28

  • 11/05/2019
  • Tweak: update the Bootstrap and jQuery library links
  • Declare compatibility with WordPress 5.3

3.27

  • 08/08/2019
  • Compatibility with the “CMSMasters Content Composer” plugin
  • Feature: keep the cursor position after saving
  • Option: remove the comments from the HTML

3.26

  • 05/08/2019
  • Fix: remove the Codemirror library added from WP Core
  • Tweak: use protocol relative urls for custom code linked file
  • Declare compatibility with WordPress 5.2

3.25

  • 04/21/2019
  • Tweak: update the Bootstrap and jQuery library links
  • Declare compatibility with WooCommerce 3.6

3.24

  • 04/05/2019
  • Fix: remove the editor scrollbar
  • Tweak: rename “First Page” to “Homepage” to avoid misunderstandings

3.23

  • 03/15/2019
  • Fix: avoid conflicts with other plugins that use CodeMirror as their editor

3.22

  • 12/06/2018
  • Fix: another solution for the bug related to the Edit Custom Code page was blank for WordPress 5.0 and the Classic Editor enabled

3.21

  • 12/06/2018
  • Fix: the Edit Custom Code page was blank for WordPress 5.0 and the Classic Editor enabled

3.20

  • 11/15/2018
  • Fix: remove compatibility with the Shortcoder plugin. Bug https://wordpress.org/support/topic/edit-page-blank-8/
  • Declare compatibility WooCommerce 3.5

3.19

  • 10/16/2018
  • Fix: keep the editor LTR even on RTL websites
  • Fix: flush rewrite rules after modifying the “Add Web Designer role” option

3.18

  • 07/13/2018
  • Fix: the default comment for JS for other locales than “en_” was removing the tags
  • Tweak: make the search dialog persistent
  • Tweak: correct the tooltip info for the ‘ccs_js_designer’ option

3.17

  • 04/25/2018
  • Fix: add the add/edit/delete custom post capabilities to the admin and ‘css_js_designer’ roles on plugin activation

3.16

  • 04/22/2018
  • Fix: “The link you followed has expired” on custom code save if the WP Quads Pro plugin is active
  • Fix: PHP warning for PHP 7.2
  • Change: add/remove the “Web Designer” role only on activating/deactivating the option in the Settings page

3.15

  • 03/27/2018
  • Change: check the option name against an array of allowed values

3.14

  • 02/04/2018
  • Feature: permalink slug for custom codes
  • Fix: set the footer scripts to a higher priority
  • Update the french translation
  • Fix: allow admin stylesheets from ACF plugin, otherwise it breaks the post.php page
  • Tweak: for post.php and post-new.php page show code’s title in the page title

3.13

  • 01/12/2018
  • Feature: add the “Keep the HTML entities, don’t convert to its character” option

3.12

  • 01/03/2018
  • Reverse to the wp_footer function for the footer scripts, as the print_footer_scripts function is used also in the admin, which lead to many broken back-ends

3.11

  • 01/03/2018
  • Use the print_footer_scripts function for the footer scripts (https://wordpress.org/support/topic/footer-code-position-before-external-scripts-is-overridden/)
  • Escape selectively the HTML characters in the editor (https://wordpress.org/support/topic/annoying-bug-in-text-editor/)

3.10

  • 12/15/2017
  • Fix: https://wordpress.org/support/topic/broken-layout-of-code-snippet-type-color-tag-css-html-js-on-main-list-table/
  • Feature: add filter by code type
  • Feature: make the ‘Modified’ column sortable
  • Fix: if the default comment remains in the “Add Custom JS”, then there was no tags added to the code, as the comment contained a tag

3.9

  • 12/01/2017
  • Feature: add “Last edited …” information under the editor
  • Fix: jump to line when searching
  • Tweak: add message that the Code Revision data is dummy

3.8

  • 10/19/2017
  • Declare compatibility with WooCommerce 3.2 (https://woocommerce.wordpress.com/2017/08/28/new-version-check-in-woocommerce-3-2/)
  • Fix: avoid conflicts with other plugins that implement the CodeMirror editor
  • Update the CodeMirror library to 5.28 version

3.7

  • 10/06/2017
  • Add French and Polish translation

3.6

  • 09/07/2017
  • Fix: compatibility with the CSS Plus plugin

3.5

  • 08/25/2017
  • Code refactoring
  • Add activate/deactivate link to row actions and in Publish box
  • Make the activate/deactivate links work with AJAX
  • Add Turkish translation

3.4

  • 07/11/2017
  • Security fix according to VN: JVN#31459091 / TN: JPCERT#91837758

3.3

  • 06/23/2017
  • Feature: option for adding Codes to the Login Page

3.2

  • 06/13/2017
  • Fix: compatibility issue with the HTML Editor Syntax Highlighter plugin

3.1

  • 05/14/2017
  • Feature: prepare the plugin for translation

3.0

  • 04/12/2017
  • Feature: create the Web Designer role
  • Feature: allow Custom Codes to be managed only by users with the right capabilities

2.10

  • 02/05/2017
  • Feature: circumvent external file caching by adding a GET parameter
  • Add special offer for Simple Custom CSS and JS pro

2.9

  • 12/05/2016
  • Compatibility with WP4.7. The “custom HTML code” was not showing up anymore

2.8

  • 10/09/2016
  • Feature: add search within the editor accessible with Ctrl+F
  • Feature: make the inactive rows opaque

2.7

  • 09/04/2016
  • Fix: there was a space in the htmlmixed.%20js url
  • Feature: make the editor resizable

2.6

  • 08/31/2016
  • Feature: add HTML code
  • Fix: add htmlentities when showing them in the editor
  • Feature: when adding a code, show more explanations as comments

2.5

  • 08/25/2016
  • Fix: compatibility with other plugins that interfere with the CodeMirror editor

2.4

  • 08/01/2016
  • Add the “Add CSS Code” and “Add JS Code” buttons next to the page title
  • Compatibility with WP 4.6: the “Modified” column in the Codes listing was empty

2.3

  • 06/22/2016
  • Add the includes/admin-notices.php and includes/admin-addons.php
  • Feature: change the editor’s scrollbar so it can be caught with the mouse

2.2

  • 06/22/2016
  • Check compatibility WordPress 4.5.3
  • Add special offer for Simple Custom CSS and JS pro

2.1

  • 04/24/2016
  • Fix: on multisite installs have to create the custom-css-js folder in the upload dir for each site
  • Fix: the deactivate code star wasn’t working when first time clicked
  • Fix: In the add/edit Code page filter which meta boxes are allowed
  • Fix: If the custom-css-js folder is not created of is not writable, issue an admin notice.

2.0

  • 04/11/2016
  • Feature: enable/disable codes
  • Feature: add a GET parameter at the end of external files in order to over circumvent caching
  • Fix: don’t add the “” tag from the code if already present.

1.6

  • 03/26/2016
  • Fix: the number of codes were limited because query_posts is automatically inserting a limit

1.5

  • 03/10/2016
  • Fix: solved a conflict with the shortcoder plugin.

1.4

  • 01/04/2016
  • Tweak: Do not enqueue scripts unless we are editing the a custom-css-js type post.
  • Fix: The register_activation_hook was throwing a notice
  • Solución: agregue window.onload al inicializar el editor de CodeMirror
  • Tweak: diferenció los nombres de las opciones para “Dónde en la página” y “Dónde en el sitio”
  • Solution : établissez les modos de idioma correctos en el objeto CodeMirror
  • Tweak : supprimer la slugmetabox
  • Tweak : usa la version comprimida de CodeMirror

1.3

  • 27/12/2015
  • Tweak: cambió los submenús a “Agregar CSS personalizado” y “Agregar JS personalizado” en lugar de “Nuevo código personalizado”
  • Tweak : use admin_headen lugar de admin_enqueue_scriptspara archivos externos para agregar prioridad al código
  • Correction : no se mostraba el código javascript
  • Solution : para un code más largo, la última línea en el editor estaba oculta debido a CodeMirrorBefore div.

1.2

  • 14/12/2015
  • Fix: When a code was sent to Trash, it still didn’t display on the website

1.1

  • 10/12/2015
  • Tweak: For external archives use wp_head and wp_footer using wp_enqueue_style. On the contrary, el CSS and el JS are inserted before all the demás scripts and are sobrescribed.
  • Tweak: keep all the codes in archives to ahorrar in the consultation of the database
  • Tweak: Rewrite the readme.txt sous the FAQ form for better explanations

1.0

  • 12/06/2015
  • Compromise initial

Meta

  • Version : 3.41
  • Last update: 2  weeks
  • Installations actives : 500 000+
  • WordPress version: 3.0.1 or higher
  • Probably up to: 6.1
  • PHP version: 5.2.4 or higher
  • Idiomatic expressions :

    Version 15

    fence

    Dutch, English (US), French (France), Galician, German, Japanese, Persian, Polish, Russian, Spanish (Colombie), Spanish (Equateur), Spanish (Méxique), Spanish (Spain), Spanish (Venezuela ) et swedish _

    I will translate into your language

  • Labels:

    custom css custom css js javascript JS

  • Advanced view

Ratings View All

  • 5 stars 66
  • 4 stars 2
  • 3 stars 3
  • 2 stars 1
  • 1 star 10

Log in to submit a review.

Collaborators

  • ef6f9b1dd4efd332104b6727b0cfc24aDiana Burduja

Support for

Incidents resolved in the last two months:

9 out of 10

See support forum

Google Google translator

Google Google Translate


Video Adding javascript to wordpress

Related Posts

Free chat room code for my website

Contents1 How to set up a free chat room on the website.2 3 comentarios2.1 Trackbacks/Pingbacks2.2 Submit a Comment Cancel reply3 How to Create a Chat Room Website…

Background image full screen css

Contents1 Cómo – Full Page Image1.1 Example1.2 Example2 CSS background image tamaño tutorial: how to codify a complete page background image3 Perfect Full Page Background Image3.1 Méthode CSS géniale,…

WordPress leverage browser caching

Contents1 Aproveche el almacenamiento in hidden del navegador1.1 Will it works for my website?1.2 Where are plugin options1.3 Some JavaScript files still display under Leverage Browser Caching1.4…

WordPress post to facebook page

Contents1 How to Automatically Post to Facebook from WordPress1.1 Download Now: How to Launch a WordPress Website [Free Guide + Checklist]1.2 1. Create an IFTTT account.1.3 2….

Download images from wordpress media library

Contents1 How to export your WordPress media library1.1 Download maintenant : How to launch a WordPress website [Free Guide + Checklist]1.2 How to export your WordPress media…

WordPress single post template

Contents1 How to Create Custom Unique Post Templates in WordPress2 Post Template Files2.1 author.php2.2 Fecha.php3 Handbook navigation4 How to Create Custom Single Post Templates in WordPress5 Video…