HTML


<h1>How to short Post Ttitle Lenght?</h1>
<h2>WordPress Hook / WpFix.it</h2>
<pre class="code-fill" data-type="php">
<code>
function max_title_length( $title ) {
$max = 14;
if( strlen( $title ) > $max ) {
	return substr( $title, 0, $max ). " …";
	} else {
		return $title;
    }
}
add_filter( 'the_title', 'max_title_length');
</code>
</pre>
<p><strong>Old version…</strong></p>
<pre class="code-fill" data-type="php">
<code>
function max_title_length( $title ) {
    if( mb_strlen( $title ) > 15 ) {
        return substr( $title, 0, 17 ). " …"; //use hellip;
    } else {
        return $title;
    }
}
add_filter( 'the_title', 'max_title_length'); //Optional
</code>
</pre>
<p><strong>New! Version</strong></p>


CSS


/*
** WpFix.it
** WordPress how to:
**
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  background: #fefefe;
}
body {
  max-width: 800px;
  margin: 0 auto;
  background: #fefefe;
  padding: 2rem;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  line-height: 1.4;
}
h1 {
  font-size: 1.35rem;
}
h2 {
  font-size: 0.95rem;
}
p {
	font-size: 0.7rem;
}
h1, h2, h3, h4 {
  font-family: "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  line-height: 1.2;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
pre {
  background: #023542;
  color: #dedede;
  position: relative;
}
pre code {
  display: block;
  padding: 1rem;
  overflow: auto;
}
pre[data-type] {
  margin-top: 2.65rem;
}
pre[data-type]::before {
  content: attr(data-type);
  position: absolute;
  bottom: 100%;
  margin-bottom: 2px;
  left: 0;
  color: black;
  text-transform: uppercase;
}
figure {
  background: #ccc;
  margin: 0;
  padding: 1rem;
}
figcaption form {
  display: inline-block;
}
.code-svg {
  position: absolute;
  bottom: 5px;
  right: 8px;
}




JS




CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now