While editing a post that contains an image, WP attaches a properties inspector icon over the image to allow editing basic properties such as size, alignment, link etc.
I'd like to know how difficult it would be to hack into this dialog screen and add some custom programming to the link area.
I'd like to add a popup menu there that I can access with the click of a button (next to the existing "Link to Image" button.
I'd prefer to hook into this dialog via a file in my theme's folder or via a plug-in. I don't want to alter the wordpress code itself (to allow this to be more portable and theme specific).
The edit image popup is a TinyMCE plugin (the rich text editor that Wordpress uses), the files for which are in wp-includes/js/tinymce/plugins/wpeditimage/.
As such you can't simply use the Wordpress plugin API to modify it. You'd need to create your own TinyMCE plugin, probably by duplicating the wpeditimage plugin and adding your extra functionality. You'd also need to create a Wordpress plugin to activate the TinyMCE plugin, see these codex pages for more information on working with TinyMCE plugins in Wordpress:
http://codex.wordpress.org/TinyMCE_Custom_Buttons
http://codex.wordpress.org/User:Skeltoac/Extending_TinyMCE
Related
I'm very new to WordPress (tbh, it's my first time working with it). And I need to make a website as my school project using CMS. Creating pages with templates is alright, but I have a lot of troubles with buttons. I found this website, and I can see it using WordPress. I need such buttons as on this page https://movie-chooser.co.ua/random-movie-2/ (they appear when you hover over the image). Is this a default option for buttons in WordPress? If not, is there a plugin for this or what is the way to add them on my images?
First Install Elementor plugin https://wordpress.org/plugins/elementor/
and go to page when you add button and open page with elementor
and do drag and drop any element like button, space, text editor etc.
You have several ways to achieve that:
Overwritting Wordpress CSS
Using a plugin
Create your own shortcode
1 - Overwriting Wordpress CSS
If you manage to display all the elements using wordpress template, and your only issue is to display buttons over the images, then it should only be a matter of CSS
2 - Using a plugin
The idea here is to find a plugin that help you to create/display the informations you need (maybe you'll need to add functionnality to basic post though custom fields or using a custom post type).
Once you find the right plugin, again if the plugin dosen't directly offert some settings on the design then you'll have to overwrite the plugin's CSS rules to display the elements as you want.
3 - Create your own shortcode
If you're new to Wordpress I wouldn't recommend this method as it is kind of advanced, unless you're comfortable with PHP/HTML/CSS (optionaly JS).
This is the more flexible solution as you can basically control anything, but it will require you to understand some core concepts of Wordpress like WP Query and how custom queries works.
The idea here is to create a shortcode.
THis shortcode refere to a custom made PHP function, in which you can create a custom request to fetch the informations you need to display from Wordpress database, and display it in an HTML structure that you decide.
THen angain, you'll just have to customize it though CSS.
Note : no need to create a whole plugin if you decide to create a shortcode, you can use the template functions.php file for that.
This seems to be more difficult than it should be.
All I would like to be able to do is add a link from an image on my wordpress site to an external website.
Using the normal media library tools this doesn't seem to be possible so I got the plugin WP Gallery Custom Links
However, even though I added the external link to the Gallery Link URL it still doesn't link.
Is there a more straightforward way to embed a link into an image?
Here is a screenshot of the image editing page:
If you are trying to make an Image clickable and bring you to an external site, click the image, click Edit, under Display settings select link to, custom url, and there you go.
Another way is, when you are adding an image to your site from your Media Library within Wordpress, there is an option "Link to" under Attachment Display Settings.
Despite the behavior of examples shown on TinyMCE's demo pages (http://www.tinymce.com/tryit/classic.php), I am unable to get TinyMCE on my Wordpress 4.0 site to act in such a way that if you simply type "www.sitename.com" into the editor and press space, it's automatically converted into a hyperlink for http://www.sitename.com/.
To be clear, it doesn't convert into any link at all...This isn't a case of absolute vs. relative links. That's what most of the talk seems to be about when it comes to TinyMCE and link creation. ...Would that I could get to that stage!
I can find no toggle or option or plugin name to enable automatic link creation, and yet it's there in their demos on the TinyMCE's site.
Can anyone tell me how I might get this feature up and running, ideally by not adding another Wordpress plugin?
Err...That being said, I'm open to a suggestion if you have a really good one! :)
Cheers!
Even though you found a plugin, some background might help because I personally think this is a good question:
Wordpress uses TinyMCE, however the Wordpress WYSIWYG Editor is actually heavily extended and no longer fully resembles the original TinyMCE editor you see on the TinyMCE website.
In order for links to automatically render in TinyMCE, the 'autolink' plugin needs to be enabled. The following native TinyMCE plugins are used by Wordpress:
charmap
colorpicker
hr
lists
media
paste
tabfocus
textcolor
fullscreen
image
In addition to these, Wordpress also employs the following custom plugins to fill out the remainder of the functionality you normally see:
wordpress
wpautoresize
wpeditimage
wpgallery
wplink
wpdialogs
wpview
It is my belief that Wordpress left out this behavior by design. As you know, the Autolink plugin specifically converts all valid URLs to comparable anchor tags once the space or return keys are pressed. However, Wordpress does allow you to explicitly convert URLs or words to anchor tags using its own plugin 'wplink'.
It should be noted that the wplink plugin closely resembles the native anchor plugin, but is NOT the same.
With the ability to both explicitly define your links in both the visual editor (via the wplink plugin) and the Text (aka: HTML) editor, I believe the development team decided to forgo on automatically linking content in favor of allowing authors to explicitly provide links where needed.
With all of that said:
Wordpress does provide a convenient way of adding new TinyMCE plugins via its 'mce_external_plugins' filter. If you would like to add the autolink functionality without the use of an external plugin, you may download the latest TinyMCE package, upload the autolink plugin (tinymce/js/tinymce/plugins/autolink) to your theme folder, and then add the following to your theme's functions.php:
add_filter('mce_external_plugins', 'mm_add_tinymce_plugins');
function mm_add_tinymce_plugins($plugins){
$plugins['autolink'] = get_stylesheet_directory_uri().'/path/to/tinymce/plugins/autolink/plugin.js';
return $plugins;
}
I'm new to building websites.
I'm currently using Headway drag and drop Wordpress builder.
I've added Testimonial Widget by Aihrus plugin for testimonials, and I've added it to a widget box.
Problem is that I want to add custom CSS to it that I've seen on this site that is built for it, but the Headway theme doesn't allow you to go in and edit the theme. I've tried adding it to the block inside of the theme but it didn't work. I ended up going into the plugin and adding it to the CSS of the plugin, and it now half works.
Could someone please tell me what I'm doing wrong?
My site is rainorshinedogwalking.com
You can edit your live CSS here:
http://docs.headwaythemes.com/customer/portal/articles/1067360-editing-css-directly
What you type gets minified and added to your site's dynamic CSS file on page load.
All you have to is go through design editor click on the element you want to edit then right click. A pop up box should come up and it say edit element choose that then you will see something like that click it and add our own css
I'm currently using the TinyMCE Styleselect menu to add CSS classes into the WordPress editor. This has worked OK for me so far and is great if you only have a few classes that you want to use. When I have added more classes however, the styleselect dropdown becomes a little un-user friendly as you have to scroll through the options which can also make the page scroll also.
The solution I want to implement involves a button in the tinymce toolbar that when clicked will open a popup window, from which you can select a class to apply to the selected text in the editor.
I know how to add custom buttons to tinymce and create the popup window but how do I make the buttons that add the class actually apply the class to the the selection?
Anybody any ideas of the code I need to use to do this or a tutorial detailing the above would be great.
I am not entirely certain this is correct, but I think that if you want to go beyond customizing TinyMCE via the hooks provided by WordPress you will have to go through TinyMCE itself. Consequently this is probably more of a TinyMCE question, than it is a WordPress question. I suggest you check out the TinyMCE plugin documentation.
However, once you have your plugin ready there might be a bit of an issue getting WordPress to load it. I'd definitely try to avoid manually placing it inside wp-includes like the rest of TinyMCE, but it seems WordPress does actually provide a way of loading external plugins.