WordPress.org
Get WordPress

Making WordPress.org

Changeset 1001


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.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes
Files:
7 added
7 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/content-single.php

    r887 r1001  
    11<?php
    2 global $post;
    3 $theme = new Repo_Theme_Package($post);
     2include_once ABSPATH . '/wp-admin/includes/theme.php';
     3$theme = themes_api( 'theme_information', array( 'slug' => get_post()->post_name ) );
    44?>
    5 <div <?php post_class('single-theme'); ?> id="post-<?php the_ID(); ?>">
    6     <div class="theme-overlay">
    7         <div class="theme-about">
    8             <div class="theme-screenshots">
    9                 <div class="screenshot"><?php the_post_thumbnail(); ?></div>
     5
     6<div class="theme-backdrop"></div>
     7<div class="theme-wrap">
     8    <div class="theme-header">
     9        <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
     10        <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
     11        <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
     12    </div>
     13    <div class="theme-about">
     14        <div class="theme-screenshots">
     15            <div class="screenshot"><?php the_post_thumbnail(); ?></div>
     16        </div>
     17
     18        <div class="theme-info">
     19            <h3 class="theme-name"><?php the_title(); ?><span
     20                    class="theme-version"><?php printf( __( 'Version: %s' ), $theme->version ); ?></span>
     21            </h3>
     22            <h4 class="theme-author"><?php printf( __( 'By %s' ), $theme->author ); ?></h4>
     23
     24            <p class="theme-description"><?php the_content(); ?></p>
     25
     26            <div class="rating rating-<?php echo round( $theme->rating, -1 ); ?>">
     27                <span class="one"></span>
     28                <span class="two"></span>
     29                <span class="three"></span>
     30                <span class="four"></span>
     31                <span class="five"></span>
     32
     33                <p class="votes"><?php printf( __( 'Based on %s ratings.' ), $theme->num_ratings ); ?></p>
    1034            </div>
    11             <div class="theme-info">
    12                 <h3 class="theme-name"><?php the_title(); ?>
    13                     <span class="theme-version">Version: <?php echo $theme->version; ?></span>
    14                 </h3>
    15                 <h4 class="theme-author">By <a href="<?php echo $theme->authorurl; ?>"> TODO the WordPress team</a></h4>
    16                 <p class="theme-description">
    17                     <?php the_content(); ?>
     35
     36            <div class="theme-stats">
     37                <div><strong><?php _e( 'Last updated:' ); ?></strong> <?php echo $theme->last_updated; ?></div>
     38                <div><strong><?php _e( 'Downloads:' ); ?></strong> <?php echo $theme->downloaded; ?></div>
     39                <div><a href="<?php echo esc_url( $theme->homepage ); ?>"><?php _e( 'Theme Homepage &raquo;' ); ?></a></div>
     40            </div>
     41
     42                <p class="theme-tags">
     43                    <span><?php _e( 'Tags:' ); ?></span>
     44                    <?php echo implode( ', ', $theme->tags ); ?>
    1845                </p>
    19                 <p class="theme-tags"><span>TODO Tags:</span> black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready, accessibility-ready</p>
    20                
    21             </div>
    2246        </div>
    2347    </div>
     48
     49    <div class="theme-actions">
     50        <a href="<?php echo esc_url( '//downloads.wordpress.org/theme/' . $theme->slug . '.' . $theme->version . '.zip' ); ?>" class="button button-primary"><?php _e( 'Download' ); ?></a>
     51        <a href="<?php echo esc_url( $theme->preview_url ); ?>" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
     52    </div>
    2453</div>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/content.php

    r887 r1001  
    1 <?php
    2 global $post;
    3 $theme = new Repo_Theme_Package($post);
    4 ?>
    5 <div <?php post_class('theme'); ?> id="post-<?php the_ID(); ?>">
     1<?php global $theme; ?>
     2<article class="theme">
    63    <div class="theme-screenshot">
    7         <img src="<?php echo $theme->screenshot_url(); ?>" alt="">
     4        <img src="<?php echo esc_url( $theme->screenshot_url ); ?>" alt="">
    85    </div>
    9     <a href="<?php the_permalink(); ?>"><span class="more-details">Theme Details</span></a>
    10     <div class="theme-author">By the TODO Author</div> 
    11     <h3 class="theme-name"><?php the_title(); ?></h3>   
    12 </div>
     6    <a href="/<?php echo $theme->slug; ?>" class="more-details"><?php _ex( 'More Info', 'theme' ); ?></a>
     7    <div class="theme-author"><?php printf( __( 'By %s' ), $theme->author ); ?></div>
     8    <h3 class="theme-name"><?php echo $theme->name; ?></h3>
     9
     10    <div class="theme-actions">
     11        <a class="button button-primary preview install-theme-preview" href="<?php echo esc_url( '//downloads.wordpress.org/theme/' . $theme->slug . '.' . $theme->version . '.zip' ); ?>"><?php esc_html_e( 'Download' ); ?></a>
     12    </div>
     13</article>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/functions.php

    r887 r1001  
    11<?php
     2/**
     3 * WP.org Themes' functions and definitions.
     4 *
     5 * @package wporg-themes
     6 */
     7
     8/**
     9 * Sets up theme defaults and registers support for various WordPress features.
     10 *
     11 * Note that this function is hooked into the after_setup_theme hook, which
     12 * runs before the init hook. The init hook is too late for some features, such
     13 * as indicating support for post thumbnails.
     14 */
     15
    216function wporg_themes_setup() {
    317//  load_theme_textdomain( 'wporg-themes', get_template_directory() . '/languages' );
    … …  
    1529add_action( 'after_setup_theme', 'wporg_themes_setup' );
    1630
    17 function wporg_themes_style() {
    18     //<link rel="stylesheet" href="http://localhost/repotest/wp-admin/css/themes.css" />
     31/**
     32 * Enqueue scripts and styles.
     33 */
     34function wporg_themes_scripts() {
     35
     36    wp_enqueue_style( 'global-style', '//s.w.org/style/wp4.css', array(), '14' );
     37    wp_enqueue_style( 'themes-style', self_admin_url( 'css/themes.css' ) );
    1938    wp_enqueue_style( 'wporg-themes-style', get_stylesheet_uri() );
     39
     40    wp_enqueue_script( 'theme', self_admin_url( 'js/theme.js' ), array( 'wp-backbone' ), false, 1 );
     41    wp_enqueue_script( 'wporg-theme', get_template_directory_uri() . '/js/theme.js', array( 'theme' ), false, 1 );
     42
     43    wp_localize_script( 'theme', '_wpThemeSettings', array(
     44        'themes'   => false,
     45        'settings' => array(
     46            'isInstall'  => true,
     47            'canInstall' => false,
     48            'installURI' => null,
     49            'adminUrl'   => '',
     50        ),
     51        'l10n' => array(
     52            'addNew'            => __( 'Add New Theme' ),
     53            'search'            => __( 'Search Themes' ),
     54            'searchPlaceholder' => __( 'Search themes...' ), // placeholder (no ellipsis)
     55            'upload'            => __( 'Upload Theme' ),
     56            'back'              => __( 'Back' ),
     57            'error'             => __( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' )
     58        ),
     59        'installedThemes' => array(),
     60    ) );
    2061}
    21 add_action( 'wp_enqueue_scripts', 'wporg_themes_style' );
     62add_action( 'wp_enqueue_scripts', 'wporg_themes_scripts' );
    2263
    23 // force the post type to the repopackages
    24 // TODO smarter
    25 function wporg_themes_pregetposts( &$q ) {
    26     $q->set('post_type', 'repopackage');
     64/**
     65 * Removes Core's built-in query-themes handler, so we can safely add ours later on.
     66 */
     67function wporg_themes_remove_ajax_action() {
     68    remove_action( 'wp_ajax_query-themes', 'wp_ajax_query_themes', 1 );
    2769}
    28 add_action( 'pre_get_posts', 'wporg_themes_pregetposts' );
     70add_action( 'wp_ajax_query-themes', 'wporg_themes_remove_ajax_action', -1 );
     71
     72/**
     73 * A recreation of Core's implementation without capability check, since there is nothing to install.
     74 */
     75function wporg_themes_query_themes() {
     76    global $themes_allowedtags, $theme_field_defaults;
     77
     78    $args = wp_parse_args( wp_unslash( $_REQUEST['request'] ), array(
     79        'per_page' => 20,
     80        'fields'   => $theme_field_defaults,
     81    ) );
     82
     83    $old_filter = isset( $args['browse'] ) ? $args['browse'] : 'search';
     84
     85    /** This filter is documented in wp-admin/includes/class-wp-theme-install-list-table.php */
     86    $args = apply_filters( 'install_themes_table_api_args_' . $old_filter, $args );
     87
     88    $api = themes_api( 'query_themes', $args );
     89
     90    if ( is_wp_error( $api ) ) {
     91        wp_send_json_error();
     92    }
     93
     94    foreach ( $api->themes as &$theme ) {
     95        $theme->name        = wp_kses( $theme->name,        $themes_allowedtags );
     96        $theme->author      = wp_kses( $theme->author,      $themes_allowedtags );
     97        $theme->version     = wp_kses( $theme->version,     $themes_allowedtags );
     98        $theme->description = wp_kses( $theme->description, $themes_allowedtags );
     99        $theme->num_ratings = sprintf( _n( '(based on %s rating)', '(based on %s ratings)', $theme->num_ratings ), number_format_i18n( $theme->num_ratings ) );
     100        $theme->preview_url = set_url_scheme( $theme->preview_url );
     101    }
     102
     103    wp_send_json_success( $api );
     104}
     105add_action( 'wp_ajax_query-themes',        'wporg_themes_query_themes' );
     106add_action( 'wp_ajax_nopriv_query-themes', 'wporg_themes_query_themes' );
     107
     108/**
     109 * Include view templates in the footer.
     110 */
     111function wporg_themes_view_templates() {
     112    get_template_part( 'view-templates/theme' );
     113    get_template_part( 'view-templates/theme-preview' );
     114    get_template_part( 'view-templates/theme-single' );
     115}
     116add_action( 'wp_footer', 'wporg_themes_view_templates' );

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/header.php

    r887 r1001  
    2222<link href="//s.w.org/wp-includes/css/dashicons.css?20140409" rel="stylesheet" type="text/css" />
    2323<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
    24 <link rel="stylesheet" href="//s.w.org/style/wp4.css?14" />
     24
    2525<link media="only screen and (max-device-width: 480px)" href="//s.w.org/style/iphone.css?1" type="text/css" rel="stylesheet" />
    26 <link rel="stylesheet" href="http://localhost/repotest/wp-admin/css/themes.css" />
    2726
    2827<link rel="shortcut icon" href="//s.w.org/favicon.ico" type="image/x-icon" />
    … …  
    260259<div id="wporg-header">
    261260    <div class="wrapper">
    262     <a id="mobile-menu-button" class="" href="#" onclick="toggleMenu();"></a>
    263     <h1><a href="//wordpress.org">WordPress.org</a></h1>                <div id="head-search">
    264         <form action="//wordpress.org/search/do-search.php" method="get">
    265             <input class="text" name="search" type="text" value="" maxlength="150" placeholder="Search WordPress.org" /> <input type="submit" class="button" value="" />
    266         </form>
     261        <a id="mobile-menu-button" class="" href="#" onclick="toggleMenu();"></a>
     262        <h1><a href="//wordpress.org">WordPress.org</a></h1>
     263        <div id="head-search">
     264            <form action="//wordpress.org/search/do-search.php" method="get">
     265                <input class="text" name="search" type="text" value="" maxlength="150" placeholder="Search WordPress.org" /> <input type="submit" class="button" value="" />
     266            </form>
    267267        </div>
    268                 <div style="clear:both"></div>
    269        
     268        <div style="clear:both"></div>
     269
    270270<ul id="wporg-header-menu">
    271271<li><a href='//wordpress.org/showcase/' title='See some of the sites built on WordPress.'>Showcase</a></li>
    … …  
    285285
    286286<div id="download-mobile">
    287     <div class="wrapper">
    288         <span class="download-ready">Ready to get started?</span><a class="button download-button" href="//wordpress.org/download/" title="Get it. Got it? Good.">Download WordPress</a>
    289     </div>
     287    <div class="wrapper">
     288        <span class="download-ready">Ready to get started?</span><a class="button download-button" href="//wordpress.org/download/" title="Get it. Got it? Good.">Download WordPress</a>
     289    </div>
    290290</div>
    291291
    292292<div id="headline">
    293293    <div class="wrapper">
    294         <a href="/themes/"><h2>Themes Directory</h2></a>
     294        <h2 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h2>
    295295
    296296        <p class="login">
    … …  
    299299    </div>
    300300</div>
    301  

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

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/single.php

    r887 r1001  
    1515
    1616<div id="pagebody">
    17         <div class="wrapper">
     17    <div class="wrapper">
    1818        <div class="col-12">
    19         <div class="theme-browser">
    20         TODO menu bar
    21        
    22         <div class="themes">
    23         <?php if ( have_posts() ) : ?>
     19            <div class="theme-browser">
     20                TODO menu bar
    2421
    25             <?php while ( have_posts() ) : the_post(); ?>
    26                 <?php get_template_part( 'content', 'single' ); ?>
    27             <?php endwhile; ?>
    28         <?php else : ?>
    29             <?php get_template_part( 'content', 'none' ); ?>
    30         <?php endif; ?>
    31         </div>
    32         </div>
     22                <div class="themes">
     23                    <?php
     24                        if ( have_posts() ) :
     25                            while ( have_posts() ) :
     26                                the_post();
     27
     28                                get_template_part( 'content', 'single' );
     29                            endwhile;
     30                        else :
     31                            get_template_part( 'content', 'none' );
     32                        endif;
     33                    ?>
     34                </div>
     35            </div>
    3336        </div>
    3437    </div>
    3538</div>
    36 
    3739<?php get_footer(); ?>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/style.css

    r887 r1001  
    11/*
    2 Theme Name: wporg-themes2
     2Theme Name: WP.org Themes
    33Theme URI: https://wordpress.org/themes
    44Author: wordpressdotorg
    … …  
    1010*/
    1111
     12#themes {
     13    font-family: 'Open Sans', sans-serif;
     14}
     15body {
     16    background: #f1f1f1;
     17}
     18
     19body.modal-open {
     20    overflow: hidden;
     21}
     22
     23/* Assistive text */
     24.screen-reader-text {
     25    clip: rect(1px, 1px, 1px, 1px);
     26    position: absolute !important;
     27}
     28
     29.screen-reader-text:focus {
     30    background-color: #f1f1f1;
     31    border-radius: 3px;
     32    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
     33    clip: auto !important;
     34    color: #21759b;
     35    display: block;
     36    font-size: 14px;
     37    font-weight: bold;
     38    height: auto;
     39    line-height: normal;
     40    padding: 15px 23px 14px;
     41    position: absolute;
     42    left: 5px;
     43    top: 5px;
     44    text-decoration: none;
     45    width: auto;
     46    z-index: 100000; /* Above WP toolbar */
     47}
     48
    1249/* assorted overrides */
     50
     51.wrap {
     52    box-sizing: border-box;
     53    margin: 0 auto;
     54    max-width: 960px;
     55    padding: 0 10px;
     56}
     57.theme-overlay .theme-wrap {
     58    right: 190px;
     59}
     60
     61.spinner {
     62    background: url(/wp-admin/images/spinner.gif) no-repeat;
     63    -webkit-background-size: 20px 20px;
     64    background-size: 20px 20px;
     65    display: none;
     66    float: right;
     67    opacity: 0.7;
     68    filter: alpha(opacity=70);
     69    width: 20px;
     70    height: 20px;
     71    margin: 2px 5px 0;
     72}
     73
     74.loading-content .spinner {
     75    display: block;
     76    float: none;
     77    margin: 40px auto 0;
     78}
    1379
    1480#wordpress-org #pagebody p.intro {
    … …  
    1985.filter-links {
    2086    margin: 0 !important;
     87}
     88
     89.theme-overlay .theme-header .right {
     90    float: left !important;
    2191}
    2292
    … …  
    340410}
    341411
     412.wp-filter-search {
     413    border: 1px solid #ddd;
     414    box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
     415    background-color: #fff;
     416    color: #333;
     417    outline: none;
     418    -webkit-transition: 0.05s border-color ease-in-out;
     419    transition: 0.05s border-color ease-in-out;
     420    border-radius: 0;
     421    margin: 0;
     422    padding: 3px 5px;
     423    width: 280px;
     424    font-size: 16px;
     425    font-weight: 300;
     426    line-height: 1.5;
     427}
     428
     429.theme-stats {
     430    border: 1px solid #eee;
     431    font-size: 14px;
     432    padding: 20px;
     433}
     434
     435.theme-browser .button,
     436.theme-overlay .button {
     437    display: inline-block;
     438    text-decoration: none;
     439    font-size: 13px;
     440    line-height: 26px;
     441    height: 28px;
     442    margin: 0;
     443    padding: 0 10px 1px;
     444    cursor: pointer;
     445    border: 1px solid;
     446    -webkit-appearance: none;
     447    -webkit-border-radius: 3px;
     448    border-radius: 3px;
     449    white-space: nowrap;
     450    -webkit-box-sizing: border-box;
     451    -moz-box-sizing: border-box;
     452    box-sizing: border-box;
     453}
     454
     455.theme-browser .button-primary,
     456.theme-overlay .button-primary {
     457    background: #2ea2cc;
     458    border-color: #0074a2;
     459    -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
     460    box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
     461    color: #fff;
     462    text-decoration: none;
     463}
Note: See TracChangeset for help on using the changeset viewer.