Newsletters: Style Links as Buttons
Style links as buttons in newsletters using the WordPress Newsletter plugin.
1. Add a Class to Links
You can add a CSS class to links by going into the “Text” mode of the editor and adding a class attribute with class name. Alternatively and more easily, use a plugin such as the TinyMCE Advanced plugin which gives you this functionality.
The result will be something like:
2. Create Button CSS
Now go ahead and design your button as you want it to look. This completely depends on how you want your buttons to look.
Here is some sample CSS for a flat, blue button with rounded corners as shown above:
3. Add Button CSS to HEAD
Edit your newsletter template either in a text/code editor or under Newsletters > Templates in the WordPress Newsletter plugin.
Add the CSS class and styles for the button the <style> tags in the <head> section accordingly.
4. Apply Inline Styles
So instead of applying inline styles on each link, you’ll just put the class newsletters_button on it and the CSS that you placed in the <style> tags in the <head> section in step #3 above will be applied automatically considering that you have the “Auto Inline Styles” turned on in the Newsletter plugin.
You’ll find the setting under Newsletters > Configuration > General > Sending Settings in the WordPress Newsletter plugin. With the setting turned on, the plugin will take all <style> tags with their styles and apply it as inline CSS to the relevant classes/IDs upon sending the newsletter.
It gives you cross-client compatible emails, always!
CSS Classes of Predefined Links
The WordPress Newsletter plugin generates some links automatically in the templates, newsletters and from certain shortcodes.
All predefined links have the class newsletters_link on them by default. So you can style them in CSS using .newsletters_link.
Here is a list of the CSS classes on those links so that you can style them as needed.
Activation Link
Link generated by [wpmlactivate] has newsletters_activate class on it.
Resubscribe Link
Link generated by [newsletters_resubscribe] has newsletters_resubscribe class on it.
Unsubscribe Link
Link generated by [wpmlunsubscribe] has newsletters_unsubscribe class on it.
Management Link
Link generated by [wpmlmanage] has newsletters_manage on it.
Online Link
Link generated by [wpmlonline] has newsletters_online on it.
WordPress Plugins
Start selling products, sending newsletters, publishing ads, and more through your own WordPress website using our premium WordPress plugins.
