ESSENTIAL WORDPRESS CODE SNIPPETS FOR CUSTOMIZING YOUR WEBSITE

WordPress is one of the most popular content management systems (CMS) in the world, powering over 40% of all websites on the internet. While it comes with a range of built-in features, sometimes you may need to add extra functionality to your WordPress site using custom code. This is where code snippets come in handy.

A code snippet is a small piece of code that can be added to your WordPress site to perform a specific task.

In this article, we’ll explore some common WordPress code snippets and provide examples of how you can use them to enhance your website’s functionality. Whether you’re a beginner or an experienced WordPress developer, these snippets can save you time and effort in building your site. So, let’s dive in!

1. Custom Post Type

Custom post types allow you to create custom content types in WordPress. Here’s an example:

function create_post_type() {
    register_post_type( 'books',
        array(
            'labels' => array(
                'name' => __( 'Books' ),
                'singular_name' => __( 'Book' )
            ),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array('slug' => 'books'),
        )
    );
}
add_action( 'init', 'create_post_type' );

This creates a new post type called “Books” with a singular label of “Book”. You can access the custom post type at yoursite.com/books.

2. Custom Taxonomy

Custom taxonomies allow you to organize your custom post types. Here’s an example:

function create_book_tax() {
    register_taxonomy(
        'genre',
        'books',
        array(
            'label' => __( 'Genre' ),
            'rewrite' => array( 'slug' => 'genre' ),
            'hierarchical' => true,
        )
    );
}
add_action( 'init', 'create_book_tax' );

This creates a new taxonomy called “Genre” for the “Books” post type.

3. Custom Meta Box

Custom meta boxes allow you to add custom fields to your post editor. Here’s an example:

function add_book_meta_box() {
    add_meta_box(
        'book_details',
        __( 'Book Details', 'textdomain' ),
        'render_book_meta_box',
        'books',
        'side',
        'default'
    );
}
add_action( 'add_meta_boxes', 'add_book_meta_box' );

function render_book_meta_box( $post ) {
    $isbn = get_post_meta( $post->ID, 'book_isbn', true );
    ?>
    <label for="book_isbn"><?php esc_html_e( 'ISBN', 'textdomain' ); ?></label>
    <input type="text" id="book_isbn" name="book_isbn" value="<?php echo esc_attr( $isbn ); ?>">
    <?php
}

function save_book_meta_box( $post_id ) {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }

    if ( isset( $_POST['book_isbn'] ) ) {
        update_post_meta( $post_id, 'book_isbn', sanitize_text_field( $_POST['book_isbn'] ) );
    }
}
add_action( 'save_post_books', 'save_book_meta_box' );

This adds a custom meta box to the “Books” post editor with an ISBN field. The render_book_meta_box function outputs the HTML for the meta box, and the save_book_meta_box function saves the data when the post is saved.

4. Custom Shortcode

Custom shortcodes allow you to easily add custom functionality to your posts and pages. Here’s an example:

function greeting_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'name' => 'World',
    ), $atts );

    return 'Hello, ' . $atts['name'] . '!';
}
add_shortcode( 'greeting', 'greeting_shortcode' );

This creates a new shortcode called [greeting] that accepts a name attribute. When the shortcode is used, it outputs “Hello, {name}!”.

5. Custom Widget

Custom widgets allow you to add custom content to your site’s widget areas. Here’s an example:

class Example_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'example_widget',
            __( 'Example Widget', 'textdomain' ),
            array( 'description' => __( 'A widget that displays example content', 'textdomain' ) )
        );
    }

    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }
        echo '<p>' . esc_html__( 'Example content goes here', 'textdomain' ) . '</p>';
        echo $args['after_widget'];
    }

    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'textdomain' );
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <?php
    }

    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';

        return $instance;
    }
}
function register_example_widget() {
    register_widget( 'Example_Widget' );
}
add_action( 'widgets_init', 'register_example_widget' );

