Add Custom Meta Box With WYSIWYG Editor In WordPress

This is an easy way add a custom meta box to wordpress with a WYSIWYG editor. Check the wordpress documentation to understand exactly what options are available but this should get you started with setting up your own editable metabox.


/**
 * 
 *    Create Metabox With WYSIWYG Editor
 *
 */


//This function initializes the meta box.
 function custom_editor_meta_box() {    
           add_meta_box ( 
           	  'custom-editor', 
           	  __('Custom Editor', 'custom-editor') , 
           	  'custom_editor',
           	  'page'
           );
 
 }
 
 //Displaying the meta box
 function custom_editor($post) {          
          echo "<h3>Add Your Custom Links and Other Content</h3>";
          $content = get_post_meta($post->ID, 'custom_editor', true);
          
          //This function adds the WYSIWYG Editor 
          wp_editor ( 
          	$content , 
          	'custom_editor', 
          	array ( "media_buttons" => true ) 
          );
 
 }
  
 //This function saves the data you put in the meta box
 function custom_editor_save_postdata($post_id) {
        
    if( isset( $_POST['custom_editor_nonce'] ) && isset( $_POST['portfolio'] ) ) {
 
        //Not save if the user hasn't submitted changes
        if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
        } 
 
        // Verifying whether input is coming from the proper form
        if ( ! wp_verify_nonce ( $_POST['custom_editor_nonce'] ) ) {
        return;
        } 
 
        // Making sure the user has permission
        if( 'post' == $_POST['portfolio'] ) {
               if( ! current_user_can( 'edit_post', $post_id ) ) {
                    return;
               }
        } 
    } 
 
    if (!empty($_POST['custom_editor'])) {
    
        $data = $_POST['custom_editor'];
        update_post_meta($post_id, 'custom_editor', $data);
        
    }
 }
 
add_action('save_post', 'custom_editor_save_postdata');
 
add_action('admin_init', 'custom_editor_meta_box');

Use this code to output the results


<?php echo get_post_meta( get_the_ID(), 'custom_editor', true );?>

Tweet It. Share It.

See more Code Snippet, php, Wordpress

Build Your Own WordPress Related Posts

This code will display related posts by finding posts with the same tags as the current post.
If no related posts are found, the “Related Posts” section will not display.


<?php
// Related Posts Function, matches posts by tags - call using joints_related_posts(); )
function joints_related_posts() {
    global $post;
    $tags = wp_get_post_tags( $post->ID );
    if($tags) {
        foreach( $tags as $tag ) {
            $tag_arr .= $tag->slug . ',';
        }
        $args = array(
            'tag' => $tag_arr,
            'numberposts' => 3, /* You can change this to show more */
            'post__not_in' => array($post->ID)
        );
        $related_posts = get_posts( $args );
        if($related_posts) {
        echo '<h4>Related Posts</h4>';
        echo '<ul id="joints-related-posts">';
            foreach ( $related_posts as $post ) : setup_postdata( $post ); ?>
                <li class="related_post">
                    <a class="entry-unrelated" href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
                    <?php get_template_part( 'partials/content', 'byline' ); ?>
                </li>
            <?php endforeach; }
            }
    wp_reset_postdata();
    echo '</ul>';
}
?>

//Additional arguments

//You can use any of the WP Query args with this function

//https://codex.wordpress.org/Class_Reference/WP_Query

$args = array(
'post_type' => 'YOUR POST TYPE NAME HERE' //this is the line you need to add
'tag' => $tag_arr,
'numberposts' => 3, /* You can change this to show more */
'post__not_in' => array($post->ID)
)

Credit goes to JOINTSWP for posting an actual solution that worked: JOINTSWP

Tweet It. Share It.

See more Code Snippet, php, Wordpress

Unregister Custom Post Types In WordPress


/**
* Unregister Custom Post Types
*
*/

function custom_unregister_theme_post_types() {
global $wp_post_types;
foreach( array( 'portfolio', 'clients', 'team', 'testimonials' ) as $post_type ) {
if ( isset( $wp_post_types[ $post_type ] ) ) {
unset( $wp_post_types[ $post_type ] );
}
}
}
add_action( 'init', 'custom_unregister_theme_post_types', 20 );

Credit goes to Themify for posting an actual solution that worked: Themify

Tweet It. Share It.

See more Code Snippet, php, Programming, Wordpress

Easy Pagination In WordPress

Using the WP PageNavi Plugin (https://wordpress.org/plugins/wp-pagenavi/) you can easily achieve pagination in your theme. This plugin works right out of the box with the default settings.

Below is my archives.php template

<?php
/**
 * Template Name: Archives Template
**/
?>

<?php get_header(); ?>

<div id="wrapper hentry">

  <div class="container">

    <div class="row push-down">
      
      <?php if ( function_exists('yoast_breadcrumb') ) {yoast_breadcrumb('<p id="breadcrumbs">','</p>');} ?>
      


      <div class="col-sm-8 special-page-bg">



<?php

        
 
         $wp_query->query('showposts=50&order=asc&orderby=date&post_status=publish&paged='.$paged); 
          while($wp_query->have_posts()) : $wp_query->the_post(); ?>
         
            <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">

            <span><?php the_time('F j, Y'); ?></span><br/>

            <p class="entry-title"><a class="cta-link-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
            

            </div>

          <?php endwhile; ?>
          
          <?php wp_pagenavi(); ?>


          <?php wp_reset_postdata(); // reset the query ?>

       


      </div><!-- .col-sm-8 -->


            <?php get_sidebar(); ?>

    </div><!-- .row -->

  </div><!-- .container -->

</div><!-- .wrapper -->

<?php get_footer(); ?>

Just add the $paged variable to your wp_query():

   $wp_query->query('showposts=50&order=asc&orderby=date&post_status=publish&paged='.$paged); 

Then add this right after your main loop before resetting your query:

    <?php wp_pagenavi(); ?>

That’s all it takes to get functional pagination. You can add css and style this any way you like and there are also options within the plugin settings to customize even further.

Tweet It. Share It.

See more Code Snippet, Wordpress

Pure Css Popup

This works in IE9+ and all modern browsers.

See the Pen Modal – Pure CSS (no Javascript) by Ian McGrory (@maccadb7) on CodePen.

Tweet It. Share It.

See more Code Snippet, css

Make All External Links Open In A New Window

$('a').each(function() {
   var a = new RegExp('/' + window.location.host + '/');
   if (!a.test(this.href)) {
       $(this).attr('target', '_blank');
   }
});
Tweet It. Share It.

See more Code Snippet, jQuery

Modal Javascript Popover/Popunder

See the Pen Avgrund by Hakim El Hattab (@hakimel) on CodePen.

Tweet It. Share It.

See more Code Snippet, Javascript

Smooth Vertical Scrolling From One Point To Another In Javascript


$('#foo').click(function () {
    $('html,body').animate({
        scrollTop: $("#scrollToHere").offset().top
    }, 800);
});

Tweet It. Share It.

See more Code Snippet, jQuery

Sublime Text 2 – Delete Empty Lines

cmd+h || ctrl+h
turn on regex mode (leftmost toggle button)
search for “^\s*$” without the quotes
find all
backspace

If you want only completely empty lines and not just blank ones, search for “^$” instead.

Tweet It. Share It.

See more Code Snippet, Sublime Text Editor