Antony W. Serio

Another oddity. I tried to enable the ‘mark’ button, only to find that the button did not show up on my toolbar at all. It is visible in the ‘TinyMCE Advanced settings’, but it is not in my toolbar in the editor.

Also, I just upgraded to WordPress 4.9.6 this morning.

I have both rows of buttons enabled, but I do not see an ‘element breadcrumbs’ available, either in the second row of buttons, or at the bottom of the editor. My version of the TinyMCE editor is not the latest and greatest. Would upgrading help?

Anyhow, just this morning I enabled the ‘show blocks’ button. That showed me that an entire block of text, including carriage returns, etc., was one long ‘paragraph’, and that was what my style was being applied to. Perhaps I should explain how we are entering posts into WordPress. This is a two man operation, with Garman Lord providing the content, while I am the technical support. The posts are written in a word processor (either Pages for Mac (Garman Lord), or Libre Office for Mac or Xubuntu (Myself)), then copied and pasted into TinyMCE. Apparently, the copy/paste process is inserting the entire post as one long ‘block’ of text. Is there a way to break up this block of text, so that formatting can be applied to individual portions of it, rather than the entire block?

The strange thing is, when I remove the TinyMCE Kit plugin, the newer plugins cease to function entirely, even in their limited fashion. So, it looks like it is doing something, even if it doesn’t work as originally intended. There is limited documentation in the form of comments in the code.

I am trying to add custom styles via a dropdown menu. Yes, the TinyMCE Kit is an older plugin. I have seen several tutorials using it as an example on how to add the styles to a menu. I don’t think any of them seem to work anymore. I have also tried two other plugins for the TinyMCE editor that are in the repository with limited results. I have started new forum topics for those plugins, hoping to find a solution.

I’ve been looking at the changelog for TinyMCE and it doesn’t look like I’m currently using the latest version. It looks as if there have been quite a few bugfixes in the more recent versions, any one of which might correct the problems that I am having. I’m having difficulty finding instructions on how to update TinyMCE from 4.6.7 to a newer version on a remote server. If it was on my own machine, it would be a simple case of running apt-get upgrade. However, this is HostGator’s server, so while I could SSH in and upgrade TinyMCE that way, that seems unnecessarily complex. Is there a simpler way to upgrade the TinyMCE editor?

I’ve done some more troubleshooting, working within my functions.php , making sure that there weren’t any conflicts. I still haven’t had any luck. If I make any changes to the functions,php , I either lose my fonts, or the plugin doesn’t work at all. Anyhow, here is my functions.php:

<?php
function my_theme_enqueue_styles() {
    $parent_style = 'puremag'; // This is 'puremag' for the puremag theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

function scanwp_buttons( $buttons ) {
    array_unshift( $buttons, 'fontselect' );
    array_unshift( $buttons, 'fontsizeselect' ); 
    return $buttons;
}
    
add_filter( 'mce_buttons_2', 'scanwp_buttons' );
   
function scanwp_font_size( $initArray ){
    $initArray['fontsize_formats'] = "9px 10px 11px 12px 13px 14px 15px 16px 17px 18px 19px 20px";
    return $initArray;
}
   
add_filter( 'tiny_mce_before_init', 'scanwp_font_size' );

if ( is_admin() ) {
	include('tinymce-kit.php');
}

function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );
?>

Here is my TINYmce-kit.php:

<?php
/*
 * Helper functions for changing the visual editor appearance.
 *
 * version 0.1
 *
 * To enable: add this directory to your theme's folder,
 * edit editor-styles.css then add the user selectable class names
 * to the $classes array below and include this file in your theme's
 * functions.php file by adding 

	if ( is_admin() ) {
		include('tinymce-kit/tinymce-kit.php');
	}

 * If your theme has a settings page, you can also add an option so the user
 * can enable or disable this: if ( is_admin() && get_option('style_the_editor') ) ...
 *
 * @package TinyMCE Kit
 *
 * Released under the GPL v.2, https://www.gnu.org/copyleft/gpl.html
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 */

// Apply styles to the visual editor

add_filter('mce_css', 'mcekit_editor_style');
function mcekit_editor_style($url) {

	if ( !empty($url) )
		$url .= ',';

	// Change the path here if using different directories
	$url .= trailingslashit( get_stylesheet_directory_uri() ) . 'editor-styles.css';

	return $url;
}

// Change TinyMCE's settings

/**
 * Add the "Styles" drop-down in the editor.
 * This filter will add it to the beginning of the second row of buttons.
 * To add to another place see function wp_tiny_mce() in wp-admin/includes/post.php
 */
add_filter('mce_buttons_2', 'mcekit_editor_buttons');
function mcekit_editor_buttons($buttons) {

	array_unshift($buttons, 'styleselect');

	return $buttons;
}

/**
 * Set the CSS classes in the Styles drop-down in the editor.
 * These classes can be added by the users and should be defined in your main style.css file too.
 * This usually works well with "inline" type of styles like color, font, text-decoration, etc.
 */
