Making WordPress.org

Ticket #3774: 3774-meta.diff

File 3774-meta.diff, 38.7 KB (added by ryelle, 6 years ago)
  • css/components/_page-guides.scss

    diff --git a/css/components/_page-guides.scss b/css/components/_page-guides.scss
    index 5946075..5dbbc73 100644
    a b  
    1 body.page-template-page-guides,
    2 body.page-guides {
     1body.page-template-page-guides-create-blog,
     2body.page-create-blog {
    33        .entry-header {
    4                 padding: ms( 4 ) ms( 1 );
     4                background: $color__wp-blue;
     5                max-width: 100%;
     6                padding: ms(4) ms(1);
    57                text-align: center;
    68
    79                .entry-title {
    8                         font-size: ms( 12 );
     10                        color: #fff;
     11                        font-size: ms(12);
     12                        font-weight: 300;
    913                        line-height: 1;
    1014                        margin: 2rem auto 1rem;
     15                        max-width: 960px;
     16                        padding: 0 ms(4);
    1117
    12                         @include breakpoint( 0, 420px ) {
    13                                 font-size: ms( 11 );
     18                        @include breakpoint($ms-breakpoint) {
     19                                padding: 0 10px;
    1420                        }
     21
     22                        &.center {
     23                                text-align: center;
     24                        }
     25                }
     26
     27                .entry-description {
     28                        color: rgba(255, 255, 255, 0.8);
     29                        font-size: ms(2);
     30                        font-weight: 300;
     31                        margin: -0.4rem auto 2rem;
     32                }
     33        }
     34
     35        .subheading {
     36                margin-top: 1rem;
     37        }
     38
     39        h2 {
     40                margin-top: 0;
     41                font-weight: 400;
     42                font-size: ms(2);
     43        }
     44
     45        .highlight-band {
     46                position: relative;
     47                left: 50%;
     48                right: 50%;
     49                margin-left: -50vw;
     50                margin-right: -50vw;
     51                width: 100vw;
     52                background-color: #f3f4f5;
     53
     54                .content {
     55                        margin: 0 2rem;
     56                        max-width: 100%;
     57                        padding: ms(10) ms(4);
     58                }
     59
     60                li {
     61                        margin-bottom: ms(1);
     62                }
     63
     64                @include breakpoint(1024px) {
     65                        .content {
     66                                margin: 0 auto;
     67                                max-width: 960px;
     68                        }
     69
     70                        ul {
     71                                margin-right: 23vw;
     72                        }
     73
     74                        .graphic {
     75                                float: right;
     76                                width: 20vw;
     77                                height: 20vw;
     78                                background: url('/wp-content/themes/pub/wporg-main/images/freedoms.png')
     79                                        no-repeat; // TODO: CDN
     80                                background-size: 100%;
     81                                background-position: 0 100%;
     82
     83                                @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
     84                                        only screen and (min-resolution: 1.5dppx),
     85                                        only screen and (min-resolution: 144dpi) {
     86                                        background-image: url('/wp-content/themes/pub/wporg-main/images/freedoms-2x.png'); // TODO: CDN
     87                                }
     88                        }
     89                }
     90        }
     91
     92        .shapes {
     93                height: 35.5rem;
     94                margin: ms(4) auto;
     95                position: relative;
     96
     97                .parallelogram {
     98                        height: 13rem;
     99                        width: 70vw;
     100                        padding: 3rem 2.5rem;
     101
     102                        &:hover,
     103                        &:focus,
     104                        &:active {
     105                                text-decoration: none;
     106                        }
     107
     108                        &.first-blog {
     109                                background-color: #389547;
     110                                top: 0;
     111                                left: 5vw;
     112
     113                                &:hover,
     114                                &:focus,
     115                                &:active {
     116                                        background-color: darken(#389547, 10%);
     117                                }
     118                        }
     119
     120                        &.moving-blog {
     121                                background-color: darken(#0073aa, 2%);
     122                                top: 11.25rem;
     123                                left: 10vw;
     124
     125                                &:hover,
     126                                &:focus,
     127                                &:active {
     128                                        background-color: darken(#0073aa, 12%);
     129                                }
     130                        }
     131
     132                        &.adding-blog {
     133                                background-color: #67598e;
     134                                top: 22.5rem;
     135                                left: 15vw;
     136
     137                                &:hover,
     138                                &:focus,
     139                                &:active {
     140                                        background-color: darken(#67598e, 10%);
     141                                }
     142                        }
     143
     144                        p {
     145                                margin: 0;
     146                                transform: skew(15deg);
     147                        }
     148
     149                        p + p {
     150                                margin-top: 1rem;
     151                        }
     152                }
     153
     154                @include breakpoint(580px) {
     155                        height: 28.5rem;
     156
     157                        .parallelogram {
     158                                height: 11rem;
     159
     160                                &.first-blog {
     161                                        top: 0;
     162                                }
     163
     164                                &.moving-blog {
     165                                        top: 9.25rem;
     166                                }
     167
     168                                &.adding-blog {
     169                                        top: 18.5rem;
     170                                }
     171                        }
     172                }
     173
     174                @include breakpoint(860px) {
     175                        height: 16rem;
     176
     177                        .parallelogram {
     178                                width: 36%;
     179                                height: 16rem;
     180                                padding: 4rem 2.5rem;
     181
     182                                &.first-blog {
     183                                        top: 0;
     184                                        left: 0;
     185                                }
     186
     187                                &.moving-blog {
     188                                        top: 0;
     189                                        left: 32%;
     190                                }
     191
     192                                &.adding-blog {
     193                                        top: 0;
     194                                        left: auto;
     195                                        right: 0;
     196                                }
     197                        }
     198                }
     199        }
     200
     201        ol {
     202                list-style: none;
     203                margin: ms(6) 0;
     204
     205                li {
     206                        display: flex;
     207                        padding-left: 68px;
     208                        min-height: 48px;
     209                        align-items: center;
     210                }
     211
     212                @for $i from 1 through 6 {
     213                        li:nth-of-type(#{$i}) {
     214                                background-image: url('#{map-get($icons, $i)}');
     215                                background-repeat: no-repeat;
     216                                background-position: 0 0;
     217                        }
     218                }
     219
     220                @include breakpoint(1024px) {
     221                        ul {
     222                                margin: ms(6) 0 ms(6) -68px;
     223                        }
     224                }
     225        }
     226}
     227
     228body.page-parent-guides {
     229        .entry-title {
     230                &.center {
     231                        text-align: center;
     232                }
     233        }
     234
     235        .entry-content {
     236                [class*='col-'] {
     237                        margin: 0 auto;
     238                }
     239
     240                .row + .row {
     241                        margin-top: ms(6);
     242                }
     243
     244                .row:first-of-type {
     245                        margin-top: ms(6);
     246                }
     247
     248                .row.center {
     249                        text-align: center;
     250                }
     251
     252                h2 {
     253                        font-weight: 400;
     254                        font-size: ms(2);
     255                }
     256
     257                li {
     258                        margin-bottom: ms(2);
     259                }
     260
     261                .shortlist li {
     262                        margin-bottom: 0;
     263                }
     264
     265                hr {
     266                        margin: ms(6) 0;
    15267                }
    16268        }
    17269}
  • new file css/tools/icons.scss

    diff --git a/css/tools/icons.scss b/css/tools/icons.scss
    new file mode 100644
    index 0000000..22d7f2e
    - +  
     1$icons: (
     2        1: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="%23008EC2" fill-rule="nonzero" d="M24 .84C11.209.84.84 11.209.84 24S11.209 47.16 24 47.16 47.16 36.791 47.16 24A23.16 23.16 0 0 0 24 .84zm4.54 36h-7v-13.6c0-1.65 0-3.16.11-4.53A15.52 15.52 0 0 1 20 20.36l-2.92 2.41-3.6-4.43 8.82-7.19h6.26l-.02 25.69z"/></svg>',
     3
     4        2: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="%23008EC2" fill-rule="nonzero" d="M24 .84C11.209.84.84 11.209.84 24S11.209 47.16 24 47.16 47.16 36.791 47.16 24A23.16 23.16 0 0 0 24 .84zM33.47 37H14.82v-4.54l6.27-6.34c1.79-1.88 3-3.16 3.52-3.84a8.75 8.75 0 0 0 1.15-1.77 3.91 3.91 0 0 0 .32-1.51 2 2 0 0 0-.65-1.58 2.68 2.68 0 0 0-1.83-.58 5 5 0 0 0-2.45.7 17.58 17.58 0 0 0-2.8 2l-3.82-4.46a21.17 21.17 0 0 1 3.34-2.54 12.11 12.11 0 0 1 2.95-1.17A14.52 14.52 0 0 1 24.4 11a10.87 10.87 0 0 1 4.45.87 7 7 0 0 1 3 2.51A6.44 6.44 0 0 1 33 18a9.91 9.91 0 0 1-.37 2.79 10.23 10.23 0 0 1-1.17 2.52 17.39 17.39 0 0 1-2.1 2.61c-.88.92-2.74 2.65-5.58 5.21v.17h9.72l-.03 5.7z"/></svg>',
     5
     6        3: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="%23008EC2" fill-rule="nonzero" d="M24 .84C11.209.84.84 11.209.84 24S11.209 47.16 24 47.16 47.16 36.791 47.16 24A23.16 23.16 0 0 0 24 .84zm6.35 34.31c-1.8933 1.3733-4.52 2.06-7.88 2.06a23 23 0 0 1-3.84-.3 19.83 19.83 0 0 1-3.82-1.09v-5.76a15.65 15.65 0 0 0 3.43 1.27 13.87 13.87 0 0 0 3.23.41 6.59 6.59 0 0 0 3.33-.64 2.19 2.19 0 0 0 1.05-2 2.29 2.29 0 0 0-.55-1.63 3.49 3.49 0 0 0-1.76-.86 14.21 14.21 0 0 0-3.16-.29H18.8v-5.23h1.61c3.5333 0 5.3-.9033 5.3-2.71a1.67 1.67 0 0 0-.79-1.51 3.89 3.89 0 0 0-2.1-.49 9.64 9.64 0 0 0-5.1 1.62l-2.88-4.64a13.92 13.92 0 0 1 4.18-2 18.08 18.08 0 0 1 4.89-.6 10.83 10.83 0 0 1 6.26 1.58 5 5 0 0 1 2.27 4.36A6.15 6.15 0 0 1 31 20.84a8.27 8.27 0 0 1-4.22 2.48v.11c4.2867.54 6.43 2.5667 6.43 6.08a6.57 6.57 0 0 1-2.86 5.64z"/></svg>',
     7
     8        4: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><g fill="%23008EC2" fill-rule="nonzero"><path d="M22 22.45l-2.85 4.24h4.24v-3c0-.56.02-1.32.06-2.28a12.08 12.08 0 0 1 .1-1.5h-.2A19 19 0 0 1 22 22.45z"/><path d="M24 .84C11.209.84.84 11.209.84 24S11.209 47.16 24 47.16 47.16 36.791 47.16 24A23.16 23.16 0 0 0 24 .84zm9 31h-2.79v5h-6.85v-5H13.11v-5.1L23.8 11.15h6.41v15.54H33v5.15z"/></g></svg>',
     9
     10        5: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="%23008EC2" fill-rule="nonzero" d="M24 .84C11.209.84.84 11.209.84 24S11.209 47.16 24 47.16 47.16 36.791 47.16 24A23.16 23.16 0 0 0 24 .84zm6.3 33.88C28.57 36.26 26 37 22.45 37a16.82 16.82 0 0 1-7.34-1.39v-5.7a17.88 17.88 0 0 0 3.45 1.16 14.39 14.39 0 0 0 3.31.46 4.67 4.67 0 0 0 3-.82 2.86 2.86 0 0 0 1-2.42A2.76 2.76 0 0 0 24.83 26a5.17 5.17 0 0 0-3.2-.82 11.56 11.56 0 0 0-3.54.61l-2.55-1.27 1-13.57h14.63v5.79h-8.75l-.32 3.39a15.71 15.71 0 0 1 1.95-.29h1.07a7.92 7.92 0 0 1 4 1 7.15 7.15 0 0 1 2.78 2.91 9.2 9.2 0 0 1 1 4.34 8.36 8.36 0 0 1-2.6 6.63z"/></svg>',
     11
     12        6: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><g fill="%23008EC2" fill-rule="nonzero"><path d="M24.22 25.08a2.51 2.51 0 0 0-1.94.81 2.78 2.78 0 0 0-.75 2 4.91 4.91 0 0 0 .72 2.77 2.19 2.19 0 0 0 1.9 1.08 2.22 2.22 0 0 0 1.8-.84 4.13 4.13 0 0 0 .7-2.66c0-2.12-.81-3.16-2.43-3.16z"/><path d="M24 .84C11.209.84.84 11.209.84 24S11.209 47.16 24 47.16 47.16 36.791 47.16 24A23.16 23.16 0 0 0 24 .84zm7 33.92a8.93 8.93 0 0 1-6.68 2.45 8.92 8.92 0 0 1-7.12-3c-1.71-2-2.57-4.73-2.57-8.26a20.85 20.85 0 0 1 1.54-8.71 10.2 10.2 0 0 1 4.54-4.92 15.72 15.72 0 0 1 7.39-1.58 26.08 26.08 0 0 1 3.65.3v5.43a20.64 20.64 0 0 0-3.81-.33 7.59 7.59 0 0 0-5.19 1.53c-1.1267 1.02-1.7467 2.6867-1.86 5h.21a5.35 5.35 0 0 1 5.08-3 6.63 6.63 0 0 1 5.32 2.21 9.13 9.13 0 0 1 1.89 6.14A9.21 9.21 0 0 1 31 34.76z"/></g></svg>',
     13);
     14 No newline at end of file
  • page-guides-adding-blog.php

    diff --git a/page-guides-adding-blog.php b/page-guides-adding-blog.php
    index f97fa34..799e8dd 100644
    a b the_post(); 
    3030        <main id="main" class="site-main col-12" role="main">
    3131
    3232                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    33                         <header class="entry-header">
    34                                 <h1 class="entry-title col-8"><?php _esc_html_e( 'Adding a Blog', 'wporg' ); ?></h1>
     33                        <header class="entry-header row">
     34                                <h1 class="entry-title center col-12"><?php _esc_html_e( 'Adding a Blog', 'wporg' ); ?></h1>
    3535                        </header><!-- .entry-header -->
    3636
    37                         <div class="entry-content row">
    38                                 <section class="col-8">
     37                        <section class="entry-content row">
     38                                <div class="col-8">
    3939                                        <p><?php _esc_html_e( 'Adding a blog can be done in a couple ways. If you are lucky enough to already be running WordPress, then adding a blog is going to take just a few minutes.', 'wporg' ); ?></p>
    40                                         <h2><?php _esc_html_e( 'Adding a Blog to an Existing WordPress Site', 'wporg' ); ?></h2>
    4140
     41                                        <h2><?php _esc_html_e( 'Adding a Blog to an Existing WordPress Site', 'wporg' ); ?></h2>
    4242                                        <ul>
    4343                                                <li><?php _esc_html_e( 'In your Admin, under Posts, go to Categories. Create a Category with a name that will fit for your site&#8217;s navigation. Most people just call it Blog, but News, Events, or Press Releases are also popular. Blog will probably already exist and that can be used as is.', 'wporg' ); ?></li>
    4444                                                <li><?php _esc_html_e( 'Create your first Blog post by going under Posts and clicking on Add New. You can add an image easily and text inside the Editor area. Check the box under Categories on the right side for the Category you selected above. Click Publish/Update.', 'wporg' ); ?></li>
    the_post(); 
    4646                                                <li><?php _esc_html_e( 'Once you are happy, click Publish.', 'wporg' ); ?></li>
    4747                                        </ul>
    4848
     49                                        <hr />
     50
    4951                                        <p><?php _esc_html_e( 'If you are adding a blog to an already running site that is not WordPress, you have a couple of options.', 'wporg' ); ?></p>
    5052                                        <h2><?php _esc_html_e( 'Setup WordPress on a subdomain with its own navigation - Easiest', 'wporg' ); ?></h2>
    5153                                        <p><?php _esc_html_e( 'Sometimes you want to separate your blog from your main website by using a subdomain and some websites use this for organizational purposes.', 'wporg' ); ?></p>
    5254                                        <p><?php _esc_html_e( 'For example, the website cleverdomain.com offers a lot of great content and you want to add blog functionality complete with its own navigation.', 'wporg' ); ?></p>
    5355
    5456                                        <ul>
    55                                                 <li><?php _esc_html_e( 'First they create the subdomain blog.cleverdomain.com on their server and install WordPress on the new subdomain the same way they did for their primary domain.', 'wporg' ); ?></li>
    56                                                 <li><?php _esc_html_e( 'As is the case with most WordPress installations, the default configuration for their new subdomain is already in blog format with their homepage showing a feed of all the latest posts.', 'wporg' ); ?></li>
     57                                                <li><?php _esc_html_e( 'First you create the subdomain blog.cleverdomain.com on your server and then install WordPress on the new subdomain the same way you did for your primary domain.', 'wporg' ); ?></li>
     58                                                <li><?php _esc_html_e( 'As is the case with most WordPress installations, the default configuration for your new subdomain is already in blog format with your homepage showing a feed of all the latest posts.', 'wporg' ); ?></li>
    5759                                                <li><?php _esc_html_e( 'Choosing a theme for the blog site is the next big step. This can be used to create a separate but similar identity for the blog site if desired.', 'wporg' ); ?></li>
    5860                                                <li><?php _esc_html_e( 'The next step is to create some blog categories that will be used as navigation items for the blog site.', 'wporg' ); ?></li>
    5961                                                <li><?php _esc_html_e( 'One final navigation item that needs to be included is a link back to the main domain.', 'wporg' ); ?></li>
    the_post(); 
    6163                                        </ul>
    6264
    6365                                        <h2><?php _esc_html_e( 'Setup WordPress as a subdirectory with integrated navigation  - Recommended', 'wporg' ); ?></h2>
     66                                        <p><?php _esc_html_e( 'Creating a separate blog installation in a subdirectory follows a very similar path to creating one in a subdomain.', 'wporg' ); ?></p>
    6467                                        <ul>
    65                                                 <li><?php _esc_html_e( 'Creating a separate blog installation in a subdirectory follows a very similar path to creating one in a subdomain.', 'wporg' ); ?></li>
    6668                                                <li><?php _esc_html_e( 'The first step is to create the subdirectory for your new WordPress installation. Some software packages, like Softaculous, will create the subdirectory automatically during the installation process and might allow you to skip this step.', 'wporg' ); ?></li>
    6769                                                <li><?php _esc_html_e( 'Next install WordPress like you would normally, but make sure that you are creating the new WordPress instance in the new subdirectory.', 'wporg' ); ?></li>
    6870                                                <li><?php _esc_html_e( 'Once the installation is complete you can start building out your separate blog like you would any other WordPress website.', 'wporg' ); ?></li>
    the_post(); 
    7072                                                <li><?php /* @todo */ _esc_html_e( 'TODO: Need the hardest step&mdash;bring over your current sites navigation to the theme', 'wporg' ); ?></li>
    7173                                                <li><?php _esc_html_e( 'The advantage to using this method over the subdomain one is that is maintains consistency with your domain naming conventions. Any traffic to your blog will also help improve the standing of your main domain unlike the subdomain method which will be ranked separately.', 'wporg' ); ?></li>
    7274                                        </ul>
    73                                 </section>
    74                         </div><!-- .entry-content -->
     75                                </div>
     76                        </section><!-- .entry-content -->
    7577                </article><!-- #post-## -->
    7678
    7779        </main><!-- #main -->
    7880
    79         <?php
     81<?php
    8082get_footer();
  • page-guides-create-blog.php

    diff --git a/page-guides-create-blog.php b/page-guides-create-blog.php
    index 8768e09..904f6af 100644
    a b  
    99
    1010namespace WordPressdotorg\MainTheme;
    1111
    12 $GLOBALS['menu_items'] = [
    13         'guides/create-blog' => _x( 'Create a Blog', 'Page title', 'wporg' ),
    14         //'guides/first-time'  => _x( 'First Time', 'Page title', 'wporg' ),
    15         'guides/moving-blog' => _x( 'Moving a Blog', 'Page title', 'wporg' ),
    16         'guides/adding-blog' => _x( 'Adding a Blog', 'Page title', 'wporg' ),
    17 ];
    18 
    1912$plugin_search_terms = [
    2013        ___( 'Sliders and Galleries', 'wporg' ),
    2114        ___( 'Social Sharing', 'wporg' ),
    add_filter( 'jetpack_images_pre_get_images', function() { 
    3326
    3427/* See inc/page-meta-descriptions.php for the meta description for this page. */
    3528
    36 get_header( 'child-page' );
     29get_header();
    3730the_post();
    3831?>
    3932
    the_post(); 
    4134
    4235                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    4336                        <header class="entry-header">
    44                                 <h1 class="entry-title col-8"><?php _esc_html_e( 'Create a Blog', 'wporg' ); ?></h1>
     37                                <h1 class="entry-title"><?php _esc_html_e( 'Create a Blog', 'wporg' ); ?></h1>
     38
     39                                <p class="entry-description">
     40                                        <?php
     41                                        printf(
     42                                                /* translators: WordPress market share: 30 - Note: The following percent sign is '%%' for escaping purposes; */
     43                                                esc_html___( 'WordPress runs more than %s%% of the web', 'wporg' ),
     44                                                number_format_i18n( WP_MARKET_SHARE )
     45                                        );
     46                                        ?>
     47                                </p>
    4548                        </header><!-- .entry-header -->
    4649
    47                         <div class="entry-content row">
    48                                 <section class="col-8">
    49                                         <p><?php _esc_html_e( 'Welcome to our create a blog guide. If you haven&#8217;t used WordPress before, we are really happy you are giving us a chance. A few things you may want to know about this software and the community behind it:', 'wporg' ); ?></p>
    50 
    51                                         <ul>
    52                                                 <li><?php _esc_html_e( 'Consistently chosen by the world&#8217;s top bloggers.', 'wporg' ); ?></li>
    53                                                 <li><?php _esc_html_e( 'Easy to get started but also easy to extend when you are ready.', 'wporg' ); ?></li>
    54                                                 <li><?php _esc_html_e( 'Open Source&mdash;you retain complete ownership of your designs and content.', 'wporg' ); ?></li>
    55                                                 <li><?php _esc_html_e( 'Backed by an enormous community including hosts, developers, artists, content creators, and more.', 'wporg' ); ?></li>
    56                                                 <li><?php _esc_html_e( 'Unlimited growth, small blogs and huge blogs run on WordPress.', 'wporg' ); ?></li>
    57                                                 <li>
    58                                                         <?php
    59                                                         printf(
    60                                                                 /* translators: WordPress market share: 30 - Note: The following percent sign is '%%' for escaping purposes; */
    61                                                                 esc_html___( 'Over %s%% of the web trusts WordPress to power its web presence including millions of blogs.', 'wporg' ),
    62                                                                 number_format_i18n( WP_MARKET_SHARE )
    63                                                         );
    64                                                         ?>
    65                                                 </li>
    66                                         </ul>
     50                        <div class="entry-content">
     51                                <section class="row center gutters between">
     52                                        <div class="col-10">
     53                                                <p class="subheading"><?php _esc_html_e( 'Welcome to our create a blog guide.  If you haven&#8217;t used WordPress before, we are really happy you are giving us a chance to help you start a blog.  A few things you may want to know about this software and the community behind it:', 'wporg' ); ?></p>
     54                                        </div>
     55                                </section>
    6756
    68                                         <p><?php _esc_html_e( 'With that out of the way, let&#8217;s get you going on creating a blog. Different goals and situations may take you down a different path, but we have the following sections to help address the most common situations.', 'wporg' ); ?></p>
     57                                <section class="row highlight-band">
     58                                        <div class="content">
     59                                                <div class="graphic" aria-hidden></div>
     60                                                <ul>
     61                                                        <li><?php _esc_html_e( 'Consistently chosen by the world&#8217;s top bloggers.', 'wporg' ); ?></li>
     62                                                        <li><?php _esc_html_e( 'Easy to get started but also easy to extend when you are ready.', 'wporg' ); ?></li>
     63                                                        <li><?php _esc_html_e( 'Open Source&mdash;you retain complete ownership of your designs and content.', 'wporg' ); ?></li>
     64                                                        <li><?php _esc_html_e( 'Backed by an enormous community including hosts, developers, artists, content creators, and more.', 'wporg' ); ?></li>
     65                                                        <li><?php _esc_html_e( 'Unlimited growth, small blogs and huge blogs run on WordPress.', 'wporg' ); ?></li>
     66                                                        <li>
     67                                                                <?php
     68                                                                printf(
     69                                                                        /* translators: WordPress market share: 30 - Note: The following percent sign is '%%' for escaping purposes; */
     70                                                                        esc_html___( 'Nearly %s%% of the web trusts WordPress to power its web presence including millions of blogs.', 'wporg' ),
     71                                                                        number_format_i18n( WP_MARKET_SHARE )
     72                                                                );
     73                                                                ?>
     74                                                        </li>
     75                                                </ul>
     76                                        </div>
    6977                                </section>
    7078
    71                                 <section class="areas row gutters between">
    72                                         <div class="col-4">
    73                                                 <p><?php _esc_html_e( 'First time making a blog? Let&#8217;s get you up and running on WordPress.', 'wporg' ); ?></p>
    74                                                 <a href="<?php echo esc_url( site_url( '/' ) ); ?>"><?php _esc_html_e( 'Learn more', 'wporg' ); ?></a>
     79                                <section class="row gutters between">
     80                                        <div class="col-8">
     81                                                <p><?php _esc_html_e( 'With that out of the way, let&#8217;s get you going on creating a blog. Different goals and situations may take you down a different path, but we have the following sections to help address the most common situations.', 'wporg' ); ?></p>
    7582                                        </div>
    76                                         <div class="col-4">
     83                                </section>
     84
     85                                <section class="shapes row gutters between">
     86                                        <a class="parallelogram first-blog" href="<?php echo esc_url( site_url( '/guides/first-time' ) ); ?>">
     87                                                <p><?php _esc_html_e( 'First time making a blog? Let&#8217;s get you up and running on WordPress.', 'wporg' ); ?></p>
     88                                                <p><?php _esc_html_e( 'Learn more', 'wporg' ); ?></p>
     89                                        </a>
     90                                        <a class="parallelogram moving-blog" href="<?php echo esc_url( site_url( '/guides/moving-blog' ) ); ?>">
    7791                                                <p><?php _esc_html_e( 'Moving your blog over to WordPress? Welcome to being out of the box!', 'wporg' ); ?></p>
    78                                                 <a href="<?php echo esc_url( site_url( '/' ) ); ?>"><?php _esc_html_e( 'Learn more', 'wporg' ); ?></a>
     92                                                <p><?php _esc_html_e( 'Learn more', 'wporg' ); ?></p>
    7993
    80                                         </div>
    81                                         <div class="col-4">
     94                                        </a>
     95                                        <a class="parallelogram adding-blog" href="<?php echo esc_url( site_url( '/guides/adding-blog' ) ); ?>">
    8296                                                <p><?php _esc_html_e( 'Already running a site and needing to add a blog to an existing site? Easy.', 'wporg' ); ?></p>
    83                                                 <a href="<?php echo esc_url( site_url( '/' ) ); ?>"><?php _esc_html_e( 'Learn more', 'wporg' ); ?></a>
     97                                                <p><?php _esc_html_e( 'Learn more', 'wporg' ); ?></p>
     98                                        </a>
     99                                </section>
     100
     101                                <section class="row gutters between">
     102                                        <div class="col-8">
     103                                                <p><?php _esc_html_e( 'For those of you who are just ready to go and want the short and fast, we have the below list really summarized.  Something to remember though, life is about the journey not the destination!  WordPress is more than just a software, it is a community, a philosophy, and an adventure all wrapped up in one when you start blogging online.', 'wporg' ); ?></p>
    84104                                        </div>
    85105                                </section>
    86106
    87                                 <section class="col-8">
    88                                         <h2><?php _esc_html_e( 'First time making a blog', 'wporg' ); ?></h2>
    89                                         <p><?php _esc_html_e( 'WordPress blog sites are made up of the look of the site (called Themes), the individual blog Posts, the Categories of those posts, and additional functionality you might want, called Plugins. This is all controlled inside the WordPress &#8220;admin panel&#8221; that is running on a host.', 'wporg' ); ?></p>
    90                                         <p>
    91                                                 <?php
    92                                                 printf(
    93                                                         /* translators: URLs to setup guide */
    94                                                         wp_kses_post( ___( 'If you don&#8217;t have a WordPress yet, the first step is to get one from your host or to get a host. If you have a modern host, they will have a WordPress auto installer or, if you are a bit technical, <a href="%s">you can install it yourself with this guide</a>. If you need hosting there are three types of hosting plans you will see.', 'wporg' ) ),
    95                                                         esc_url( '' )
    96                                                 );
    97                                                 ?>
    98                                         </p>
    99 
    100                                         <ul>
    101                                                 <li><?php _esc_html_e( 'General Hosting - these plans can run lots of software and will have many different ways of editing a website or a blog. If you really want to learn the ins and outs of blogging and running websites, you probably want a general hosting account.', 'wporg' ); ?></li>
    102                                                 <li><?php _esc_html_e( 'WordPress specific hosting plans - these plans will be all about WordPress. A good host will likely have a set of free themes, recommended Plugins to help you with your blog, and will have people on staff ready to help you. These plans are usually best if you are really focused on launching your blog and you have some budget.', 'wporg' ); ?></li>
    103                                                 <li><?php _esc_html_e( 'Free WordPress providers - these providers give you access to WordPress in a more limited fashion, but are great if you really don&#8217;t have a budget and want to quickly get a simple blog up and running.', 'wporg' ); ?></li>
    104                                         </ul>
    105 
    106                                         <p>
    107                                                 <?php
    108                                                 printf(
    109                                                 /* translators: URLs to setup guide */
    110                                                         wp_kses_post( ___( 'Visit our <a href="%s">web hosting page</a> for more info. If you are really pressed for time or you are just checking out WordPress, look for hosts that offer a free trial.', 'wporg' ) ),
    111                                                         esc_url( 'https://wordpress.org/hosting/' )
    112                                                 );
    113                                                 ?>
    114                                         </p>
    115                                         <p><?php _esc_html_e( 'Now that is taken care of, let&#8217;s move on to the next step, selecting a theme. WordPress will come preloaded with a couple of blogging oriented themes. These may fit your needs but under the Add Theme section is a world of options.', 'wporg' ); ?></p>
    116 
    117                                         <ul>
    118                                                 <li><?php _esc_html_e( 'Under the themes panel, click the &#8220;Add New&#8221; button at the top, or the &#8220;Add New Theme&#8221; area on the page.', 'wporg' ); ?></li>
    119                                                 <li><?php _esc_html_e( 'You will see the WordPress theme repository, where you can search through thousands of free, beautiful templates to use. Or, if you&#8217;ve purchased a theme or acquired it through some other means, use the &#8220;Upload Theme&#8221; button at the top of the page to install it on your WordPress installation.', 'wporg' ); ?></li>
    120                                                 <li><?php _esc_html_e( 'Selecting the &#8220;perfect&#8221; theme may seem daunting due to the sheer amount of options, but you can easily switch between themes if you find one that better meets your needs.', 'wporg' ); ?></li>
    121                                                 <li><?php _esc_html_e( 'Once you&#8217;ve chosen a theme, move your cursor over the theme&#8217;s preview image to reveal the &#8220;Install&#8221; and &#8220;Preview&#8221; buttons. If you want to see what the theme will look like in a live setting, select &#8220;Preview&#8221;. Otherwise, click the &#8220;Install&#8221; button.', 'wporg' ); ?></li>
    122                                                 <li><?php _esc_html_e( 'Once the theme is installed, you still have to activate it to make it live. Simply return to the &#8220;Themes&#8221; sub-option under &#8220;Appearance&#8221;, find your newly installed theme and click &#8220;Activate&#8221;.', 'wporg' ); ?></li>
    123                                         </ul>
    124 
    125                                         <p><?php _esc_html_e( 'Next, you&#8217;ll want to customize the look and feel of your website, including adding titles:', 'wporg' ); ?></p>
    126 
    127                                         <ul>
    128                                                 <li><?php _esc_html_e( 'The WordPress Customizer is a powerful tool that allows you to easily make changes to your website and see the immediate results in the preview window.', 'wporg' ); ?></li>
    129                                                 <li><?php _esc_html_e( 'You can access the Customizer by clicking on the Appearance &rarr; Customize option from your WordPress&#8217;s administration panel, or navigating to any page while logged in as an administrator and clicking the &#8220;Customize&#8221; option on the top bar.', 'wporg' ); ?></li>
    130                                                 <li><?php _esc_html_e( 'Once you’re in the Customizer, you can easily change your site title and site tagline by clicking the &#8220;Site Identity&#8221; option on the left sidebar.', 'wporg' ); ?></li>
    131                                                 <li><?php _esc_html_e( 'From there, you can navigate and experiment with the other customizable options and see your changes in the right preview panel. For example, if you want to change the fonts across your entire website, click the &#8220;Typography&#8221; option.', 'wporg' ); ?></li>
    132                                                 <li><?php _esc_html_e( 'Advanced users can also add custom CSS styling to your website under the &#8220;Custom CSS&#8221; option and preview how those changes will affect your website before committing.', 'wporg' ); ?></li>
    133                                                 <li><?php _esc_html_e( 'When you’re finished, click the &#8220;Publish&#8221; button at the top of the sidebar. Or, if you change your mind, simply click the &#8220;X&#8221; button in the upper left corner.', 'wporg' ); ?></li>
    134                                         </ul>
    135 
    136                                         <p><?php _esc_html_e( 'Almost done here. Next, you will want to create some categories for all the content you will be creating.', 'wporg' ); ?></p>
    137                                         <ul>
    138                                                 <li><?php _esc_html_e( 'Categories are assigned to blog posts for organizational purposes and help to provide your readers with a general idea of the post&#8217;s content.', 'wporg' ); ?></li>
    139                                                 <li><?php _esc_html_e( 'Blog posts can be filtered and displayed by their categories, making it easy show the right content to your readers.', 'wporg' ); ?></li>
    140                                                 <li><?php _esc_html_e( 'Categories can be assigned at the moment of creation of the post, no need to create them ahead of time.', 'wporg' ); ?></li>
    141                                                 <li><?php _esc_html_e( 'You can create menu items that link to your individual categories to make navigation for your users.', 'wporg' ); ?></li>
    142                                         </ul>
    143 
    144                                         <p><?php _esc_html_e( 'Next, you&#8217;ll create your first post! The WordPress post editor is quick and easy to use.', 'wporg' ); ?></p>
    145                                         <ul>
    146                                                 <li><?php _esc_html_e( 'If you&#8217;ve used a word processing program before, you&#8217;ll most likely find the WordPress visual editor&#8217;s interface very familiar.', 'wporg' ); ?></li>
    147                                                 <li><?php _esc_html_e( 'Just like your favorite word processing program, you can type in the text entry pane and easily style your post using the editor controls in the toolbar at the top of the editor interface.', 'wporg' ); ?></li>
    148                                                 <li><?php _esc_html_e( 'If you want to add, edit and resize images (and image galleries) or embed sounds simply click the &#8220;Add Media&#8221; button and upload your files to your media library, select it, then click the &#8220;Insert into post&#8221; button on the bottom right of the interface.', 'wporg' ); ?></li>
    149                                                 <li><?php _esc_html_e( 'If you&#8217;re familiar with HTML, you can easily switch to the raw text editor by clicking the &#8220;Text&#8221; tab on the right side of the editor interface.', 'wporg' ); ?></li>
    150                                                 <li><?php _esc_html_e( 'When you&#8217;re finished editing your post, click the &#8220;Publish&#8221; button on the right sidebar to make it live. If you need to work on it later, click the &#8220;Save Draft&#8221; button. To preview your post, click the &#8220;Preview&#8221; button.', 'wporg' ); ?></li>
    151                                                 <li><?php _esc_html_e( 'You can also change the status of your post, or schedule the post to automatically publish at a later date by using the options in the &#8220;Publish&#8221; section of the right sidebar.', 'wporg' ); ?></li>
    152                                         </ul>
    153 
    154                                         <p>
    155                                                 <?php
    156                                                 printf(
    157                                                         /* translators: URL to WordCamp Central */
    158                                                         wp_kses_post( ___( 'Lastly, remember to have fun and bring your friends in on it. If you are really excited and want to go to the next level, come out to meet some other bloggers in person at one of the many <a href="%s">WordCamps</a> around the world.', 'wporg' ) ),
    159                                                         esc_url( 'https://central.wordcamp.org/' )
    160                                                 );
    161                                                 ?>
    162                                         </p>
    163 
    164                                         <h3><?php _esc_html_e( 'Starting your blog in 6 easy steps', 'wporg' ); ?></h3>
    165                                         <p><?php _esc_html_e( 'To summarize, here is a quick list on how to get a blog started:', 'wporg' ); ?></p>
    166                                         <ol>
    167                                                 <li><?php _esc_html_e( 'Get hosting from a modern host and use their auto installer for WordPress.', 'wporg' ); ?></li>
    168                                                 <li><?php _esc_html_e( 'Select a blogging theme from Add Theme.', 'wporg' ); ?></li>
    169                                                 <li><?php _esc_html_e( 'Customize the Site Title and the Header.', 'wporg' ); ?></li>
    170                                                 <li><?php _esc_html_e( 'Click on Posts Add New and create a new blog post.', 'wporg' ); ?></li>
    171                                                 <li><?php _esc_html_e( 'Create some categories so it is easy to organize your content.', 'wporg' ); ?></li>
    172                                                 <li><?php _esc_html_e( 'Have fun and tell your friends!', 'wporg' ); ?></li>
    173                                         </ol>
    174 
    175                                         <p>
    176                                                 <?php
    177                                                 printf(
    178                                                         /* translators: URL to Plugin Directory */
    179                                                         wp_kses_post( ___( 'Once you are feeling confident, the real power of WordPress comes in with using Plugins to <a href="%s">add functionality</a>.', 'wporg' ) ),
    180                                                         esc_url( home_url( '/plugins/' ) )
    181                                                 );
    182                                                 ?>
    183                                         </p>
    184                                         <h2><?php _esc_html_e( 'Adding Functionality with Plugins', 'wporg' ); ?></h2>
    185                                         <p><?php _esc_html_e( 'One of the most powerful parts of WordPress is the ability to add selected functionality or change how WordPress works through Plugins. Just look for &#8220;Add New&#8221; under &#8220;Plugins&#8221; in your WordPress admin menu. There are thousands of plugins though, so if you are just getting started the following categories are often added right away.', 'wporg' ); ?></p>
    186                                         <ul>
    187                                                 <?php foreach ( $plugin_search_terms as $plugins_search_term ) : ?>
    188                                                 <li><a href="<?php echo esc_url( home_url( sprintf( '/plugins/search/%s/', urlencode( esc_attr( $plugins_search_term ) ) ) ) ); ?>"><?php echo esc_html( $plugins_search_term ); ?></a></li>
    189                                                 <?php endforeach; ?>
    190                                         </ul>
     107                                <section class="row gutters between">
     108                                        <div class="col-8">
     109                                                <h2><?php _esc_html_e( 'How to start a blog in 6 easy steps.', 'wporg' ); ?></h2>
     110                                                <p><?php _esc_html_e( 'To summarize, here is a quick list on how to get a blog started', 'wporg' ); ?></p>
     111
     112                                                <ol>
     113                                                        <li><?php _esc_html_e( 'Get hosting from a modern host and use their auto installer for WordPress', 'wporg' ); ?></li>
     114                                                        <li><?php _esc_html_e( 'Select a blogging theme from Add Theme', 'wporg' ); ?></li>
     115                                                        <li><?php _esc_html_e( 'Customize the Site Title and the Header', 'wporg' ); ?></li>
     116                                                        <li><?php _esc_html_e( 'Click on Posts->Add New and create a new blog post', 'wporg' ); ?></li>
     117                                                        <li><?php _esc_html_e( 'Create some categories so it is easy to organize your content', 'wporg' ); ?></li>
     118                                                        <li><?php _esc_html_e( 'Have fun and tell your friends!', 'wporg' ); ?></li>
     119                                                </ol>
     120
     121                                                <p>
     122                                                        <?php
     123                                                        printf(
     124                                                                /* translators: URLs to "first blog" page */
     125                                                                wp_kses_post( __( 'Too fast?  Get some more info if this is your <a href="%s">first blog</a>.  Once you are feeling confident, the real power of WordPress comes in with using Plugins to <a href="%s">add functionality</a> or finding a great theme.', 'wporg' ) ),
     126                                                                esc_url( 'https://wordpress.org/guides/first-blog/' ),
     127                                                                esc_url( 'https://wordpress.org/guides/first-blog/#plugins' )
     128                                                        );
     129                                                        ?>
     130                                                </p>
     131                                        </div>
     132                                </section>
     133
     134                                <section class="row gutters between">
     135                                        <div class="col-8">
     136                                                <h2><?php _esc_html_e( 'Adding functionality to your Blog with Plugins', 'wporg' ); ?></h2>
     137
     138                                                <p><?php _esc_html_e( 'One of the most powerful parts of WordPress is the ability to add selected functionality or change how WordPress works through Plugins.  Just look for &#8220;Add New&#8221; under Plugins in your WordPress admin menu. There are many plugins though, so if you are just getting started the following categories are often added right away.', 'wporg' ); ?></p>
     139
     140                                                <ul class="shortlist">
     141                                                        <?php foreach ( $plugin_search_terms as $plugins_search_term ) : ?>
     142                                                        <li><a href="<?php echo esc_url( home_url( sprintf( '/plugins/search/%s/', urlencode( esc_attr( $plugins_search_term ) ) ) ) ); ?>"><?php echo esc_html( $plugins_search_term ); ?></a></li>
     143                                                        <?php endforeach; ?>
     144                                                </ul>
     145                                        </div>
    191146                                </section>
    192147                        </div><!-- .entry-content -->
    193148                </article><!-- #post-## -->
    194149
    195150        </main><!-- #main -->
    196151
    197         <?php
     152<?php
    198153get_footer();
  • page-guides-moving-blog.php

    diff --git a/page-guides-moving-blog.php b/page-guides-moving-blog.php
    index 78f6193..45f4b3a 100644
    a b the_post(); 
    3030        <main id="main" class="site-main col-12" role="main">
    3131
    3232                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    33                         <header class="entry-header">
    34                                 <h1 class="entry-title col-8"><?php _esc_html_e( 'Moving a Blog', 'wporg' ); ?></h1>
     33                        <header class="entry-header row">
     34                                <h1 class="entry-title center col-12"><?php _esc_html_e( 'Moving your blog to WordPress', 'wporg' ); ?></h1>
    3535                        </header><!-- .entry-header -->
    3636
    37                         <div class="entry-content row">
    38                                 <section class="col-8">
     37                        <section class="entry-content row">
     38                                <div class="col-8">
    3939                                        <p><?php _esc_html_e( 'We are very excited you have been successful with your blog and are ready for the next step! Many very successful bloggers have started on other platforms and ultimately outgrow those tools or the &#8220;box&#8221; that goes along with it.', 'wporg' ); ?></p>
    4040
    41                                         <p><?php _esc_html_e( 'How to move your SquareSpace blog to WordPress', 'wporg' ); ?></p>
     41                                        <h2><?php _esc_html_e( 'How to move your SquareSpace blog to WordPress', 'wporg' ); ?></h2>
    4242                                        <ul>
    4343                                                <li><?php _esc_html_e( 'Log into your SquareSpace account and in the Home sidebar menu, click &#8220;Settings&#8221;. Once you&#8217;re in the settings menu, click &#8220;Advanced&#8221;, then &#8220;Import / Export&#8221;.', 'wporg' ); ?></li>
    4444                                                <li><?php _esc_html_e( 'In the pop-up modal, click &#8220;WordPress&#8221;. Wait for the progress bar on the left sidebar to complete, then click the &#8220;Download&#8221; button. Save the XML file to a place on your computer that you&#8217;ll remember.', 'wporg' ); ?></li>
    the_post(); 
    4848                                                <li><?php _esc_html_e( 'You&#8217;ll have to assign an author to your new content. Either create a new user by entering a username in the &#8220;&hellip;as a new user&#8221; input box, or assign the posts to an existing user by using the corresponding input box. Click submit and you&#8217;re done!', 'wporg' ); ?></li>
    4949                                        </ul>
    5050
    51                                         <p><?php _esc_html_e( 'How to move your Wix blog to WordPress', 'wporg' ); ?></p>
     51                                        <h2><?php _esc_html_e( 'How to move your Wix blog to WordPress', 'wporg' ); ?></h2>
    5252                                        <ul>
    5353                                                <li><?php echo wp_kses_post( ___( 'In your browser&#8217;s address bar, enter the URL to your Wix website, then add <code>/feed.xml</code> to the end of it. This will load your blog&#8217;s RSS feed.', 'wporg' ) ); ?></li>
    5454                                                <li><?php _esc_html_e( 'Right click anywhere on the page and click &#8220;Save as&hellip;&#8221; then save the XML file to a location on your computer that you will remember.', 'wporg' ); ?></li>
    the_post(); 
    5858                                                <li><?php _esc_html_e( 'You&#8217;ll have to assign an author to your new content. Either create a new user by entering a username in the &#8220;&hellip;as a new user&#8221; input box, or assign the posts to an existing user by using the corresponding input box. Click submit and you&#8217;re done!', 'wporg' ); ?></li>
    5959                                        </ul>
    6060
    61                                         <p><?php _esc_html_e( 'How to move your Blogger blog posts to Self-Hosted WordPress', 'wporg' ); ?></p>
     61                                        <h2><?php _esc_html_e( 'How to move your Blogger blog posts to WordPress', 'wporg' ); ?></h2>
     62
    6263                                        <ul>
    6364                                                <li><?php _esc_html_e( 'First, log into your Blogger account.', 'wporg' ); ?></li>
    6465                                                <li><?php _esc_html_e( 'In the upper left corner, you&#8217;ll notice a small &#8220;down arrow&#8221; next to your blog name. Click the arrow to reveal a dropdown menu of all your blogs are that are hosted on Blogger.', 'wporg' ); ?></li>
    the_post(); 
    7071                                                <li><?php _esc_html_e( 'On the import page, click the &#8220;Choose File&#8221; button, navigate to where you saved the XML file, select it and click &#8220;Open&#8221;. Then, hit the &#8220;Upload file and Import&#8221; button.', 'wporg' ); ?></li>
    7172                                                <li><?php _esc_html_e( 'You&#8217;ll have to assign an author to your new content. Either create a new user by entering a username in the &#8220;&hellip;as a new user&#8221; input box, or assign the posts to an existing user by using the corresponding input box. Click submit and you&#8217;re done!', 'wporg' ); ?></li>
    7273                                        </ul>
    73                                 </section>
    74                         </div><!-- .entry-content -->
     74                                </div>
     75                        </section><!-- .entry-content -->
    7576                </article><!-- #post-## -->
    7677
    7778        </main><!-- #main -->
    7879
    79         <?php
     80<?php
    8081get_footer();