Changeset 1274

Timestamp:

02/17/2015 11:18:19 PM (10 years ago)

Author:

obenland

Message:

WP.org Themes: Use main query instead of Themes API for server output.

• Can now deal properly with /browse/*/ URL structure.
• Adds single theme navigation.
• Adds Photon support for server output.
• Brings single theme view closer to melchoyce's mockups.

See #745.

Location:

sites/trunk/wordpress.org/public_html/wp-content

Files:

• plugins/theme-directory/class-wporg-themes-repo-package.php (modified) (1 diff)
• plugins/theme-directory/class-wporg-themes-upload.php (modified) (3 diffs)
• plugins/theme-directory/theme-directory.php (modified) (4 diffs)
• themes/pub/wporg-themes/content-single.php (modified) (10 diffs)
• themes/pub/wporg-themes/content.php (modified) (1 diff)
• themes/pub/wporg-themes/functions.php (modified) (3 diffs)
• themes/pub/wporg-themes/index.php (modified) (3 diffs)
• themes/pub/wporg-themes/style.css (modified) (8 diffs)

sites/trunk/wordpress.org/public_html/wp-content/plugins/theme-directory/class-wporg-themes-repo-package.php

@@ -10 +10 @@
 
     /**
-     * Returns the screenshot URL for a theme.
+     * Returns the screen shot URL for a theme.
      *
      * @return string
      */
