Any tips on how to display installed/available themes in a page?

I want to show in a page the theme choices available (for premium upgrade). Much like a showcase of available theme choices.

Any tips how to do this?

  • Predrag Dubajic

    Hey @Bloggista,

    Hope you're well today :slight_smile:

    Do you have a idea how you want to do this, are you looking to do it with a plugin or a theme?
    Some themes support custom post types like portfolio which you can use to show your themes in portfolio page, one post = one theme.

    Can you give me some more info or an example how you want it to look so I can further help you.

    Best regards,
    Predrag

  • Ash

    Hello @Bloggista

    Please add this following code:

    function show_available_themes_cb( $atts ) {
    	$atts = shortcode_atts( array(
                'col' => 4
    	), $atts, 'show_available_themes' );
    
    	$themes = wp_get_themes();
    
            echo '<div class="theme_col"><ul>';
            foreach( $themes as $key => $val ){
                ?>
                <li style="width: <?php echo 100 / $atts['col'] ?>%">
                    <div class="theme_wrap">
                        <div class="theme_thumb">
                            <img src="<?php echo $val->get_screenshot() ?>"/>
                        </div>
                        <div class="theme_desc">
                            <?php echo $val; ?>
                        </div>
                    </div>
                </li>
                <?php
            }
            echo '</ul></div>';
    }
    add_shortcode( 'show_available_themes', 'show_available_themes_cb' );
    
    add_action( 'wp_footer', 'show_available_themes_script' );
    function show_available_themes_script() {
        ?>
        <style>
        .theme_col{overflow: hidden;}
        .theme_col ul{list-style-type: none; margin: 0; padding: 0;}
        .theme_col ul li{float: left; padding: 10px; margin: 0; box-sizing: border-box}
        .theme_col ul li img{width: 100%}
        .theme_wrap{position: relative;}
        .theme_desc{position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); color: #fff; width: 100%; padding: 5px 10px; box-sizing: border-box; text-align: center}
        </style>
        <?php
    }

    You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name 'mu-plugins'. If there is no folder in that name, then create a folder, name it 'mu-plugins', create a file inside that, give any name you like and paste the code in there. You don't need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always. If you use mu-plugins then add a php start tag at the beginning of the code.

    Then use this shortcode in any page:

    [show_available_themes]

    You can define columns using:

    [show_available_themes col="3"]

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.