Make big changes to your Joomla site & template with custom code

Last Updated:
Category:
Customization Tips

If you want to insert custom code: JavaScript, PHP, HTML or CSS code (including banners or text ads like Google Adsense) in Modules or directly in the template (header/body) you have to use additional extension(s) for Joomla 2.5 or Joomla 3. Some of them can also display random HTML-code in the content of your website.

Note: All those tools eliminates the hassles of manually inserting such code directly into your templates php/css files. Most of them are free to download (GPL) and they are available directly from JED.

Custom Code Plug-ins

  • Sourcerer – enables you to place PHP and any kind of HTML style code (including CSS and JavaScript) right into your content! Not only in your articles, but also in sections, categories, modules, components, META tags, etc.
  • EXT Custom JS/CSS – this system plugin performs one simple function: It inserts custom javascript or CSS code in the head section of your Joomla all pages. This extension have only two fields to insert your code.
  • JT Custom HTML code – a plugin that allows direct embedding of HTML tags right inside Joomla content page! You can exclude article and categories, for example, if you use single article on homepage you can use it.
  • JT Random HTML code – this plugin displays random HTML-code in the articles of your website. It allows you to use 10 fields for random HTML code and select from few options. This same developer also created a module which allows you this same functionality, but within a module block.

    options-random-html

Custom Code Modules

Modules gives you more flexibility because they allows you to choose pages and specify where & when custom code must be inserted.

  • BlankModule – this module has a text area on the backend for accepting code. This means that you can cut and paste code such as potential advertisers or ads that Google may supply you with. You can also access Joomla article content and insert it into module positions. It also has a mode that accepts PHP code directly. It allows you to insert Scripts and Head Tags on assigned menu items.

    blankmodule

  • Compago Blank Module – has similar features to the prior module.

    compago-blankmodule_settings

  • Custom HTML Advanced – compared to the standard mod_custom it has the following features: No filtering (even for script tags), override module position in Chrome to remove unwanted wrapping HTML code around the module. Can also include CSS definitions that will be placed into the page header only on the pages where the module is present. Allows template CSS overrides on selected pages.

    custom-html-adv-settings

Custom CSS Class on Selected Page(s)

In the Menu Manager, in Edit Menu Item you will find the Page Class options – which allows CSS styling specific to the selected(this) page. Remember to add a space before the class name.

page-class-css

page-class-result

This solution will be good enough when you want to add & use additional class inside articles or components.

TIP: Read article about how to use custom CSS in template for all pages

Note: Since none of these extensions belong to us (Gavick team) if you have any questions, please contact the developer of the plug-in or module.

Make big changes to your Joomla site & template with custom code 4.295 (85.88%) 17 votes

This article was first published

Villa Belluci - View our NEW theme
×

Tutorials & tips delivered regularly

Expand your purchase with regular tutorials and tips to making your site better, direct to your email.