1. Home
  2. Docs
  3. Social Feeder
  4. Developers
  5. Add Custom Theme

Add Custom Theme

Social Feeder has many hook that can be use to customize the plugin. The following will show how to use a few of them to add a custom theme.

Add theme

Use filter hook socialfeeder_themes to add your theme information to the list of available themes.

For illustration purposes, we will add a custom theme called “boxed”.

add_filter( 'socialfeeder_themes', function( $themes ) {

    // Custom theme info
    // id = The identifier of the theme.
    // name = The display name.
    // preview = URL to an image that will preview how the data will look like.
    $theme[] = [
        'id'      => 'boxed',
        'name'    => 'Boxed',
        'preview' => 'http://image.jpg',
    ];

    return $themes;
} );

Creating theme assets

The css or js files should point to element selector  .social-feeder.theme-{theme id}.

Theme CSS

Sample on how to add css classes to stylize your theme:

.social-feeder.theme-boxed .feeds {
    display: flex;
    flex-direction: column;
}

.social-feeder.theme-boxed .feeds .feed {
    background-color: #fff;
}

To change style behavior based on the direction selected by the user, use element selector  .social-feeder.direction-row.theme-{theme id}.

.social-feeder.direction-row.theme-boxed .feeds {
    flex-direction: row;
}

Theme JS

Sample on how to add js scripts to your theme (jQuery): 

$( '.social-feeder.theme-boxed' ).find( '.feeds' ).hide();

Enqueue assets

Use WordPress action hook wp_enqueue_scripts to register your css and js files, and the use hook  socialfeeder_enqueue to enqueue them.

add_filter( 'wp_enqueue_scripts', function() {

    wp_register_style(
        'socialfeeder-theme-boxed',
        'http://[path-to-my-file]/theme.css'
    );

    wp_register_script(
        'socialfeeder-theme-boxed',
        'http://[path-to-my-file]/theme.js',
        ['jquery']
    );

} );
add_filter( 'socialfeeder_enqueue', function() {

    wp_enqueue_style( 'socialfeeder-theme-boxed' );
    wp_enqueue_script( 'socialfeeder-theme-boxed' );

} );

Display theme

Use action hook socialfeeder_theme_{theme id} to display the HTML template for your theme.

add_action( 'socialfeeder_theme_boxed', function( $feeds, $social_feeder, $styles ) {

    if ( count( $feeds ) > 0 ) {
        ?>
        <div class="feeds">
            <?php foreach ( $feeds as $feed ) : ?>
                <div class="feed" style="<?php echo $styles ?>">
                    <!-- YOU CUSTOM DESIGN HERE -->
                </div>
            <?php endforeach ?>
        </div>
        <?php
    }

}, 10, 3 );

Use default HTML template

If you don’t want to change the default structure that comes with the plugin and you just want to change the CSS and JS, the use the hook this way:

add_action( 'socialfeeder_theme_boxed', function( $feeds, $social_feeder, $styles ) {

    do_action( 'socialfeeder_theme_default', $feeds, $social_feeder, $styles );

}, 10, 3 );
Was this article helpful to you? Yes No