Sweet Links plug-in for WordPress TinyMCE Advanced
Written June 7, 2010. 60 comments.
Note: This project is a work in progress that hasn't been updated in over a year. Since then Wordpress has already included a similar (yet still not fully realised) feature for linking to other assets such as pages and posts.
Having worked entirely with WordPress customisation the past few months, it became quite apparent early on that there are some obvious limitations with the default WYSYWG editor – TinyMCE.
Training clients to use TinyMCE in a CMS environment is pretty smooth right up to the part when I show them how to create a link to an existing page or post. The (reasonable) expectation is that the ‘insert link’ dialogue should display a list of every page, post or file you’ve added and created, and then simply select one to make the link.
Unfortunately that’s not how it works. Instead WordPress forces you to either create a list of commonly used links which you can access through the dialogue, or even worse go to a previously created page and copy the URL, then go back to the page you were on previously and paste it in. Both ways are excruciatingly painful, so I thought I’d do something about that.
Introducing Sweet Links
Sweet Links is my first WordPress plug-in, and it does exactly as the clients expect. It takes about a minute to install and set-up, but bear in mind I’ve designed this to work with the TinyMCE Advanced editor plug-in, as that’s my editor of choice for WordPress and it lets me pick and chose what I give clients access to. Please note that this plug-in will not work on TinyMCE standard (that might come in a future release).
As you can see from the screenshot it’s pretty straight forward. All links are in their own tabs – pages, posts and files (images, documents etc). You can still manually type in a URL if you prefer (like an external link for example).
1 Minute set-up
Assuming you’ve already installed and activated the TinyMCE Advanced plug-in, then…
1) Download the latest Sweet Links package here (13k)
2) Go to wp-content\plugins\tinymce-advanced\mce\ and make a backup of the advlink folder (in case you change your mind about this plug-in later and want to go back to the old version)
3) Extract the files from the zip into the wp-content\plugins\tinymce-advanced\mce\advlink folder (over-write anything if prompted)
That’s it – you’re done.
To try it out just open a page or post and create a link in the usual way, but you’ll see my plug-in launch instead of the default ‘inset/edit link’ dialogue.
Some things to note
I’ve deliberately left out a lot of features that you might have seen on the old dialogue, like the ability to create pop-ups, open in new windows (target=”_blank” is deprecated in XHTML strict anyway), assign classes and ID’s etc. This is because there was so much information that even when ignored it’s very presence not only overwhelmed the user, but also allowed for potential mischief.
I’ve deliberately kept it simple and inline with what our clients expect – no fuss – just making links.
!important: You have to use the custom link structure %postname% which can be specified in Settings/Permalinks in the WordPress back end.
How can you go back to the old version?
If you prefer the original insert/edit link dialogue that comes with TinyMCE Advanced, simply copy all the files you backup up earlier back into in the advlink folder and over-write anything if prompted.
Upgrading
Upgrading is as easy as simply overwriting everything in the advlink folder with any new version you get from here.
Disclaimer
This product is an alpha work in progress and comes with no warranty of any kind, so use at your own risk. Always backup your data before trying new plug-ins. That being said, there’s nothing out of the ordinary with this plug-in and I’ve tested with success in Firefox, IE7 and IE8.
Feel free to report any problems and discuss below.
Download Latest
Change log
- Fixed more issues for when running local xampp server
- Fixed php tag issue for when running xampp local server
- Added preview pane for images, pages and posts
- Improved colour coding
- Fixed IE layout issues
- Fixed error conflicting with other plugins
- Added new tab showing all items
- Made file type descriptions a little more user friendly
Some of my other WordPress plugins
- Global Details (Makes managing global details easier)
- GAna (Simple Google Analytics tracking code installer)
- No Nag (Hide WordPress Update nags)
Who is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
That way permalinks will always be generated properly, using WP internal settings.
Just use this for generating page URL’s:
‘)”>
echo get_permalink($row["ID"]);
The plug-in is my first attempt at anything like this and thus far it has been working very well on commercial web sites.
I also want it to be installed like a traditional plugin but I haven’t had time to read up one WordPress hooks etc. I think I need about 6 more hours in every day…
As a general usability rule I say if it gives them the potential to do something wrong, then I remove the feature rather than hope they remember not to touch said feature(s). Opening links in new windows for example aside from being a common usability issue (http://www.thatwebguyblog.com/post/dont_use_target_blank), is also deprecated in XHTML strict so I left out that option.
That being said this plugin can be easily adapted to have the advanced features and maybe one day I’ll get around to it.
I’ve overwritten the files.
I highlight the text I want to link.
Click the “link” button
I see your popup window.
Then when I click what I want to link to, I click the insert button (bottom right).
However this refreshes the page underneath and your popup stays in place.
If I click the X to close your window – nothing is linked.
Also after clicking [INSERT] on your popup, I move the window over , and nothing has changed on the content.
Any guess?
I am not hosting at the root url
However your code, is inserting the root url
so Im at
http://www.mysite.com/mysitewp/about-me/
and your code is doing this
http://www.mysite/about-me/ (if I click on about me to insert as the link)
Feel free to edit the PHP to make it relative (or absolute) to your path, or maybe even using the WordPress root variable might help.
As for the other issue you mentioned, I couldn’t speculate on what might be causing that, but it doesn’t sound like anything my plug-in could be causing. We use this plug-in ‘out of the box’ in stacks of web sites (2 more today in fact) and it works without a hitch.
If you do resolve it feel free to post your solution here in case somebody else is having the same issue.
First off I discovered there was a bug in the latest installment of TinyMCE Advanced.
http://wordpress.org/support/topic/plugin-tinymce-advanced-tiny-mce-settings-not-saving?replies=11#post-1616976
There was a comment ( /* */) in the wrong place.
Okay, so now, when I click insert at least the page refreshes.
The problem I’m having is my highlighted text never gets linked.
Just to make sure I’m using this correctly:
1) select text block with mouse.
2) click the link icon
3) select from list of pages to link to
4) click insert
AT THIS POINT:?… should the insert window close and retun to the editor with the text link
Or should things refresh underneath the modal window and the insert link dialog remain open?
Mine remains open. and if I move the window out of the way, I still see the text selected. But not linked.
In IE (anything) the text actually gets deselected when the modal window pops up to choose the link.
In Firefox, if I’m on any tab other than “Pages” (the first tab), it will refresh the page below, text stays selected.
BUT the modal window – switches back to the “Pages” tab – regardless of what tab I was on.
Nothing is getting linked.
I tried using the standard linking, it works.
I tried the TinyMCE Advanced – adv linking – it works.
For some reason – this is not functioning.
Any guesses?
BTW I forgot to mention in all my other posts – this is an amazing plugin. If I can get it working I’ll let you know. But if anyone else has any insight… please share.
@That Web Guy – have you by chance tried running this plugin in anything but the root url?
I’m curious if that is my issue.
IT WORKS PERFECTLY
So if that is the case, does that point to an “almost certain” cause?
What would make it function locally but not on the remote server?
I have the exact same plugins installed.
Not sure why it works locally but not remotely. A stupid question to ask but did you you upload everything?
If I had to guess – its something with the way the text is passed to the links modal window. Something has to be interfering with it but I’m not sure what.
I’ll post back with the fix soon as I figure this one out.
Thanks
- Dont make assumptions about table names (or that the prefix is “wp_”)
Nice plugin though. If I get some time I’ll see if I can help out a bit. This is a serious problem in wordpress…
Good point about the wp_ prefix although it’s a safe bet nearly everyone has it set in such a way. That said I’ll make a point in the next revision to alert users to the fact.
Warning: mysql_fetch_assoc(): supplied argument is not a valid MySQL result resource in /wp-content/plugins/tinymce-advanced/mce/advlink/link.php on line 272.
..and can’t insert links at all.
$SQL = “SELECT * ” . // Select all rows,
“FROM wp_posts ” . // From this table,
“WHERE post_type = ‘attachment’” . // Where the the post type is an attachment,
“ORDER BY post_title”; // Order the titles alphabetically.
$result = mysql_query($SQL);
while($row = mysql_fetch_assoc($result)){
?>
Have you by any chance used a different table structure than the WordPress default?
$SQL = “SELECT * ” . // Select all rows,
“FROM wp_posts ” . // From this table,
“WHERE post_type = ‘attachment’” . // Where the the post type is an attachment,
“ORDER BY post_title”; // Order the titles alphabetically.
$result = mysql_query($SQL);
while($row = mysql_fetch_assoc($result)){
Have you by any chance used a different table structure than the WordPress default?
$SQL = “SELECT * ” .
“FROM wp_posts ” .
“WHERE post_type = ‘attachment’” .
“ORDER BY post_title”;
$result = mysql_query($SQL);
while($row = mysql_fetch_assoc($result)){
Have you by any chance used a different table structure than the WordPress default?
Thanks.
I realize this is asking for the moon but figured it couldn’t hurt to at least mention. Is it possible to create dynamic links in WordPress with such a plugin such that it uses the permalink while referencing the page_id/post_id/category_id in the event that the permalink changes?
Parse error: syntax error, unexpected $end in D:\xampp\htdocs\wp-content\plugins\tinymce-advanced\mce\advlink\link.php on line 424
Incidentally, line 424 is actually just the closing html tag, so that error is rather strange.
Sorry for this strange syntax description but html tags were deleted by blog engine.
and some text fragment:
alt=”"
for posts and pages there is an empty space…
Regarding the < ?PH P you're right though - that was incredibly lazy of me. It's been years since I've encountered a server config that requires the PHP bit be included there, but there's no harm in putting them in of course. Well spotted. I'll include them for the next revision.
As the the other problem, instead of dumping the entire site into the root of htdocs, try setting up another site in a folder like you’d expect on any server running multiple sites. See what happens on that – it might give you a clue.
And some suggestion: for posts I would add ” AND post_status ‘auto-draft’ “.
Thanks a lot!
I really like the design of your blog here. But why is your Alexa Traffic Rank only in the 600,000′s it should be much higher. You have a lot of reader interaction as well. Keep it up-
Take care,
Brian M Connole
i-Blogger
Parse error: syntax error, unexpected $end in C:\xampp\htdocs\sites\wp-content\plugins\tinymce-advanced\mce\advlink\link.php on line 424
I’ve made alterations as seen in the previous posts about this, but I still get the error. Suggestions?
Try adding the following code to the first line of each of the .php files (hope this doesn’t get stripped): global $wpdb; $pre = $wpdb->prefix;
Then replace every instance of wp_posts with “.$pre.”posts
The plugin will now work with any table prefix the user might have.
http://www.googleseoservices.com.au/
I am still getting following error and not sure how you fixed this.
Can someone please tell me what I need to do? thanks a lot!!!
( ! ) Parse error: syntax error, unexpected $end in D:\xampp\htdocs\staff\wp-content\plugins\tinymce-advanced\mce\advlink\link.php on line 424
I am still getting following error and not sure how you fixed this.
Can someone please tell me what I need to do? thanks a lot!!!
( ! ) Parse error: syntax error, unexpected $end in D:\xampp\htdocs\staff\wp-content\plugins\tinymce-advanced\mce\advlink\link.php on line 424
I think I know what caused that. Coincidently I saw a similar issue recently on another plug-in when someone was using xampp. Anyway I’ve uploaded an updated version – see the end of the article for version 0.9e.
Bare in mind I’m not using xammp or any other of those ‘quick and dirty’ AMP configs so I can’t test this on that (it works fine on my WAMP setup just fine still), but let me know if this new update doesn’t fix it for you.
I tried with version 0.9e and it works like a charm!
One thing I noticed is that I cannot see the filenames in the file link. any advice on this would be much appreciated.
Thanks once again for this wonderful plug-in.
Basically I used the short open tag for echo (which xampp doesn’t like ‘out of the box’ unless you tweak your config). Anyhoo, it’s working now using the proper tag. Just tested and all seems good.
Grab version 0.9f at the end of the article.