Mujahid Ishtiaq

<p>Typography field type for “Advanced Custom Fields” plugin that lets you add different text properties e.g. Font Size, Font Family, Font Color etc.</p>
<h4>Supported Subfields</h4>
<ul>
<li>Font Size</li>
<li>Font Family</li>
<li>Font Weight</li>
<li>Font Style</li>
<li>Font Variant</li>
<li>Font Stretch</li>
<li>Line Height</li>
<li>Letter Spacing</li>
<li>Text Align</li>
<li>Text Color</li>
<li>Text Decoration</li>
<li>Text Transform</li>
</ul>
<h4>Other Features</h4>
<ul>
<li>Supports Google Fonts. The selected Google Fonts are automatically enqueued on front-end of posts/pages. Google Fonts also work with ACF Options.</li>
<li>Supports Gutenberg Blocks created with ACF.</li>
<li>Option to show/hide each subfield individually</li>
<li>Option to make each subfield required individually</li>
<li>Color Picker for Text Color subfield</li>
</ul>
<h4>Documentation</h4>
<pre><code>// Returns the value of a specific property
get_typography_field( $selector, $property, [$post_id], [$format_value] );

// Displays the value of a specific property
the_typography_field( $selector, $property, [$post_id], [$format_value] );

// Returns the value of a specific property from a sub field.
get_typography_sub_field( $selector, $property, [$format_value] );

// Displays the value of a specific property from a sub field.
the_typography_sub_field( $selector, $property, [$format_value] );
</code></pre>
<h4>Shortcode</h4>
<pre><code>[acf_typography field="field-name" property="font_size" post_id="123" format_value="1"]
</code></pre>
<h4>Github repository</h4>
<p><a href="https://github.com/mujahidi/acf-typography" rel="nofollow ugc">@mujahidi/acf-typography</a></p>
<h4>Compatibility</h4>
<p>This ACF field type is compatible with:<br />
* Free and paid versions of the ACF plugin</p>


Advanced Custom Fields: Typography Field

A Typography Add-on for the Advanced Custom Fields Plugin.

Yong

<p>Create an animated typing effect with <a href="https://github.com/mattboldt/typed.js" rel="nofollow ugc">Typed.js</a> easily.</p>
<p>Just install and activate, <strong>Animated Typed JS Shortcode</strong> plugin and you can start using <code>[typedjs][/typedjs]</code> shortcode to create your animated typing text.</p>
<p>No settings needed just plug and play.</p>
<h4>How to use the shortcode?</h4>
<p>You can use the shortcode just like this:</p>
<p><strong><code>[typedjs]My animated typing text[/typedjs]</code></strong></p>
<p>To show more than 1 string/text, separate the strings with a <code>double colons (::)</code> like this:</p>
<p><strong><code>[typedjs]My animated typing text::It's freaking awesome![/typedjs]</code></strong></p>
<p>If you want to customize your animated text behaviour, you can use shortcode attributes to do that like this:</p>
<p><strong><code>[typedjs loop=true]My animated typing text::It's freaking awesome!::It's now looping, OMG![/typedjs]</code></strong></p>
<p>Here are the list of all available attributes that you can use:</p>
<ul>
<li><code>typespeed</code> : The text typing speed in milliseconds (default: 50)</li>
<li><code>startdelay</code> : Delay time before typing start in milliseconds (default: 500)</li>
<li><code>backspeed</code> : Backspacing speed in milliseconds (default: 50)</li>
<li><code>backdelay</code> : Time before backspacing in milliseconds (default: 500)</li>
<li><code>smartbackspace</code> : Only backspace what doesn’t match the previous string (default: true)</li>
<li><code>shuffle</code> : Shuffle the strings (default: false)</li>
<li><code>fadeout</code> : Fade out instead of backspace (default: false)</li>
<li><code>fadeoutdelay</code> : Time before fade out in milliseconds (default: 500)</li>
<li><code>loop</code> : Loop strings animation (default: false)</li>
<li><code>loopcount</code> : Amount of loops if enabled (default: Infinity)</li>
<li><code>showcursor</code> : Show/hide cursor (default: true)</li>
<li><code>cursorchar</code> : Character to be used as cursor (default: |)</li>
<li><code>class</code>: Custom class for the shortcode element (default: ”)</li>
</ul>
<h4>Optimize Javascript loading</h4>
<p>The <code>typed.min.js</code> is only 12KB, in the previous version I tried to load the script only when the shortcode is used, but it’s not working properly because the script is loaded asynchronously. So, I decided to load the script in the footer of the page to make sure it’s loaded properly.</p>
<p>However, if you want to load the script only on specific pages, you can use this hook to enqueue the script only on specific pages:</p>
<pre><code>`php
</code></pre>
<p>add_action(‘wp_enqueue_scripts’, ‘my_custom_typedjs_script’);<br />
function my_custom_typedjs_script() {<br />
    if ( ! is_page( ‘my-page-slug’ ) ) {<br />
        wp_dequeue_script( ‘typedjsshortcode’ );<br />
    }<br />
}<br />
    `</p>
<p>This will dequeue the script on all pages except the page with the slug <code>my-page-slug</code>.</p>
<h4>CREDITS</h4>
<p>Thanks to <a href="https://mattboldt.com/" rel="nofollow ugc">Matt Boldt</a> for creating this cool library <a href="https://github.com/mattboldt/typed.js" rel="nofollow ugc">Typed.js</a>!</p>


Animated Typed JS Shortcode

This plugin add shortcode to create an animated typing effect with Typed JS. No settings needed, just plug and play.

Advanced Custom Fields: Typography Field vs Animated Typed JS Shortcode