Wordpress - Adding TinyMCE on Frontend into jQuery UI widget - wordpress

I'm creating a Wordpress App. It consists on using custom fields on custom type, for managing personal projects.
My issue: I want to add the admin editor (tinyMCE) on frontend. Considering that I can have many textareas that will begin TinyMCE editors. So, I used this code:
PHP (on theme functions.php):
// TINY-MCE EDITOR ON FRONTEND
add_filter('wp_head','add_tinymce_editor');
function add_tinymce_editor(){
wp_admin_css('thickbox');
wp_enqueue_script('wp-tinymce');
wp_enqueue_script('tinymce');
wp_enqueue_script('editor');
add_thickbox();
}
JS (on theme single-projects.php):
jQuery(document).ready(function(){
// EDITORS
tinyMCE.init({
mode : "specific_textareas",
theme : "simple",
editor_selector :"tinymce_enabled"
});
});
On JS I set the "editor_selector" with a Class for all textareas that will begin tinyMCE editors. I cannot assign a single ID for each textareas because these can be 4 or 5 or 6, or more!!!
HTML: (on theme single-projects.php):
<textarea name="new-task-description" id="new-task-description"
class="tinymce_enabled required"></textarea>
Each textarea is present on Jquery UI Accordions.
Now, my problem is, on Firebug (or browser console) I get this error:
tinyMCE is not defined
What's wrong?
thanks in advance!!!

With Wordpress 3.3 you can use wp_editor() which is a lot easier.
http://codex.wordpress.org/Function_Reference/wp_editor
The right way to include scripts is add_action('wp_enqueue_scripts', 'tinymce_editor');

If tinymce is not defined the file tiny_mce.js has not been loaded on the page. Make sure the file gets loaded eigther directly or with the means wordpress offers.

Related

Load custom css after plugin css in wordpress

I'm trying add CSS to testimonial slider (3rd Party plugin) on my wordpress theme. But my custom CSS file loads before the plugin CSS file.
Is there a way I can make the my custom CSS load after the plugin CSS?
I don't want to make any changes to the Plugin code.
Edit:
I noticed that the plugin is using "wp_print_styles" to load it's css file.
You'll need to update your plugin code to do this the "proper way" I believe.
Since you need it to load last I would take the common path of utilizing the wp_enqueue_scripts hook/function to set a low priority for it being processed. This way you can guarantee that the HTML remains valid and that you are loading your styles and scripts after all the default ones within WordPress plugin's code:
function my_plugin_unique_style() {
$base = get_stylesheet_directory_uri();
wp_enqueue_style( 'style-my-plugin-style', $base.'/styles.css' );
}
add_action('wp_enqueue_scripts', 'my_plugin_unique_style', 11 );
Of course you will have to modify this to use your plugin's css file name but this is the basic way to do this and have valid markup. It's worth mentioning that if this still loads before another CSS file in the HEAD of the page you should bump up the number from 11 to some other higher number.
You can read more about wp_enqueue_scritps here.

creating wordpress custom php page

I'm trying my make my first theme for wordpress.
Is there any possibility to create custom php page to display custom content?
Pretty much adding to WordPress another copy of the likes of single.php, post.php or 404.php.
All I want just a page to display the custom content on it.
Every tutorial I found so far uses just creating new page within WordPress.
I want to avoid it and for custom page to be enabled straight after theme activation.
The Idea is to have something like my_custom_page.php and to be able link to it after.
Is there any way of doing it?
Thanks
here is the solution to what I was looking for
http://kovshenin.com/2014/static-templates/
To achieve custom page functionality you can use page template concept of wordpress. Creating a page template is extremely easy. Create any new file in your theme and start the file with a comment block like so:
<?php
/*
Template Name: My Awesome Custom Page
*/
<h1>Hello There</h1>
You need paste php code inside this template file. When you submit for then redirection action will be page with custom template page.
Referance :
https://premium.wpmudev.org/blog/creating-custom-page-templates-in-wordpress/
Video :
https://youtu.be/1ZdHI8HuboA

How to add "code" format button to Tinymce 4 in WordPress 3.9

