0

Is it possible to add a class to links created with the link button in the posts editor of wordpress. If not is there a plugin that allow me to do that? Thanks in advance

0

Is it possible? Sure.

You just need to re-declare the wpLink function that generates the link from the button. For example like this

function wpse_181706_overwrite_wpLink() {
   if (wp_script_is('quicktags')){ ?>
    <script type="text/javascript">
            var wpLink;!function(e){var t,i,n,s,l={},a={},r="ontouchend"in document;wpLink={timeToTriggerRiver:150,minRiverAJAXDuration:200,riverBottomThreshold:5,keySensitivity:100,lastSearch:"",textarea:"",init:function(){l.wrap=e("#wp-link-wrap"),l.dialog=e("#wp-link"),l.backdrop=e("#wp-link-backdrop"),l.submit=e("#wp-link-submit"),l.close=e("#wp-link-close"),l.url=e("#url-field"),l.nonce=e("#_ajax_linking_nonce"),l.title=e("#link-title-field"),l.openInNewTab=e("#link-target-checkbox"),l.search=e("#search-field"),a.search=new n(e("#search-results")),a.recent=new n(e("#most-recent-results")),a.elements=l.dialog.find(".query-results"),l.queryNotice=e("#query-notice-message"),l.queryNoticeTextDefault=l.queryNotice.find(".query-notice-default"),l.queryNoticeTextHint=l.queryNotice.find(".query-notice-hint"),l.dialog.keydown(wpLink.keydown),l.dialog.keyup(wpLink.keyup),l.submit.click(function(e){e.preventDefault(),wpLink.update()}),l.close.add(l.backdrop).add("#wp-link-cancel a").click(function(e){e.preventDefault(),wpLink.close()}),e("#wp-link-search-toggle").on("click",wpLink.toggleInternalLinking),a.elements.on("river-select",wpLink.updateFields),l.search.on("focus.wplink",function(){l.queryNoticeTextDefault.hide(),l.queryNoticeTextHint.removeClass("screen-reader-text").show()}).on("blur.wplink",function(){l.queryNoticeTextDefault.show(),l.queryNoticeTextHint.addClass("screen-reader-text").hide()}),l.search.keyup(function(){var e=this;window.clearTimeout(i),i=window.setTimeout(function(){wpLink.searchInternalLinks.call(e)},500)})},open:function(i){var n;wpLink.range=null,i&&(window.wpActiveEditor=i),window.wpActiveEditor&&(this.textarea=e("#"+window.wpActiveEditor).get(0),"undefined"!=typeof tinymce&&(n=tinymce.get(wpActiveEditor),t=n&&!n.isHidden()?n:null,t&&tinymce.isIE&&(t.windowManager.bookmark=t.selection.getBookmark())),!wpLink.isMCE()&&document.selection&&(this.textarea.focus(),this.range=document.selection.createRange()),l.wrap.show(),l.backdrop.show(),wpLink.refresh(),e(document).trigger("wplink-open",l.wrap))},isMCE:function(){return t&&!t.isHidden()},refresh:function(){a.search.refresh(),a.recent.refresh(),wpLink.isMCE()?wpLink.mceRefresh():wpLink.setDefaultValues(),r?l.url.focus().blur():l.url.focus()[0].select(),a.recent.ul.children().length||a.recent.ajax()},mceRefresh:function(){var e;(e=t.dom.getParent(t.selection.getNode(),"A"))?(l.url.val(t.dom.getAttrib(e,"href")),l.title.val(t.dom.getAttrib(e,"title")),l.openInNewTab.prop("checked","_blank"===t.dom.getAttrib(e,"target")),l.submit.val(wpLinkL10n.update)):wpLink.setDefaultValues()},close:function(){wpLink.isMCE()?t.focus():(wpLink.textarea.focus(),wpLink.range&&(wpLink.range.moveToBookmark(wpLink.range.getBookmark()),wpLink.range.select())),l.backdrop.hide(),l.wrap.hide(),e(document).trigger("wplink-close",l.wrap)},getAttrs:function(){return{href:l.url.val(),title:l.title.val(),target:l.openInNewTab.prop("checked")?"_blank":"","class":"myclass"}},update:function(){wpLink.isMCE()?wpLink.mceUpdate():wpLink.htmlUpdate()},htmlUpdate:function(){var e,t,i,n,s,l,a,r=wpLink.textarea;r&&(e=wpLink.getAttrs(),e.href&&"http://"!=e.href&&(t='<a href="'+e.href+'"',e.title&&(l=e.title.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),t+=' title="'+l+'"'),e.target&&(t+=' target="'+e.target+'"'),e["class"]&&(t+=' class="myclass"'),t+=">",document.selection&&wpLink.range?(r.focus(),wpLink.range.text=t+wpLink.range.text+"</a>",wpLink.range.moveToBookmark(wpLink.range.getBookmark()),wpLink.range.select(),wpLink.range=null):"undefined"!=typeof r.selectionStart&&(i=r.selectionStart,n=r.selectionEnd,a=r.value.substring(i,n),t=t+a+"</a>",s=i+t.length,i==n&&(s-="</a>".length),r.value=r.value.substring(0,i)+t+r.value.substring(n,r.value.length),r.selectionStart=r.selectionEnd=s),wpLink.close(),r.focus()))},mceUpdate:function(){var e,i=wpLink.getAttrs();return wpLink.close(),t.focus(),tinymce.isIE&&t.selection.moveToBookmark(t.windowManager.bookmark),e=t.dom.getParent(t.selection.getNode(),"a[href]"),i.href&&"http://"!=i.href?(e?t.dom.setAttribs(e,i):t.execCommand("mceInsertLink",!1,i),void t.selection.collapse()):void t.execCommand("unlink")},updateFields:function(e,t){l.url.val(t.children(".item-permalink").val()),l.title.val(t.hasClass("no-title")?"":t.children(".item-title").text())},setDefaultValues:function(){var e=t&&t.selection.getContent(),i=/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,n=/^(https?|ftp):\/\/[A-Z0-9.-]+\.[A-Z]{2,4}[^ "]*$/i;l.url.val(e&&i.test(e)?"mailto:"+e:e&&n.test(e)?e.replace(/&|&#0?38;/gi,"&"):"http://"),l.title.val(""),l.submit.val(wpLinkL10n.save)},searchInternalLinks:function(){var t,i=e(this),n=i.val();if(n.length>2){if(a.recent.hide(),a.search.show(),wpLink.lastSearch==n)return;wpLink.lastSearch=n,t=i.parent().find(".spinner").show(),a.search.change(n),a.search.ajax(function(){t.hide()})}else a.search.hide(),a.recent.show()},next:function(){a.search.next(),a.recent.next()},prev:function(){a.search.prev(),a.recent.prev()},keydown:function(t){var i,n,s=e.ui.keyCode;s.ESCAPE===t.keyCode?(wpLink.close(),t.stopImmediatePropagation()):s.TAB===t.keyCode&&(n=t.target.id,"wp-link-submit"!==n||t.shiftKey?"wp-link-close"===n&&t.shiftKey&&(l.submit.focus(),t.preventDefault()):(l.close.focus(),t.preventDefault())),(t.keyCode===s.UP||t.keyCode===s.DOWN)&&(!document.activeElement||"link-title-field"!==document.activeElement.id&&"url-field"!==document.activeElement.id)&&(i=t.keyCode===s.UP?"prev":"next",clearInterval(wpLink.keyInterval),wpLink[i](),wpLink.keyInterval=setInterval(wpLink[i],wpLink.keySensitivity),t.preventDefault())},keyup:function(t){var i=e.ui.keyCode;(t.which===i.UP||t.which===i.DOWN)&&(clearInterval(wpLink.keyInterval),t.preventDefault())},delayedCallback:function(e,t){var i,n,s,l;return t?(setTimeout(function(){return n?e.apply(l,s):void(i=!0)},t),function(){return i?e.apply(this,arguments):(s=arguments,l=this,void(n=!0))}):e},toggleInternalLinking:function(e){var t=l.wrap.hasClass("search-panel-visible");l.wrap.toggleClass("search-panel-visible",!t),setUserSetting("wplink",t?"0":"1"),l[t?"url":"search"].focus(),e.preventDefault()}},n=function(t,i){var n=this;this.element=t,this.ul=t.children("ul"),this.contentHeight=t.children("#link-selector-height"),this.waiting=t.find(".river-waiting"),this.change(i),this.refresh(),e("#wp-link .query-results, #wp-link #link-selector").scroll(function(){n.maybeLoad()}),t.on("click","li",function(t){n.select(e(this),t)})},e.extend(n.prototype,{refresh:function(){this.deselect(),this.visible=this.element.is(":visible")},show:function(){this.visible||(this.deselect(),this.element.show(),this.visible=!0)},hide:function(){this.element.hide(),this.visible=!1},select:function(e,t){var i,n,s,l;e.hasClass("unselectable")||e==this.selected||(this.deselect(),this.selected=e.addClass("selected"),i=e.outerHeight(),n=this.element.height(),s=e.position().top,l=this.element.scrollTop(),0>s?this.element.scrollTop(l+s):s+i>n&&this.element.scrollTop(l+s-n+i),this.element.trigger("river-select",[e,t,this]))},deselect:function(){this.selected&&this.selected.removeClass("selected"),this.selected=!1},prev:function(){if(this.visible){var e;this.selected&&(e=this.selected.prev("li"),e.length&&this.select(e))}},next:function(){if(this.visible){var t=this.selected?this.selected.next("li"):e("li:not(.unselectable):first",this.element);t.length&&this.select(t)}},ajax:function(e){var t=this,i=1==this.query.page?0:wpLink.minRiverAJAXDuration,n=wpLink.delayedCallback(function(i,n){t.process(i,n),e&&e(i,n)},i);this.query.ajax(n)},change:function(e){this.query&&this._search==e||(this._search=e,this.query=new s(e),this.element.scrollTop(0))},process:function(t,i){var n="",s=!0,l="",a=1==i.page;t?e.each(t,function(){l=s?"alternate":"",l+=this.title?"":" no-title",n+=l?'<li class="'+l+'">':"<li>",n+='<input type="hidden" class="item-permalink" value="'+this.permalink+'" />',n+='<span class="item-title">',n+=this.title?this.title:wpLinkL10n.noTitle,n+='</span><span class="item-info">'+this.info+"</span></li>",s=!s}):a&&(n+='<li class="unselectable no-matches-found"><span class="item-title"><em>'+wpLinkL10n.noMatchesFound+"</em></span></li>"),this.ul[a?"html":"append"](n)},maybeLoad:function(){var e=this,t=this.element,i=t.scrollTop()+t.height();!this.query.ready()||i<this.contentHeight.height()-wpLink.riverBottomThreshold||setTimeout(function(){var i=t.scrollTop(),n=i+t.height();!e.query.ready()||n<e.contentHeight.height()-wpLink.riverBottomThreshold||(e.waiting.show(),t.scrollTop(i+e.waiting.outerHeight()),e.ajax(function(){e.waiting.hide()}))},wpLink.timeToTriggerRiver)}}),s=function(e){this.page=1,this.allLoaded=!1,this.querying=!1,this.search=e},e.extend(s.prototype,{ready:function(){return!(this.querying||this.allLoaded)},ajax:function(t){var i=this,n={action:"wp-link-ajax",page:this.page,_ajax_linking_nonce:l.nonce.val()};this.search&&(n.search=this.search),this.querying=!0,e.post(ajaxurl,n,function(e){i.page++,i.querying=!1,i.allLoaded=!e,t(e,n)},"json")}}),e(document).ready(wpLink.init)}(jQuery);
    </script>
    <?php }
}
add_action( 'admin_print_footer_scripts', 'wpse_181706_overwrite_wpLink' );

Put that in your functions.php and search and replace "myclass" with what you want. (edit: javascript borrowed and modified from Rel Nofollow Checkbox -plugin)

Should you do it this way (in my opinion)? Probably not.

Either do like Laurence said and just use CSS. If you really need classes I would probably use javascript/jQuery to add the classes on page load, something like this

jQuery(document).ready(function($) {
    $('article a').addClass("myclass");
});
| improve this answer | |
0

If you mean all links, you can style the links using the "a" tag in CSS. In the last example below I have specified a visited link.

p a:link {
color: #000000;
}

p a:visited { 
color: #000000;
}
| improve this answer | |
0

The easiest way, if this should only be added to some of the links; Insert the link, then switch to the HTML tab in the editor. Find your link in the source code, add class="your-class" and you're done.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.