How to add custom styles in the Wordpress TinyMCE editor without a plugin

How to add custom styles in the WordPress TinyMCE editor without a plugin

By | Web Development, WordPress | 2 Comments

I’m sure you’ve run into this issue so many times if you’ve made themes whose complexity ranges from medium to tearing-your-hair-out-and-wishing-the-designer-has-diarrhea: The admin needs to be able to add a custom style to one of the elements from the WordPress editor. Sounds simple enough, and it is.

But before you go styling away, always keep this to a minimum. Although WordPress and other publishing platforms are used as Content Management Systems, the meaning of that phrase seems to be misunderstood. “Content” management is exactly that: managing content. This means the layout and styles are supposed to be kept separate from the content. But there are cases where this cannot be avoided, and those are exactly the cases for which this post was created.

As always, this is done in three easy steps:

Step 1: Edit your functions.php

If you don’t have a functions.php files in your theme, create one, and add the following code:

// Add a "styleselect" drop down menu to the editor
add_filter( 'mce_buttons_2', 'my_awesome_buttons' );
function my_awesome_buttons( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

// Initialize our buttons
add_filter( 'tiny_mce_before_init', 'init_my_awsome_buttons' );
function init_my_awsome_buttons( $settings ) {

    $style_formats = array(
        array(
        	'title' => 'Super Div',
        	'block' => 'div',
        	'classes' => 'super-div',
        	'wrapper' => true // --- * Notice how this is a wrapper * ---
        ),
    	array(
    		'title' => 'Awesome Button Link',
    		'selector' => 'a', // --- * This means it will only work with A's * ---
    		'classes' => 'awesome-button-link'
    	)
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}

// Add style sheet for the custom styles to the TinyMCE Editor in the Admin
function awesome_tinymce_css( $blah ) {
	$blah .= ',' . get_bloginfo('stylesheet_directory') . '/awesome.css';
	return $blah;
}
// We now tell WordPress to load our style sheet inside its editor!
add_filter( 'mce_css', 'awesome_tinymce_css' );

Step 2: awesome.css

Create an “awesome.css” and put it in your theme’s directory. We will use this files to make our awesome styles appear in the TinyMCE editor.

.super-div {
	border:1px dotted #CCC;
	padding:5px;
}
.awesome-button-link {
	display:inline-block;
	padding:5px;
	background-color:#F90;
	color:#FFF;
}

Step 3: Be awesome

Now add a new Post or Page in your WordPress admin and you can try out your newly created styles like so:

  • Add a Super Div by selecting it from the “Styles” dropdown
  • Type some text and make it a link. Remember, according to our code the Awesome Button Link only works with an ‘A’ tag
  • Once you’ve made a link, select it and apply the “Awesome Button Link” style to it
  • Impress your client!

Here’s an example of how our code works:

How to make a custom Magento payment extension for an external gateway

How to make a custom Magento payment extension for an external gateway

By | Magento, Web Development | 259 Comments

Note: This tutorial is for Magento versions 1.x.x, and does not work on Magento 2 +.

Magento is a great open source e-commerce platform and has emerged as the market leader in the recent past. However, it still has a steep learning curve and although the community is growing exponentially, I was not able to find a simple tutorial on how to make a Magento payment extension which links up to an external payment gateway.

In this tutorial, I’m going to attempt to show you how to make a bare-minimum extension, which you’ll need to complete because different payment gateways have different APIs, hooks and functionality. This is by no means a definitive guide, but my attempt to try and get you started. Please note this tutorial assumes that you already know how to build a simple custom extension and have average knowledge of Magento, MVC architecture and of course, PHP. This tutorial is for Magento versions 1.4 and above.

I have created a bare-minimum version of the extension which you need to download from the steps that follow. I hope the code will be self-explanatory. For information from Magento’s wiki click here.

Step #1: Click here to download the ZIP archive for this step. Extract it to app/code/local

Step #2: Click here to download the ZIP archive for this step. Extract it to app/design/frontend/base/default/template

Step #3: Click here to download the ZIP archive for this step. Extract it to app/etc/modules

Once you have done this, you need to follow the following steps to get it working:

  1. Open app/code/local/Myname/Mygateway/controllers/PaymentController.php and read through the inline comments carefully. The URL that the payment gateway needs to redirect to on your web site after processing the customer’s payment (based on the naming we’ve used in this example) should be: http://www.yourwebsite.com/mygateway/payment/response . This URL will trigger the responseAction() function in the PaymentController, where we will need to validate the response sent by the gateway (to make sure it’s really from there), and if validated, process the order. The validation code is generally provided by the payment gateway.
  2. Open app/design/frontend/base/default/template/mygateway/redirect.phtml . This is where we post our values to our external gateway. We can retrieve any order information and pass it on as hidden form fields, which is submitted via JavaScript.
  3. Log into your Magento admin, clear your cache, and make sure the extension is enabled and working fine by navigating to System -> Configuration -> Sales -> Payment Methods and checking if you can see it there.

It is extremely important to go through all the files to get a perfect understanding of the extension. I figured the best way to learn this is to look at a working example. This took me a long time to figure out and I hope this saves a lot of effort for someone. Happy coding!