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 );