This creates a new widget called “Example Widget” that displays example content. The widget function outputs the content of the widget, the form function outputs the form for editing the widget settings, and the update function saves the widget settings. The register_example_widget function registers the widget.

6. Adding Custom Columns to Posts/Pages Screen

function add_custom_columns( $columns ) {
    $columns['custom_column'] = __( 'Custom Column', 'textdomain' );
    return $columns;
}
add_filter( 'manage_post_posts_columns', 'add_custom_columns' );
add_filter( 'manage_page_posts_columns', 'add_custom_columns' );

function display_custom_columns( $column_name, $post_id ) {
    if ( $column_name == 'custom_column' ) {
        $value = get_post_meta( $post_id, 'custom_field', true );
        echo esc_html( $value );
    }
}
add_action( 'manage_post_posts_custom_column', 'display_custom_columns', 10, 2 );
add_action( 'manage_page_posts_custom_column', 'display_custom_columns', 10, 2 );

This adds a custom column called “Custom Column” to the Posts/Pages screen and displays the value of a custom field called “custom_field” in the column.

7. Enqueueing Scripts and Stylesheets

function enqueue_scripts() {
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array( 'jquery' ), '1.0', true );
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), '1.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

This enqueues a JavaScript file called “custom-script.js” and a CSS file called “custom-style.css” in the header of the website.

8. Disabling the WordPress Admin Bar

function disable_admin_bar() {
    if ( is_user_logged_in() ) {
        add_filter( 'show_admin_bar', '__return_false' );
    }
}
add_action( 'after_setup_theme', 'disable_admin_bar' );

This disables the WordPress admin bar for logged in users.

9. Customizing the Login Screen

function customize_login_screen() {
    echo '<style type="text/css">
        body.login {
            background-color: #f1f1f1;
        }
        h1 a {
            background-image: url(' . get_template_directory_uri() . '/images/logo.png);
            background-size: contain;
            height: 100px;
            width: 100%;
        }
    </style>';
}
add_action( 'login_enqueue_scripts', 'customize_login_screen' );

function change_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'change_login_logo_url' );

function change_login_logo_title() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'change_login_logo_title' );

This customizes the WordPress login screen by changing the background color, adding a custom logo, and changing the logo link URL and title.

10. Removing Query Strings from Static Resources

function remove_query_strings( $src ) {
    $parts = explode( '?', $src );
    return $parts[0];
}
add_filter( 'script_loader_src', 'remove_query_strings', 15, 1 );
add_filter( 'style_loader_src', 'remove_query_strings', 15, 1 );

This removes query strings from static resources like CSS and JavaScript files, which can improve page load times.

11. Adding a Custom Menu to the WordPress Toolbar

function add_custom_toolbar_menu( $wp_admin_bar ) {
    $args = array(
        'id' => 'custom-menu',
        'title' => __( 'Custom Menu', 'textdomain' ),
        'href' => '#'
    );
    $wp_admin_bar->add_menu( $args );
    $wp_admin_bar->add_node(
        array(
            'parent' => 'custom-menu',
            'id' => 'custom-menu-item',
            'title' => __( 'Custom Menu Item', 'textdomain' ),
            'href' => '#'
        )
    );
}
add_action( 'admin_bar_menu', 'add_custom_toolbar_menu', 999 );

This adds a custom menu called “Custom Menu” to the WordPress toolbar, with a submenu item called “Custom Menu Item”.

Conclusion

In conclusion, custom code snippets are an essential tool for WordPress developers and site owners who want to extend the functionality of their website beyond the built-in features.

We’ve covered the most common code snippets that can help you accomplish tasks such as modifying the WordPress loop, adding custom post types, and customizing the login page. By leveraging these snippets, you can save time and effort in building and maintaining your website.

However, it’s important to note that custom code can also introduce security risks, so it’s always best to test thoroughly and make sure you’re using reputable sources. With that in mind, we hope these snippets will help you take your WordPress site to the next level.

---