-    public function screenshot_url() {
-        $screen = $this->wp_post->_screenshot;
-        if ( ! $screen ) {
-            $screen = sprintf( '//ts.w.org/wp-content/themes/%1$s/screenshot.png?ver=%2$s', $this->wp_post->post_name, $this->latest_version() );
+    public function screen_shot_url() {
+        $screen  = 'screenshot.png';
+        $version = $this->latest_version();
+
+        if ( ! empty( $this->wp_post->_screen_shot[ $version ] ) ) {
+            $screen = $this->wp_post->_screen_shot[ $version ];
         }
 
-        return $screen;
+        return sprintf( 'https://i0.wp.com/themes.svn.wordpress.org/%1$s/%2$s/%3$s',
+            $this->wp_post->post_name,
+            $version,
+            $screen
+        );
     }
 

sites/trunk/wordpress.org/public_html/wp-content/plugins/theme-directory/class-wporg-themes-upload.php

@@ -302 +302 @@
         usort( $screen_shots, array( $this, 'sort_by_string_length' ) );
 
-        $screen_shot                  = array_pop( $screen_shots );
-        $this->theme->screen_shot_ext = pathinfo( $screen_shot, PATHINFO_EXTENSION );
-
-        return (bool) $screen_shot;
+        $this->theme->screen_shot = array_pop( $screen_shots );
+
+        return (bool) $this->theme->screen_shot;
     }
 
@@ -449 +448 @@
 [[TicketQuery(format=table, keywords=~theme-{$this->theme->get_stylesheet()}, col=id|summary|status|resolution|owner)]]
 
-[[Image(https://themes.svn.wordpress.org/{$this->theme->get_stylesheet()}/{$this->theme->display( 'Version' )}/screenshot.{$this->theme->screen_shot_ext}, width=640)]]
+[[Image(https://themes.svn.wordpress.org/{$this->theme->get_stylesheet()}/{$this->theme->display( 'Version' )}/{$this->theme->screen_shot}, width=640)]]
 TICKET;
     }
@@ -532 +531 @@
             '_upload_date' => $upload_date,
             '_ticket_id'   => $ticket_id,
+            '_screen_shot' => $this->theme->screen_shot,
         );
 

sites/trunk/wordpress.org/public_html/wp-content/plugins/theme-directory/theme-directory.php

@@ -20 +20 @@
 // Load uploader.
 include_once plugin_dir_path( __FILE__ ) . 'upload.php';
+
+register_activation_hook( __FILE__, 'flush_rewrite_rules' );
+register_deactivation_hook( __FILE__, 'flush_rewrite_rules' );
 
 /**
@@ -57 +60 @@
         'query_var'           => true,
         'can_export'          => true,
-        'rewrite'             => true,
+        'rewrite'             => array( 'slug' => '/' ),
         'capability_type'     => 'post',
     );
@@ -65 +68 @@
         register_post_type( 'repopackage', $args );
     }
+
+    add_rewrite_tag( '%browse%', '(featured|popular|new)' );
+
+    // Single themes.
+    add_rewrite_rule( '(.?.+?)(/[0-9]+)?/?$', 'index.php?post_type=repopackage&name=$matches[1]', 'top' );
+
+    // Browse views.
+    add_rewrite_rule( 'browse/(featured|popular|new)/?$', 'index.php?post_type=repopackage&browse=$matches[1]', 'top' );
+
+    // Paginated browse views.
+    add_rewrite_rule( 'browse/(featured|popular|new)/page/?([0-9]{1,})/?$', 'index.php?post_type=repopackage&browse=$matches[1]&paged=$matches[2]', 'top' );
 }
 add_action( 'init', 'wporg_themes_init' );
+
+/**
+ * Adjusts query to account for custom views.
+ *
+ * @param WP_Query $wp_query
+ * @return WP_Query
+ */
+function wporg_themes_set_up_query( $wp_query ) {
+    if ( is_admin() || in_array( $wp_query->get( 'pagename' ), array( 'upload', 'commercial' ) ) || 'nav_menu_item' == $wp_query->get( 'post_type' ) ) {
+        return $wp_query;
+    }
+
+    $wp_query->set( 'post_type', 'repopackage' );
+
+    if ( $wp_query->is_home() ) {
+        $wp_query->set( 'browse', 'featured' );
+    }
+
+    if ( $wp_query->get( 'browse' ) ) {
+        switch ( $wp_query->get( 'browse' ) ) {
+            case 'featured':
+                $wp_query->set( 'paged', 1 );
+                $wp_query->set( 'posts_per_page', 15 );
+                $wp_query->set( 'date_query', array(
+                    array(
+                        'column' => 'post_modified_gmt',
+                        'after'  => '-1 year',
+                    ),
+                ) );
+                $wp_query->set( 'orderby', 'rand' );
+                break;
+
+            case 'popular':
+                //TODO: Sort by popularity.
+                break;
+
+            case 'new':
+                break;
+        }
+    }
+
+    return $wp_query;
+}
+add_filter( 'pre_get_posts', 'wporg_themes_set_up_query' );
+
+/**
+ * Adjusts the amount of found posts when browsing featured themes.
+ *
+ * @param string   $found_posts
+ * @param WP_Query $wp_query
+ * @return string
+ */
+function wporg_themes_found_posts( $found_posts, $wp_query ) {
+    if ( $wp_query->is_main_query() && 'featured' === $wp_query->get( 'browse' ) ) {
+        $found_posts = $wp_query->get( 'posts_per_page' );
+    }
+
+    return $found_posts;
+}
+add_filter( 'found_posts', 'wporg_themes_found_posts', 10, 2 );
 
 /**
@@ -169 +243 @@
  * @return string
  */
-function wporg_themes_post_thumbnail_html( $html, $post_id ) {
+function wporg_themes_post_thumbnail_html( $html, $post_id, $post_thumbnail_id, $size ) {
     $post = get_post( $post_id );
     if ( 'repopackage' == $post->post_type ) {
         $theme = new WPORG_Themes_Repo_Package( $post );
-        // no size because we only have one (unknown) image size, so the theme needs to size with css
-        $html = '<img src="' . $theme->screenshot_url() . '"/>';
+        $src   = add_query_arg( array( 'w' => $size, 'strip' => 'all' ), $theme->screen_shot_url() );
+
+        $html = '<img src="' . esc_url( $src ) . '"/>';
     }
 
     return $html;
 }
-add_filter( 'post_thumbnail_html', 'wporg_themes_post_thumbnail_html', 10, 2 );
+add_filter( 'post_thumbnail_html', 'wporg_themes_post_thumbnail_html', 10, 5 );
+
 
 /**

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

@@ -1 +1 @@
 <?php
-    global $theme;
-    $theme = wporg_themes_photon_screen_shot( $theme );
+$slug  = get_post()->post_name;
+$theme = themes_api('theme_information', array( 'slug' => $slug ) );
 ?>
 <div class="theme-wrap">
     <div class="theme-about hentry">
 
-        <?php if ( strtotime( '-2 years' ) > strtotime( $theme->last_updated ) ) : ?>
+        <?php if ( strtotime( '-2 years' ) > get_post_modified_time() ) : ?>
         <div class="theme-notice notice notice-warning">
             <p><?php _e( 'This theme <strong>hasn&#146;t been updated in over 2 years</strong>. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.', 'wporg-themes' ); ?></p>
@@ -14 +14 @@
         <div class="theme-head">
             <h3 class="theme-name entry-title"><?php the_title(); ?></h3>
-            <h4 class="theme-author"><?php printf( __( 'By %s' ), sprintf( '<a href="https://profiles.wordpress.org/%s"><span class="author">%s</span><a/>', $theme->author ) ); ?></h4>
+            <h4 class="theme-author">
+                <?php printf( _x( 'By %s', 'post author', 'wporg-themes' ), sprintf( '<a href="https://profiles.wordpress.org/%s"><span class="author">%s</span></a>', get_the_author_meta( 'login' ), esc_html( get_the_author() ) ) ); ?>
+            </h4>
 
             <div class="theme-actions">
-                <a href="<?php echo esc_url( '//downloads.wordpress.org/theme/' . $theme->slug . '.' . $theme->version . '.zip' ); ?>" class="button button-primary"><?php _e( 'Download' ); ?></a>
-                <a href="<?php echo esc_url( $theme->preview_url ); ?>" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
+                <a href="<?php echo esc_url( '//wp-themes.com/' . $slug ); ?>" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
+                <a href="<?php echo esc_url( '//downloads.wordpress.org/theme/' . $slug . '.' . $theme->version . '.zip' ); ?>" class="button button-primary"><?php _e( 'Download' ); ?></a>
             </div>
 
-            <?php if ( ! empty( $theme->parent ) ) : ?>
+            <?php if ( ! empty( get_post()->parent ) ) : ?>
             <div class="theme-notice notice notice-info">
                 <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), sprintf( '<a href="/%1$s">%2$s</a>', $theme->parent->slug, $theme->parent->name ) ); ?></p>
@@ -29 +31 @@
 
         <div class="theme-info">
-            <div class="screenshot"><?php echo esc_url( $theme->screenshot_url . '?w=732&strip=all' ); ?></div>
+            <div class="screenshot"><?php the_post_thumbnail( '798' ); ?></div>
 
             <div class="theme-description entry-summary"><?php the_content(); ?></div>
 
             <div class="theme-tags">
-                <h4><?php _e( 'Tags:' ); ?></h4>
-                <?php
-                foreach( $theme->tags as &$tag ) :
-                    $tag = sprintf( '<a href="%1$s">%2$s</a>', esc_url( home_url( "/tag/{$tag}/" ) ), $tag );
-                endforeach;
-                echo implode( ', ', $theme->tags );
-                ?>
+                <?php the_tags( '<h4>' . __( 'Tags:' ) . '</h4>' ); ?>
             </div><!-- .theme-tags -->
 
@@ -46 +42 @@
                 <h4><?php _e( 'Downloads', 'wporg-themes' ); ?></h4>
 
-                <div id="theme-download-stats-<?php echo esc_attr( $theme->slug ); ?>" class="chart"></div>
+                <div id="theme-download-stats-<?php echo esc_attr( $slug ); ?>" class="chart"></div>
                 <script type="text/javascript">
                     google.load("visualization", "1", {packages:["corechart"]});
@@ -53 +49 @@
                     function drawThemeDownloadsChart() {
                         jQuery(document).ready(function($){
-                            jQuery.getJSON('https://api.wordpress.org/stats/themes/1.0/downloads.php?slug=<?php echo $theme->slug; ?>&limit=730&callback=?', function (downloads) {
+                            $.getJSON('https://api.wordpress.org/stats/themes/1.0/downloads.php?slug=<?php echo $slug; ?>&limit=730&callback=?', function (downloads) {
                                 var data = new google.visualization.DataTable(),
                                     count = 0;
@@ -67 +63 @@
                                 });
 
-                                new google.visualization.ColumnChart(document.getElementById('theme-download-stats-<?php echo esc_attr( $theme->slug ); ?>')).draw(data, {
+                                new google.visualization.ColumnChart(document.getElementById('theme-download-stats-<?php echo esc_attr( $slug ); ?>')).draw(data, {
                                     colors: ['#253578'],
                                     legend: {
@@ -118 +114 @@
                 <?php if ( ! empty( $theme->ratings ) && ! empty( $theme->num_ratings ) ) : ?>
                 <ul>
-                    <?php foreach ( $theme->ratings as $key => $rate_count ) : ?>
+                    <?php
+                        foreach ( $theme->ratings as $key => $rate_count ) :
+                            // Hack to have descending key/value pairs.
+                            $key        = 6 - $key;
+                            $rate_count = $theme->ratings[ $key ];
+                    ?>
                     <li class="counter-container">
-                        <a href="//wordpress.org/support/view/theme-reviews/<?php echo esc_attr( $theme->slug ); ?>?filter=<?php echo $key; ?>" title="<?php printf( _n( 'Click to see reviews that provided a rating of %d star', 'Click to see reviews that provided a rating of %d stars', $key, 'wporg-themes' ), $key ); ?>">
+                        <a href="//wordpress.org/support/view/theme-reviews/<?php echo esc_attr( $slug ); ?>?filter=<?php echo $key; ?>" title="<?php printf( _n( 'Click to see reviews that provided a rating of %d star', 'Click to see reviews that provided a rating of %d stars', $key, 'wporg-themes' ), $key ); ?>">
                             <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), $key ); ?></span>
                             <span class="counter-back">
@@ -133 +134 @@
             </div><!-- .theme-rating -->
 
+            <div class="theme-support">
+                <h4><?php _e( 'Support', 'wporg-themes' ); ?></h4>
+                <p><?php _e( 'Got something to say? Neeed help?', 'wporg-themes' ); ?></p>
+                <a href="//wordpress.org/support/theme/<?php echo esc_attr( $slug ); ?>" class="button button-secondary"><?php _e( 'View support forum', 'wporg-themes' ); ?></a>
+            </div><!-- .theme-support -->
+
             <div class="theme-devs">
                 <h4><?php _e( 'Development', 'wporg-themes' ); ?></h4>
@@ -138 +145 @@
                 <ul class="unmarked-list">
                     <li>
-                        <a href="//themes.trac.wordpress.org/log/<?php echo esc_attr( $theme->slug ); ?>?limit=100&mode=stop_on_copy&format=rss">
+                        <a href="//themes.trac.wordpress.org/log/<?php echo esc_attr( $slug ); ?>?limit=100&mode=stop_on_copy&format=rss">
                             <img src="//s.w.org/style/images/feedicon.png" />
                             <?php _e( 'Development Log', 'wporg' ); ?>
@@ -147 +154 @@
                 <h5><?php _e( 'Browse the Code', 'wporg-themes' ); ?></h5>
                 <ul class="unmarked-list">
-                    <li><a href="//themes.trac.wordpress.org/log/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Development Log', 'wporg-themes' ); ?></a></li>
-                    <li><a href="//themes.svn.wordpress.org/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Subversion Repository', 'wporg-themes' ); ?></a></li>
-                    <li><a href="//themes.trac.wordpress.org/browser/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Browse in Trac', 'wporg-themes' ); ?></a></li>
+                    <li><a href="//themes.trac.wordpress.org/log/<?php echo esc_attr( $slug ); ?>/" rel="nofollow"><?php _e( 'Development Log', 'wporg-themes' ); ?></a></li>
+                    <li><a href="//themes.svn.wordpress.org/<?php echo esc_attr( $slug ); ?>/" rel="nofollow"><?php _e( 'Subversion Repository', 'wporg-themes' ); ?></a></li>
+                    <li><a href="//themes.trac.wordpress.org/browser/<?php echo esc_attr( $slug ); ?>/" rel="nofollow"><?php _e( 'Browse in Trac', 'wporg-themes' ); ?></a></li>
                 </ul>
             </div><!-- .theme-devs -->
         </div><!-- .theme-meta -->
     </div>
+    <div class="theme-footer">
+        <a class="index-link" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Return to Themes List', 'wporg-themes' ); ?></a>
+        <?php the_post_navigation( array(
+            'prev_text' => '<span class="screen-reader-text">' . __( 'Next', 'wporg-themes' ) . '</span>',
+            'next_text' => '<span class="screen-reader-text">' . __( 'Previous', 'wporg-themes' ) . '</span>',
+        ) ); ?>
+    </div>
 </div>

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

@@ -1 +1 @@
 <?php
-    global $theme;
-    $theme = wporg_themes_photon_screen_shot( $theme );
+$post  = get_post();
+$theme = new WPORG_Themes_Repo_Package( $post );
 ?>
-<article id="post-<?php echo $theme->slug; ?>" class="theme hentry">
-    <a class="url" href="<?php echo esc_url( home_url( $theme->slug . '/' ) ); ?>" rel="bookmark" tabindex="-1">
+<article id="post-<?php echo $post->post_name; ?>" class="theme hentry">
+    <a class="url" href="<?php the_permalink(); ?>" rel="bookmark">
         <div class="theme-screenshot">
-            <img src="<?php echo esc_url( $theme->screenshot_url . '?w=572&strip=all' ); ?>" alt="">
+            <?php the_post_thumbnail( '572' ); ?>
         </div>
         <span class="more-details"><?php _ex( 'More Info', 'theme' ); ?></span>
-        <div class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">' . $theme->author . '</span>' ); ?></div>
-        <h3 class="theme-name entry-title"><?php echo $theme->name; ?></h3>
+        <div class="theme-author">
+            <?php printf( _x( 'By %s', 'post author', 'wporg-themes' ), '<span class="author vcard">' . esc_html( get_the_author() ) . '</span>' ); ?>
+        </div>
+        <h3 class="theme-name entry-title"><?php the_title(); ?></h3>
 
         <div class="theme-actions">
-            <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>
+            <a class="button button-primary preview install-theme-preview" href="<?php echo esc_url( '//downloads.wordpress.org/theme/' . $post->post_name . '.' . $theme->latest_version() . '.zip' ); ?>"><?php esc_html_e( 'Download' ); ?></a>
         </div>
     </a>

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

@@ -55 +55 @@
 
 /**
- * Makes an API request to retrieve the right themes for the current query.
- *
- * @param WP_Query $query
- * @return WP_Query
- */
-function wporg_themes_set_up_query( $query ) {
-    if ( is_admin() || in_array( $query->query_vars['pagename'], array( 'upload', 'commercial' ) ) || 'nav_menu_item' == $query->get( 'post_type' ) ) {
-        return $query;
-    }
-
-    $query->set( 'post_type', 'repopackage' );
-
-    $args = array(
-        'per_page' => 15,
-        'fields'   => array(
-            'description'  => true,
-            'sections'     => false,
-            'tested'       => true,
-            'requires'     => true,
-            'rating'       => true,
-            'downloaded'   => true,
-            'downloadlink' => true,
-            'last_updated' => true,
-            'homepage'     => true,
-            'tags'         => true,
-            'num_ratings'  => true,
-            'parent'       => true,
-        ),
-    );
-
-    if ( $query->query_vars['tag'] ) {
-        $args['tag'][] = $query->query_vars['tag'];
-    }
-    elseif ( $query->query_vars['author_name'] ) {
-        $args['author'] = $query->query_vars['author_name'];
-    }
-    elseif ( $query->query_vars['pagename'] ) {
-        $slugs = explode( '/', $query->query_vars['pagename'] );
-
-        if ( count( $slugs ) > 1 && 'browse' == $slugs[0] ) {
-            $args['browse'] = $slugs[1];
-        } else {
-            $args['theme'] = $slugs[0];
-        }
-    }
-    else {
-        $args['browse'] = 'featured';
-    }
-
-    if ( ! function_exists( 'themes_api' ) ) {
-        include ABSPATH . 'wp-admin/includes/theme.php';
-    }
-    $GLOBALS['themes'] = themes_api( 'query_themes', $args );
-
-    return $query;
-}
-add_filter( 'pre_get_posts', 'wporg_themes_set_up_query' );
-
-/**
  * Enqueue scripts and styles.
  */
@@ -123 +64 @@
     wp_enqueue_style( 'wporg-themes-style', get_stylesheet_uri() );
 
-    wp_enqueue_script( 'google-jsapi', '//www.google.com/jsapi', array(), null );
+    wp_enqueue_script( 'google-jsapi', '//www.google.com/jsapi', array( 'jquery' ), null );
 
     if ( ! is_singular( 'page' ) ) {
@@ -199 +140 @@
  */
 function wporg_themes_api_args( $args, $action ) {
-    if ( 'query_themes' == $action ) {
+    if ( in_array( $action, array( 'query_themes', 'theme_information' ) ) ) {
         $args->per_page = 30;
         $args->fields['parent']  = true;

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

@@ -12 +12 @@
  */
 
-
-
+if ( ! function_exists( 'get_theme_feature_list' ) ) {
+    include ABSPATH . 'wp-admin/includes/theme.php';
+}
 get_header();
-
-global $themes;
 ?>
 
@@ -22 +21 @@
         <div class="wp-filter">
             <div class="filter-count">
-                <span class="count theme-count"><?php echo count( $themes->themes ); ?></span>
+                <span class="count theme-count"><?php echo $GLOBALS['wp_query']->found_posts; ?></span>
             </div>
 
@@ -66 +65 @@
             <div class="themes" style="display:none;">
                 <?php
-                if ( ! is_wp_error( $themes ) ) :
-                    if ( is_single() ) :
-                        $theme = array_shift( $themes->themes );
-                        get_template_part( 'content', 'single' );
-                    else :
-                        foreach ( $themes->themes as $theme ) :
-                            get_template_part( 'content', 'index' );
-                        endforeach;
-                    endif;
-                endif;
+                    while ( have_posts() ) :
+                        the_post();
+                        get_template_part( 'content', is_single() ? 'single' : 'index' );
+                    endwhile;
+
+                    the_posts_navigation( array(
+                        'prev_text' => __( 'Next', 'wporg-themes' ),
+                        'next_text' => __( 'Previous', 'wporg-themes' ),
+                    ) );
                 ?>
             </div>

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

@@ -57 +57 @@
 .clear:before,
 .clear:after,
+.theme-wrap .theme-about:before,
+.theme-wrap .theme-about:after,
 .main-navigation:before,
 .main-navigation:after {
@@ -64 +66 @@
 
 .clear:after,
+.theme-wrap .theme-about:after,
 .main-navigation:after {
     clear: both;
@@ -105 +108 @@
     padding: 0;
 }
-.theme-browser .themes:not(:empty) {
+body:not(.single) .theme-browser .themes:not(:empty) {
     font-size: 0;
     padding: 0 0 100px;
@@ -135 +138 @@
 }
 
-.theme-overlay .theme-about {
+.theme-wrap .theme-about {
     bottom: 0;
 }
@@ -258 +261 @@
 .single .theme-wrap {
     background: #fff;
-    box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
-    margin: 3% 0;
+    border: 1px solid #e5e5e5;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+    margin-bottom: 3%;
     overflow: hidden;
     padding: 2% 4%;
@@ -337 +341 @@
     box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
     box-sizing: border-box;
-    overflow: hidden;
     position: relative;
 }
@@ -833 +836 @@
 }
 
+/* Themes Navigation */
+.posts-navigation {
+    font-size: 18px;
+    overflow: hidden;
+}
+
+.posts-navigation .nav-previous {
+    float: right;
+}
+
+.posts-navigation .nav-next {
+    float: left;
+}
+
+.posts-navigation .nav-links a {
+    padding: 8px 10px;
+    display: inline-block;
+}
+
+.posts-navigation .nav-previous a:after {
+    content: '\2192';
+    margin: 0 -10px 0 5px;
+}
+
+.posts-navigation .nav-next a:before {
+    content: '\2190';
+    margin: 0 5px 0 -10px;
+    vertical-align: middle;
+}
+
+/* Single Theme Footer */
+.theme-wrap .theme-footer {
+    border-top: 1px solid #ddd;
+    clear: both;
+    margin: 25px -38px -19px;
+    height: 48px;
+}
+
+.index-link {
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 700;
+    padding: 13px 15px;
+}
+
+.index-link:before {
+    content: '\2190';
+    margin-right: 5px;
+}
+
+.post-navigation {
+    float: right;
+    width: 110px;
+    height: 48px;
+}
+
+.post-navigation .nav-links a {
+    border: 0;
+    border-left: 1px solid #ddd;
+    color: #777;
+    float: left;
+    height: 48px;
+    text-align: center;
+    -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
+    transition: color .1s ease-in-out, background .1s ease-in-out;
+    vertical-align: top;
+    width: 54px;
+}
+
+.post-navigation .nav-links a:before {
+    font: 400 20px/50px dashicons !important;
+    text-decoration: inherit;
+    -webkit-font-smoothing: antialiased;
+}
+
+.post-navigation .nav-links a:hover,
+.post-navigation .nav-links a:focus {
+    background: #ddd;
+    border-color: #ccc;
+    color: #000;
+}
+.post-navigation .nav-previous a:before {
+    content: '\f341';
+}
+
+.post-navigation .nav-next a:before {
+    content: '\f345';
+}
+
 /* Theme notices */
 .notice,
@@ -1004 +1096 @@
         width: 100%;
     }
-}
+
+    .posts-navigation {
+        margin-top: 40px;
+    }
+}