add_filter('tiny_mce_before_init', 'mcekit_editor_settings');
function mcekit_editor_settings($settings) {

	if ( !empty($settings['theme_advanced_styles']) )
		$settings['theme_advanced_styles'] .= ';';
	else
		$settings['theme_advanced_styles'] = '';

	/**
	 * The format for this setting is "Name to display=class-name;".
	 * More info: https://wiki.moxiecode.com/index.php/TinyMCE:Configuration/theme_advanced_styles
	 *
	 * To be able to translate the class names they can be set in a PHP array (to keep them readable)
	 * and then converted to TinyMCE's format. You will need to replace 'tinymce-kit' with your theme's textdomain.
	 */
	$classes = array(
		__('Prose', 'puremag') => '.prose',
		__('Middle', 'puremag') => '.middle',
		__('Flatline', 'puremag') => '.flatline'
	);

	$class_settings = '';
	foreach ( $classes as $name => $value ) {
		$class_settings .= "{$name}={$value};";
	}

	$settings['theme_advanced_styles'] .= trim($class_settings, '; ');

	return $settings;
}
?>

More troubleshooting. With the following set of style-formats rules:

[
       { title: 'Prose', inline: 'span', classes: 'prose'  },
       { title: 'Center', inline: 'span', classes: 'center'},
       { title: 'Flatline', inline: 'span', classes: 'flatline'}
    ]

I now have the Formats menu, and it does apply the <span class="prose"></span> at the proper locations. However, it doesn’t seem to have any affect on how the text is displayed.

When I am inserting the CSS code by hand using the text editor, <p class="prose"></p> works. It applies the p.prose style to the paragraph, indents it properly, etc.

When I use the following set of style-formats rules

[
                 { title: 'Prose', block: 'p', classes: 'prose'  },
                { title: 'Center', block: 'p', classes: 'center' },
                { title: 'Flatline', block: 'p', classes: 'flatline' }
]

I can see that it is inserting the same CSS code that I am <p class="prose"></p>, only it is inserting it at the wrong location.

I am still trying to troubleshoot this issue. On occasion, the first time I select a paragraph and apply the second set of style_formats listed above, the paragraph is selected properly, and the CSS style is applied to it. This condition is hard to replicate. At first, I thought it may have been on initial activation of the plugin, or the first attempt to edit a post, but that doesn’t seem to be the case. Now, it seems that whatever paragraph in the text is selected, the CSS style is applied to the entire post, without regard to what was selected.

I forgot to include my editor-style.css sheet in my initial question:

/* Indented prose  */
p.prose {
  font-size: 120%;
  line-height: 1.4; 	
  text-indent: 30px;
  margin-bottom: 0px;
  color: #000000; 
  font-family: georgia, palatino, serif;
}

/* centered text  */
p.middle {
  font-size: 120%;
  line-height: 1.4; 	
  color: #000000; 
  text-align: center;
  margin-bottom: 0px;
  font-family: georgia, palatino, serif;
}

/* Unindented prose with paragraph spacing */
p.flatline {
  font-size: 120%;
  line-height: 1.4; 	
  margin-bottom: 0px;
  color: #000000; 
  font-family: georgia, palatino, serif;
}

An update:

I was using ambition, and had completely changed themes from ambition to twentyseventeen. My style.css and functions.php sheets had no mention of the ambition theme in them whatsoever. Then, I changed themes to PureMag, again with entirely new style.css and functions.php sheets. All of my previous problems went away. Problem solved, even though I’m not sure what happened to begin with…

Right. I need to block my searches from straying into wordpress.com territory. Thanks.

I feel kinda foolish now. The entire sidebar in my child theme became disabled somehow. I was able to re-populate the left sidebar with widgets through the dashboard. I was looking for a complex problem with a complex solution. Part of the problem with being an utter greenhorn at something is that you often don’t know the proper terminology to ask the right questions. Anyhow, thanks for the help, stephencottontail.

I updated the margin to no effect. I was not aware that the widgets needed to be reassigned.

I’m still fumbling about here. I replaced the header in style.css but I am still missing my sidebar. My style.css is as follows:

/*
Theme Name: wordpost-child
Theme URI: http:garmanlord.com/wordpress/wp-content/themes/wordpost-child
Description: Child theme for Wordpost.
Author: Antony W. Serio
Author URI: https://github.com/bestwebsoft
Template: wordpost
Version: 1.0.4
Tags: white, blue, two-columns, fixed-layout
Text Domain: wordpost-child
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
.times-header p{
font-family:Times New Roman;
font-size: 200%;
}
.times-intro p{
font-family:Times New Roman;
font-size: 150%;
}
.prose p {
font-family:Times New Roman;
font-size: 150%;
text-indent: 3em;
margin 4px 0 0 0;
margin-bottom: 0px;
 padding: 0;
}

Any assistance would be appreciated.

I figured it out. I had to start each div class block with <p> and end it with </p>.

Now it looks right, except for the first line after the header. I’ll need to set up a third class for that one…

I think I was able to figure it out. I created another div class:
div.no-bottom-margin p { margin-bottom: 0px; }
and wrapped the main body of the text in:
<div class="no-bottom-margin"> main body </div>.
That seemed to do the trick. I think I am starting to understand div classes…

Thanks to everybody for the help!