WordPress.org

Ready to get started?Download WordPress

Forums

Ultimate TinyMCE
[resolved] How to add TinyMCE to a (46 posts)

  1. AbbsJr
    Member
    Posted 8 months ago #

    The Plugin works just fine from the WordPress dashboard, but I'm at the moment using Contact form 7 for people to submit article to me through that, and the plugin doesn't add the buttons to the text area, is there a way I can add it to that page only? or even add it to every text box on the site? like comment section and other pages?

    I'm trying to make it show up on "Full Article Content" on this page: http://www.mustknowbefore.com/add-article/

    And I would like to applaud you what a wonderful plugin.

    Thanks

    http://wordpress.org/plugins/ultimate-tinymce/

  2. Josh (WP Edit)
    Moderator and Editor Customizer
    Plugin Author

    Posted 8 months ago #

    Hi there!

    Okay.. in order to use the "Ultimate Tinymce" edtior.. the textarea needs to have been created using the wp_editor() function. So, since this is not done automatically by CF7 (maybe it is, I don't know??); you will probably need to use some custom javascript to render that CF7 textarea as a RTE (rich text area) textarea rather than a normal textarea.

    or even add it to every text box on the site?

    This is overkill; and will surely come back to haunt you. I would strongly discourage doing it this way.

    like comment section

    Impossible at this time. WP's comment system is tied into the DOM. As replies are made to comments.. they are moved around the DOM. The tinymce editor does not work well when elements are moved around the DOM.

    So.. going back... I would say let's use some javascript to render that CF7 textarea as a RTE textarea.

    Are you using a child theme? Or do you have an area where you can insert custom functions?

  3. AbbsJr
    Member
    Posted 8 months ago #

    I'm using Surfarama theme from wordpress themes, and I am a complete newb when it comes to languages, but tell me how to get what you need and I'll get it for you.

    Thanks for the immediate support.

  4. Josh (WP Edit)
    Moderator and Editor Customizer
    Plugin Author

    Posted 8 months ago #

    The first thing you need to do is create a child theme.

    This will allow you to write and use custom functions.. without having to modify your theme (or WP) files. When you update the theme or WP, if you have customizations in those files, they will be over-written.

    So, setup a child theme!!

    Here are the quick and dirty steps:

    1. Create a new folder in the wp-themes directory.
    2. In this new folder, create a file named style.css and another named functions.php.
    3. In the style.css file, you will want to import your original themes stylesheet. It should look similar to this:
    @import url("../surfarama/style.css");
    You may want to double-check the name of the main theme directory.

    Now.. if everything is done correctly... you should see your new child theme in your admin->themes section.

    Activate that theme... and you should not notice any changes in your site. Everything should appear exactly as before (except maybe a background image or other minor stuff).

    So... do all that... and let me know when you are done.

  5. AbbsJr
    Member
    Posted 8 months ago #

    What do I put in functions? leave it blank?

  6. Josh (WP Edit)
    Moderator and Editor Customizer
    Plugin Author

    Posted 8 months ago #

    Well.. that's where we are going to add our custom function. But for now, just add the opening and closing php tags; like this:

    <?php
    
    ?>

    I'll work on the function for you. Lemme know when you have the child theme setup correctly.

    NOTE: Make sure to use a code editing software (like Notepad++) when working with code files. Using Microsoft notepad or wordpad will create problems.

  7. AbbsJr
    Member
    Posted 8 months ago #

    Okay I've done exactly as you said but a duplicate theme didn't not appear in "Manage Theme", here's the style.css and the functions.php files:

    http://puu.sh/5ux9W.png

  8. AbbsJr
    Member
    Posted 8 months ago #

    I edited the css file into "@import url(../surfarama/style.css)" but I still don't see another duplicate of the theme in Manage themes

  9. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

  10. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    You're missing the template line in the child theme style.css file

  11. AbbsJr
    Member
    Posted 8 months ago #

    Thank you WPyogi you were right

    http://puu.sh/5uzUq.png

    The one on the right is the current theme and the left is the child theme, I'm surprised there's a difference in color, the social tags are also missing, it's strange because it loaded the Oswald family font but not the colors, I wonder why..

  12. Josh (WP Edit)
    Moderator and Editor Customizer
    Plugin Author

    Posted 8 months ago #

    ((Hi WPyogi!)) ((Hope all is going well with that thing we discussed!))

    @AbbsJr,
    Yeah, some of the settings might need to be reset. Just go back to wherever you set those options.. and see if you can reset them again.

  13. AbbsJr
    Member
    Posted 8 months ago #

    Alright

    I'm waiting for you to figure out what to type into the functions.php now

  14. Josh (WP Edit)
    Moderator and Editor Customizer
    Plugin Author

    Posted 8 months ago #

    Okay... I've ran into an issue while writing the function. I'm getting ready to create a WP Trac Ticket... to see what they say.

    One question... are you 'married' to this contact plugin? I think there is another contact plugin which allows for tinymce textareas in the forms.

    You may want to check out this one:
    http://wordpress.org/plugins/si-contact-form/

    I'll post a link to the trac ticket here.. so you may monitor the ticket as well.

    EDIT:
    Link to trac ticket:
    http://core.trac.wordpress.org/ticket/26295#ticket

  15. AbbsJr
    Member
    Posted 8 months ago #

    I installed the plugin you just posted and the normal contact form template doesn't have tinymce's with it, so at the moment I'm looking around the plugin settings and online to see how I can implement it.

    To be honest with you, I would much prefer to use CF7 instead of "Fast Secure Contact Form".

    Thanks for the support, I have never bothered rating a plugin but you guys really deserve it and encouraged to do so.

    Thank you for your time

  16. Josh (WP Edit)
    Moderator and Editor Customizer
    Plugin Author

    Posted 8 months ago #

    Wow - Thank you very much!!

    You know... it's honestly the people who use the plugin every day who make the best suggestions for it's future development!

    Well, I have installed CF7 on my test site.. and have exactly replicated your circumstances. I completely understand about not wanted to switch plugins.

    I will post back as soon as I make some progress.

  17. Josh (WP Edit)
    Moderator and Editor Customizer
    Plugin Author

    Posted 8 months ago #

    Okay... here we go...

    1. In your admin panel, on the contact form you have created, you are going to need to add an ID to the textarea.

    Here is what mine looked like:

    <p>Your Name (required)<br />
        [text* your-name] </p>
    
    <p>Your Email (required)<br />
        [email* your-email] </p>
    
    <p>Subject<br />
        [text your-subject] </p>
    
    <p>Your Message<br />
        [textarea textarea-354 id:my_test] </p>
    
    <p>[submit "Send"]</p>

    You can also create a new textarea by clicking the "Generate Tag" button and choosing "Textarea"... then assign it an ID. You can see how mine has an ID of my_test. I would name yours the same.. as the following code depends on this name.

    2. Next.. we need to add this code to your functions.php file in your child theme folder. You should already have the following in this file:

    <?php
    ?>

    So, we want to REPLACE that with the following code:

    <?php
    function add_tinymce_textarea($content) {
    	if (is_page(187)) {
    		$new_content = wp_editor('','my_editor');
    		$content = $content . $new_content;
    		return $content;
    	}
    }
    add_filter('the_content', 'add_tinymce_textarea');
    
    function my_wp_head() {
    	if (is_page(187)) {
    		wp_enqueue_script('jquery');
    		?>
            <script type="text/javascript">
    		jQuery(document).ready(function($){
    			content = $('#wp-my_editor-wrap');
    			$('#my_test').replaceWith(content);
    		});
    		</script>
            <?php
    	}
    }
    add_action('wp_head','my_wp_head');
    ?>

    Remember to use the code editor as I suggested above.

    3. Save your functions.php file to your child theme.

    Now, re-visit the page from the front-end of the website and you should see the tinymce editor.

  18. AbbsJr
    Member
    Posted 8 months ago #

    Yes it worked perfectly, excellent.

    Can I add this to the main theme or do I still have to use the child theme?

    And if so do I just need to copy that extra function into the main theme?

    Thanks

  19. AbbsJr
    Member
    Posted 8 months ago #

    I just tried cut the script inside functions.php (childtheme) to the main themes's functions.php and it caused an error "Parse error: syntax error, unexpected '<' in /home3/abbsjr/public_html/******/wp-content/themes/surfarama/functions.php on line 82"

    Or how do I reset the settings for the theme? I didn't understand what you meant before by resetting some settings?

  20. Josh (WP Edit)
    Moderator and Editor Customizer
    Plugin Author

    Posted 8 months ago #

    If you add it to the main theme... it is going to be overwritten the next time you update your theme.

    When you update a theme... all core theme files are overwritten during the update. If you add new lines of code to one of these files... it will be lost the next time the theme is updated.. because there is no possible way the theme author can know of your unique changes.

    This is why we always use a child theme. It allows us to add all our custom functions without running the risk of them being overwritten.

    I just tried cut the script inside functions.php (childtheme) to the main themes's functions.php and it caused an error

    This is most likely because you copied and pasted the code into an incorrect position in your main theme functions.php file.

    I would need to see the file in it's entirety to see what you did. However, I would still strongly discourage moving it to your main theme, for the reasons listed above.

  21. AbbsJr
    Member
    Posted 8 months ago #

    Alright thankss so much josh you can close the topic now, I understood what you mean by resetting them, bye :)

  22. AbbsJr
    Member
    Posted 8 months ago #

    I just tried changing colors and etc stuff from theme settings (while on the childtheme) and that works, but I'm having the issue that the text on my site isn't showing under the title on the homepage like it did on the main theme

    http://puu.sh/5wcwF.png

  23. AbbsJr
    Member
    Posted 8 months ago #

    the reason I would like to use the main theme is cause of this mainly, I don't want to bump into more problems than what I started with, here's the functions.php if you can tell me where to paste it I would be very grateful:

    http://pastebin.com/1rD1RA12

    Apologize for the hassle

  24. Josh (WP Edit)
    Moderator and Editor Customizer
    Plugin Author

    Posted 8 months ago #

    No hassle whatsoever.

    Please forgive my brevity.. it's late here.

    You are still using your main theme. All of your main theme options and admin settings should still function exactly as they did before. The only thing you are doing with a child theme is extending the functionality of your main theme in a way which is safe during theme updates.

    This is the 100% WordPress accepted method for extending functionality of a main theme. Again, the main theme is still the foundation of your site. One way of thinking is that you are actually using both the main theme and the child theme simultaneously.

    Again, if you copy those functions into your main theme... they will be deleted the next time you update your theme. All theme files are over-written during the update process. This will effectively remove any custom code you have added/removed. Hence; child themes.

    So, what is the specific issues you are facing with using the child theme?

  25. AbbsJr
    Member
    Posted 8 months ago #

    http://puu.sh/5wcwF.png

    That's my problem, the text under the title doesn't show on the homepage

  26. Josh (WP Edit)
    Moderator and Editor Customizer
    Plugin Author

    Posted 8 months ago #

    Okay...

    Temporarily remove those functions from your child theme.
    Get it back to just

    <?php
    ?>

    Now, re-activate this child theme.

    Does the content appear normally on your main page now?

  27. AbbsJr
    Member
    Posted 8 months ago #

    Sorry for the late reply I didn't get an email notification that you responded to me,

    Yes I just removed the functions from the child theme and it appears normally just like it should

  28. Josh (WP Edit)
    Moderator and Editor Customizer
    Plugin Author

    Posted 8 months ago #

    Okay.. not really sure why that's happening. But, let's redo the code to run the page conditional FIRST... then modify accordingly.

    Try this instead:

    <?php
    if (is_page(187)) {
    	function add_tinymce_textarea($content) {
    
    		$new_content = wp_editor('','my_editor');
    		$content = $content . $new_content;
    		return $content;
    	}
    	add_filter('the_content', 'add_tinymce_textarea');
    
    	function my_wp_head() {
    		wp_enqueue_script('jquery');
    		?>
            <script type="text/javascript">
    		jQuery(document).ready(function($){
    			content = $('#wp-my_editor-wrap');
    			$('#my_test').replaceWith(content);
    		});
    		</script>
            <?php
    	}
    	add_action('wp_head','my_wp_head');
    }
    ?>
  29. AbbsJr
    Member
    Posted 8 months ago #

    Just pasted it in functions.php in the child theme and it didn't work, well it worked but in the sense that the text under the titles show, but the tinymce don't appear in the box, you can see for yourself, I activated the child theme on http://www.Mustknowbefore.com and currently using it, it currently on the last php setting you gave me ^

  30. Josh (WP Edit)
    Moderator and Editor Customizer
    Plugin Author

    Posted 8 months ago #

    Okay... let's try adding one more conditional.
    If this doesn't work.. then I'll probably need access to your site for some trial and error. If this is an option, you can create me a temp admin account, and send the login credentials discreetly via my contact form.

    But, let's try this first:

    <?php
    if (is_singular() && is_page(187)) {
    	function add_tinymce_textarea($content) {
    
    		$new_content = wp_editor('','my_editor');
    		$content = $content . $new_content;
    		return $content;
    	}
    	add_filter('the_content', 'add_tinymce_textarea');
    
    	function my_wp_head() {
    		wp_enqueue_script('jquery');
    		?>
            <script type="text/javascript">
    		jQuery(document).ready(function($){
    			content = $('#wp-my_editor-wrap');
    			$('#my_test').replaceWith(content);
    		});
    		</script>
            <?php
    	}
    	add_action('wp_head','my_wp_head');
    }
    ?>

    What we have done is added an is_singular() conditional... which should not run on your homepage. (This is what is removing the content from those info blocks).

Reply »

You must log in to post.

About this Plugin

About this Topic