Making WordPress.org


Ignore:
Timestamp:
11/21/2014 10:04:40 AM (10 years ago)
Author:
obenland
Message:

WP.org Themes: Bring theme installer goodies to the front-end.

This brings most of the Backbone and Themes API-based functionality
from the admin's theme install screen to the front-end.

There are of course still loads of things to do, but it works
decently enough to share it with the world and give an idea of where
this is headed.

See https://make.wordpress.org/meta/2014/11/20/theme-repository-theme/
See #745.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/index.php

    r887 r1001  
    1212 */
    1313
    14 get_header(); ?>
     14include ABSPATH . 'wp-admin/includes/theme.php';
     15$themes = themes_api( 'query_themes', array(
     16    'per_page' => 15,
     17    'browse'   => get_query_var( 'attachment' ) ? get_query_var( 'attachment' )  : 'search',
     18) );
    1519
    16 <div id="pagebody">
    17         <div class="wrapper">
    18         <div class="col-12">
    19             <p class="intro">Looking for awesome WordPress themes?<br />Welcome to the Free WordPress Themes directory.</p>
    20         <div class="theme-browser">
    21        
    22         TODO menu bar
    23         <div class="wp-filter">
    24                 <div class="filter-count">
    25                     <span class="count theme-count">2,675</span>
    26                 </div>
    27        
    28                 <ul class="filter-links">
    29                     <li><a href="/" data-sort="featured" class="current">Featured</a></li>
    30                     <li><a href="/browse/popular/" data-sort="popular">Popular</a></li>
    31                     <li><a href="/browse/new/" data-sort="new">Latest</a></li>
    32                 </ul>
    33        
    34                 <a class="drawer-toggle" href="#">Feature Filter</a>
    35        
    36                 <div class="search-form"><input placeholder="Search themes..." type="search" id="wp-filter-search-input" class="wp-filter-search"></div>
    37        
    38                 <div class="filter-drawer">
    39                     <div class="buttons">
    40                         <a class="apply-filters button button-secondary" href="#">Apply Filters<span></span></a>
    41                         <a class="clear-filters button button-secondary" href="#">Clear</a>
    42                     </div>
    43                 <div class="filter-group"><h4>Colors</h4><ol class="feature-group"><li><input type="checkbox" id="filter-id-black" value="black"> <label for="filter-id-black">Black</label></li><li><input type="checkbox" id="filter-id-blue" value="blue"> <label for="filter-id-blue">Blue</label></li><li><input type="checkbox" id="filter-id-brown" value="brown"> <label for="filter-id-brown">Brown</label></li><li><input type="checkbox" id="filter-id-gray" value="gray"> <label for="filter-id-gray">Gray</label></li><li><input type="checkbox" id="filter-id-green" value="green"> <label for="filter-id-green">Green</label></li><li><input type="checkbox" id="filter-id-orange" value="orange"> <label for="filter-id-orange">Orange</label></li><li><input type="checkbox" id="filter-id-pink" value="pink"> <label for="filter-id-pink">Pink</label></li><li><input type="checkbox" id="filter-id-purple" value="purple"> <label for="filter-id-purple">Purple</label></li><li><input type="checkbox" id="filter-id-red" value="red"> <label for="filter-id-red">Red</label></li><li><input type="checkbox" id="filter-id-silver" value="silver"> <label for="filter-id-silver">Silver</label></li><li><input type="checkbox" id="filter-id-tan" value="tan"> <label for="filter-id-tan">Tan</label></li><li><input type="checkbox" id="filter-id-white" value="white"> <label for="filter-id-white">White</label></li><li><input type="checkbox" id="filter-id-yellow" value="yellow"> <label for="filter-id-yellow">Yellow</label></li><li><input type="checkbox" id="filter-id-dark" value="dark"> <label for="filter-id-dark">Dark</label></li><li><input type="checkbox" id="filter-id-light" value="light"> <label for="filter-id-light">Light</label></li></ol></div><div class="filter-group"><h4>Layout</h4><ol class="feature-group"><li><input type="checkbox" id="filter-id-fixed-layout" value="fixed-layout"> <label for="filter-id-fixed-layout">Fixed Layout</label></li><li><input type="checkbox" id="filter-id-fluid-layout" value="fluid-layout"> <label for="filter-id-fluid-layout">Fluid Layout</label></li><li><input type="checkbox" id="filter-id-responsive-layout" value="responsive-layout"> <label for="filter-id-responsive-layout">Responsive Layout</label></li><li><input type="checkbox" id="filter-id-one-column" value="one-column"> <label for="filter-id-one-column">One Column</label></li><li><input type="checkbox" id="filter-id-two-columns" value="two-columns"> <label for="filter-id-two-columns">Two Columns</label></li><li><input type="checkbox" id="filter-id-three-columns" value="three-columns"> <label for="filter-id-three-columns">Three Columns</label></li><li><input type="checkbox" id="filter-id-four-columns" value="four-columns"> <label for="filter-id-four-columns">Four Columns</label></li><li><input type="checkbox" id="filter-id-left-sidebar" value="left-sidebar"> <label for="filter-id-left-sidebar">Left Sidebar</label></li><li><input type="checkbox" id="filter-id-right-sidebar" value="right-sidebar"> <label for="filter-id-right-sidebar">Right Sidebar</label></li></ol></div><div class="filter-group wide"><h4>Features</h4><ol class="feature-group"><li><input type="checkbox" id="filter-id-accessibility-ready" value="accessibility-ready"> <label for="filter-id-accessibility-ready">Accessibility Ready</label></li><li><input type="checkbox" id="filter-id-blavatar" value="blavatar"> <label for="filter-id-blavatar">Blavatar</label></li><li><input type="checkbox" id="filter-id-buddypress" value="buddypress"> <label for="filter-id-buddypress">BuddyPress</label></li><li><input type="checkbox" id="filter-id-custom-background" value="custom-background"> <label for="filter-id-custom-background">Custom Background</label></li><li><input type="checkbox" id="filter-id-custom-colors" value="custom-colors"> <label for="filter-id-custom-colors">Custom Colors</label></li><li><input type="checkbox" id="filter-id-custom-header" value="custom-header"> <label for="filter-id-custom-header">Custom Header</label></li><li><input type="checkbox" id="filter-id-custom-menu" value="custom-menu"> <label for="filter-id-custom-menu">Custom Menu</label></li><li><input type="checkbox" id="filter-id-editor-style" value="editor-style"> <label for="filter-id-editor-style">Editor Style</label></li><li><input type="checkbox" id="filter-id-featured-image-header" value="featured-image-header"> <label for="filter-id-featured-image-header">Featured Image Header</label></li><li><input type="checkbox" id="filter-id-featured-images" value="featured-images"> <label for="filter-id-featured-images">Featured Images</label></li><li><input type="checkbox" id="filter-id-flexible-header" value="flexible-header"> <label for="filter-id-flexible-header">Flexible Header</label></li><li><input type="checkbox" id="filter-id-front-page-post-form" value="front-page-post-form"> <label for="filter-id-front-page-post-form">Front Page Posting</label></li><li><input type="checkbox" id="filter-id-full-width-template" value="full-width-template"> <label for="filter-id-full-width-template">Full Width Template</label></li><li><input type="checkbox" id="filter-id-microformats" value="microformats"> <label for="filter-id-microformats">Microformats</label></li><li><input type="checkbox" id="filter-id-post-formats" value="post-formats"> <label for="filter-id-post-formats">Post Formats</label></li><li><input type="checkbox" id="filter-id-rtl-language-support" value="rtl-language-support"> <label for="filter-id-rtl-language-support">RTL Language Support</label></li><li><input type="checkbox" id="filter-id-sticky-post" value="sticky-post"> <label for="filter-id-sticky-post">Sticky Post</label></li><li><input type="checkbox" id="filter-id-theme-options" value="theme-options"> <label for="filter-id-theme-options">Theme Options</label></li><li><input type="checkbox" id="filter-id-threaded-comments" value="threaded-comments"> <label for="filter-id-threaded-comments">Threaded Comments</label></li><li><input type="checkbox" id="filter-id-translation-ready" value="translation-ready"> <label for="filter-id-translation-ready">Translation Ready</label></li></ol></div><div class="filter-group"><h4>Subject</h4><ol class="feature-group"><li><input type="checkbox" id="filter-id-holiday" value="holiday"> <label for="filter-id-holiday">Holiday</label></li><li><input type="checkbox" id="filter-id-photoblogging" value="photoblogging"> <label for="filter-id-photoblogging">Photoblogging</label></li><li><input type="checkbox" id="filter-id-seasonal" value="seasonal"> <label for="filter-id-seasonal">Seasonal</label></li></ol></div>            <div class="filtered-by">
    44                         <span>Filtering by:</span>
    45                         <div class="tags"></div>
    46                         <a href="#">Edit</a>
    47                     </div>
    48                 </div>
    49     </div>
    50         <div class="themes">
    51         <?php if ( have_posts() ) : ?>
     20get_header();
     21?>
    5222
    53             <?php while ( have_posts() ) : the_post(); ?>
    54                 <?php get_template_part( 'content', get_post_format() ); ?>
    55             <?php endwhile; ?>
    56         <?php else : ?>
    57             <?php get_template_part( 'content', 'none' ); ?>
    58         <?php endif; ?>
     23<div id="themes" class="wrap">
     24    <div class="wp-filter">
     25        <div class="filter-count">
     26            <span class="count theme-count"></span>
    5927        </div>
    60         </div>
     28
     29        <ul class="filter-links">
     30            <li><a href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a></li>
     31            <li><a href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a></li>
     32            <li><a href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a></li>
     33        </ul>
     34
     35        <a class="drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
     36
     37        <div class="search-form"></div>
     38
     39        <div class="filter-drawer">
     40            <div class="buttons">
     41                <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
     42                <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
     43            </div>
     44            <?php foreach ( get_theme_feature_list() as $feature_name => $features ) : ?>
     45            <div class="filter-group">
     46                <h4><?php echo esc_html( $feature_name ); ?></h4>
     47                <ol class="feature-group">
     48                    <?php foreach ( $features as $feature => $feature_name ) : ?>
     49                    <li>
     50                        <input type="checkbox" id="filter-id-<?php echo esc_attr( $feature ); ?>" value="<?php echo esc_attr( $feature ); ?>" />
     51                        <label for="filter-id-<?php echo esc_attr( $feature ); ?>"><?php echo esc_html( $feature_name ); ?></label>
     52                    </li>
     53                    <?php endforeach; ?>
     54                </ol>
     55            </div>
     56            <?php endforeach; ?>
     57            <div class="filtered-by">
     58                <span><?php _e( 'Filtering by:' ); ?></span>
     59                <div class="tags"></div>
     60                <a href="#"><?php _e( 'Edit' ); ?></a>
     61            </div>
    6162        </div>
    6263    </div>
     64    <div class="theme-browser content-filterable">
     65        <?php
     66            if ( ! is_wp_error( $themes ) ) :
     67                foreach ( $themes->themes as $theme ) :
     68                    get_template_part( 'content', 'index' );
     69                endforeach;
     70            endif;
     71        ?>
     72    </div>
     73    <div class="theme-overlay"></div>
     74
     75    <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
     76    <span class="spinner"></span>
    6377</div>
    6478
    65 <?php get_footer(); ?>
     79<?php
     80get_footer();
Note: See TracChangeset for help on using the changeset viewer.