Tinymce offers an inline code formatting option that wraps the <code> tag around content. But WordPress does not include this. I think that there must be an easy way to enable it. I have seen discussing on how to do this in earlier versions of WP (with Tinymce 3) in threads like Add "code" button to wordpress tinyMCE ,
but I can't see how to "translate" this into Tinymce 4.
I tried the following. It gives me the Source Code but not the code tag.
// Add <code> support to the Visual Editor
// Load the code TinyMCE plugin
function my_TinyMCEplugins($plugin_array) {
$plugin_array['code'] = get_bloginfo('template_directory') . '/inc/code/plugin.min.js';
return $plugin_array;
}
add_filter('mce_external_plugins', 'my_TinyMCEplugins');
// Add the code button into the toolbar
function my_TinyMCE($in) {
$in['toolbar2'].=',code';
return $in;
}
add_filter('tiny_mce_before_init', 'my_TinyMCE' );
Thanks for any help!
Actually the TinyMCE code plugin is NOT used to insert <code> tags. It is used to edit the source html code, which is redundant in wordpress since you can just click the 'text' tab.
This wordpress plugin will add that functionality for you: https://wordpress.org/plugins/tinymce-code-button/screenshots/.

Using the WordPress TinyMCE in an HTML iframe for plugin

I have a WordPress plugin with settings page. On this settings page, the form to be submitted is loaded in an iframe. I wish to utilize the WordPress TinyMCE for a textarea in this form.
How do I achieve this? I can't really do it the way it is stated here (http://keighl.com/post/tinymce-in-wordpress-plugins/) since the form is present in an HTML file.
WORDPRESS 3.5 UPDATE BELOW
If you're using Wordpress version<3.0, you can use the post you referenced to, it's great.
If your wordpress version is above 3.0 (aka newer versions) you can't use the wp_tiny_mce function for the tiny_mce, because it's deprecated. You need the newer function, wp_editor, which you can read all about it in here:
http://codex.wordpress.org/Function_Reference/wp_editor
For you to use of the wp_editor function and other WP elements your iframe (the for now containing only html and not linked into wp), you need to make your the iframe html file a php file, and add a require function of wp-load.php file.
For example, if your iframe file is in your server's root folder with your wordpress install, all you need to do is to place the following in the top of your file:
<?php
require('./wp-load.php');
?>
//iframe html/php code here
After you do that you can use any wordpress function in your iframe, including the tiny_mce.
---- UPDATE ----
If you are using wordpress 3.5 or higher, the implement method has slightly changed. more information is right in this short tutorial

admin template selection is missing on page creation in wordpress 3.2.x

I am using WordPress 3.2.1 ,
Page template selection drop down is missing on Pages (Add,Edit)
wp-admin > Pages >Add New > Page Attributes
I Edit the Template Page Default page as below code
/*
Template Name: New Template
*/
But still the template drop down no visible , my older version of WordPress it display by default.
Following is the screen shot for more idea
I solved this problem solved by adding the typical following code:
/*
Template Name: Custom
*/
Don't add any spaces after Name:
It'll work if you use template name: as well.
It might help someone: check if your index.php file is in place.
If it's not there, wordpress treats the template as corrupt and it doesn't display the template selection.
This should be simple to troubleshoot. The requirements for the page template to work are straight forward:
The template needs the page title in the top of the file like you've shown (the title needs to be wrapped in a PHP tag, you probably just didn't add it with your example bu I want to make sure you havne't overlooked it):
<?php
/*
Template Name: Custom
*/
?>
The second requirement is that the file is in the root of the theme folder.
With those two requirements in place, it should work. If it isn't working you nave a few possible issues. I list a few off the top of my head:
You might need to re-install WordPress in-case a file was corrupted
during your last update.
It's possible someone has altered the WP-Admin layout using users
roles.
That's all I can thing of at the moment, let me know how it turns out.
I had the same issue. It actually turned out to be a missing style.css file within the template directory in my case.
This happens because the get_post_templates() in class-wp-theme.php first checks for errors. If it finds any then it returns an empty array (no templates are displayed).
A side effect of this is that saving a page would clear the existing template and use the page.php instead.
So in short if the errors() method of your theme returns any errors then no templates dropdown.
hope that helps someone.
Same issued, I found out that in appearance panel in your WordPress dashboard the stylesheet is missing. You shouldn't rename the style.css in your theme folder.
Not sure if this will help anyone, but we solved the problem by disabling our theme and re-enabling it again. We had some other theme folders in the theme directory that we weren't using so we deleted those out as well. good luck, it's a really random problem to solve!
yeah!template dropdown not showing because you have no template So how to solve this::---
1 create template folder in theme
2 create a template in this folder
like:-
<?php /* Template Name: Home */ echo "template"; ?>
and check-in page dropdown will be there.

Resources