Geekly Articles each Day
📜 ⬆️ ⬇️

How to impose a theme for WordPress

Introduction


In previous articles we looked at the principles of layout on pure CSS and using Bootstrap. In today's article we are starting to consider the layout features for popular CMS. And let's start with WordPress, as the most popular of them. We will assume that you have already installed WordPress and will proceed directly to creating a template, which we will continue to use as the Corporate Blue from the Pcklaboratory studio. If you do not know how to install WordPress, then the instructions can be found here . In this guide, we will not describe in detail CSS styles and HTML code — this has already been done in previous articles. Instead, consider in detail the features of creating a theme just under WordPress.

Adding a topic


To begin with, in the themes folder, create a folder of our “whitesquare” template. It will contain the images folder and the two required empty index.php and style.css files.



The next step is to add a screenshot of our theme. Save the homepage image from a psd layout of 880x660 in the whitesquare theme folder with the name screenshot.png.
')
After that, we can already use our theme. Go to the admin panel at http: // {site-name} / wp-admin, and then go to theme management (Appearance -> Themes). Our whitesquare theme should already appear on the list. Sightly on the topic and click "Activate".



After the theme is activated, you will see a message with a link to the site. Already, you can go to it and see a blank page.

Preliminary inspection




If you look at the layout, you can see that our page consists of a header and a footer, which are repeated on all pages. Also on all pages, except the main one, there is a sidebar on the left. To make the manual more universal, let's design the main menu pages as “WordPress pages” (page), and submenu pages as “WordPress blog posts” (post) with comments. We will make the main page as a separate page (front-page) with its own markup. It should be noted here that, despite the fact that WordPress pages can be implemented in two ways (like pages or as posts) in the database, they differ only in type, however, when creating templates, they are processed a little differently. You can verify this below.

Page structure


Most WordPress theme guides are limited to creating layouts and styles for it. We will describe the whole procedure for creating a full-fledged WordPress site within the framework of the provided layouts.

Let's start with the page structure. Before you add pages, you must first go to the settings and specify the style of links: Settings -> Permalink settings -> Post name. This will make links in the form of "http: // site_name / page_name".

Adding pages is done through the admin panel: Pages -> Add new. For each page in the Page Attributes area, in the Order field, number the page order in the main menu.

After adding, the list of pages should look like this:



When all pages are added, you need to specify that the Home page will be the main one. To do this, go to the Settings -> Reading menu and in the Front page displays field, specify: A static page -> Home.

Header.php and Footer.php


A cap in WordPress terminology is not only a visual cap on a site's layout. In fact, it contains all the general code that occurs at the beginning of all pages on the site. Let's create the file header.php in our template folder and fill it with content.

<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=<?php bloginfo('charset'); ?>"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div class="wrapper">

Inside the head tag, we set the encoding specified in WordPress, the page title and pingback (to link to other sites). In the last line, we invoke the wp_head () command, which adds WordPress headers. Also open the wrapper block.

In addition, we need to connect css and js files. In current versions of wordpress this is not done directly in header.php, but through connection in special functions. To do this, open the functions.php file inside our theme and add the following code to it:

 function enqueue_styles() { wp_enqueue_style( 'whitesquare-style', get_stylesheet_uri()); wp_register_style('font-style', 'http://fonts.googleapis.com/css?family=Oswald:400,300'); wp_enqueue_style( 'font-style'); } add_action('wp_enqueue_scripts', 'enqueue_styles'); function enqueue_scripts () { wp_register_script('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js'); wp_enqueue_script('html5-shim'); } add_action('wp_enqueue_scripts', 'enqueue_scripts');

In the enqueue_styles function, we registered and connected the necessary styles, and then indicated to WordPress that this function is a connection of styles. Similarly, for js file, which is required to display html5 tags in older browsers.

Footer is similar to the header - it contains the general code that appears at the end of all pages of the site. Let's write its contents in the file footer.php.

  </div> <footer></footer> <?php wp_footer(); ?> </body> </html>

Here we close the open blocks and call wp_footer () to add the WordPress footer scripts.

Page template


The next step, we need to make the template a regular WordPress page.
Create a page.php file in the theme folder and add the following code to it:

 <?php get_header(); ?> <div class="main-heading"> <h1><?php the_title(); ?></h1> </div> <section> <?php if (have_posts()): while (have_posts()): the_post(); ?> <?php the_content(); ?> <?php endwhile; endif; ?> </section> <?php get_footer(); ?>

Here we connected our header and footer files, created a block of the name of the page and inserted in the section tag a standard block for displaying the content of pages and posts.

Now you need to stylize the resulting page. Save backgrounds into files images / bg.png and images /h1-bg.png. Next, add some basic styles to the style.css file:

Show code
 body { color: #8f8f8f; font: 12px Tahoma, sans-serif; background: #f8f8f8 url(images/bg.png); border-top: 5px solid #7e7e7e; margin: 0; } img { border: 0; } p { margin: 20px 0; } .alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .input { background-color: #f3f3f3; border: 1px solid #e7e7e7; height: 30px; color: #b2b2b2; padding: 0 10px; vertical-align: top; } .button { color: #fff; background-color: #29c5e6; border: none; height: 32px; font-family: 'Oswald', sans-serif; } .image { border: 1px solid #fff; outline: 1px solid #c9c9c9; } figure img { display: block; } .wrapper { max-width: 960px; margin: auto; } header { padding: 20px 0; } .main-heading { background: transparent url(images/h1-bg.png); margin: 30px 0; padding-left: 20px; } .main-heading h1 { display: inline-block; color: #7e7e7e; font: 40px/40px 'Oswald', sans-serif; background: url(images/bg.png); margin: 0; padding: 0 10px; text-transform: uppercase; } aside { float: left; width: 250px; } aside + section { margin-left: 280px; padding-bottom: 50px; } footer { clear: both; background: #7e7e7e; color: #dbdbdb; font-size: 11px; }


As a result, this picture should turn out:



Logo




After we are finished with the frame of the main page, proceed to its filling. Let's start with the logo. Save the logo image in images / logo.png. In the header template, in the header.php file, insert the markup for the logo:

 <div class="wrapper"> <header> <a href="/"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="Whitesquare logo"></a> </header>


Search form




WordPress allows you to quite flexibly save blocks of code into separate files, and then use them in several different places. Consider an example on our search form.
In the theme folder, create a new searchform.php file and save the code of the search form into it:

 <form name="search" action="<?php echo home_url( '/' ) ?>" method="get" class="search-form"> <input type="text" value="<?php echo get_search_query() ?>" name="s" placeholder="<?php echo __('Search', 'whitesquare'); ?>" class="input"> <button type="submit" class="button"><?php echo __('GO', 'whitesquare'); ?></button> </form>

And in the stylesheet file, write the styles for the form:

Show code
 .search-form { float: right; }


All that remains to be done is to connect searchform.php inside header.php.

 <header> … <?php get_search_form(); ?> </header>


Navigation




You can add navigation to the page in different ways, for example, via the wp_list_pages function, but adding via the admin panel will be a more modern way. By default, the menu adding functionality is not activated, in order to do this, add the following code to the functions.php theme file:

 if (function_exists('add_theme_support')) { add_theme_support('menus'); }

After that, the Menus sub-item will appear in the Administration panel in the Appearance menu, in which you need to click on the Create new menu link, enter the menu name “top-menu”, select the pages from the left column and add them to the menu with the Add to menu button.

Now that the menu is created, you need to show it on the pages of the site. To do this, add the following code to the end of header.php:

 <nav class="main-navigation"> <? wp_nav_menu(array('menu' => 'top-menu', 'menu_class' => 'top-menu')); ?> </nav>

The wp_nav_menu function will display a menu called "top-menu" and css class "top-menu".

After that, the menu will appear on the pages but without styles. We style it:

Show code
 .main-navigation { background: #f3f3f3; border: 1px solid #e7e7e7; } .top-menu { margin: 0; padding: 0; } .top-menu li { display: inline-block; padding: 10px 30px; margin: 0; text-transform: uppercase; list-style-position: inside; font: 14px 'Oswald', sans-serif; } .top-menu li.current_page_item { background: #29c5e6; } .top-menu a { color: #b2b2b2; text-decoration: none; } .top-menu li.current_page_item a { color: #fff; }


Footer




Now we proceed to the most difficult part of our template. Let's cut the images and save them in the images folder

images / footer-logo.png - footer logo
images / social.png - sprites of big icons
images / social-small.png - sprites of small icons

Next we do the layout in the file footer.php:

 <footer> <div class="footer-content"> <div class="twitter"> <h3 class="footer-heading"><?php echo __('Twitter feed', 'whitesquare'); ?></h3> <time datetime="2012-10-23"><a href="#" class="twitter-time">23 oct</a></time> <p><?php echo __('In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug', 'whitesquare'); ?></p> </div> <div class="sitemap"> <h3 class="footer-heading"><?php echo __('Sitemap', 'whitesquare'); ?></h3> <div class="column first"> <a href="/home/"><?php echo __('Home', 'whitesquare'); ?></a> <a href="/about/"><?php echo __('About', 'whitesquare'); ?></a> <a href="/services/"><?php echo __('Services', 'whitesquare'); ?></a> </div> <div class="column"> <a href="/partners/"><?php echo __('Partners', 'whitesquare'); ?></a> <a href="/customers/"><?php echo __('Support', 'whitesquare'); ?></a> <a href="/contact/"><?php echo __('Contact', 'whitesquare'); ?></a> </div> </div> <div class="social"> <h3 class="footer-heading"><?php echo __('Social networks', 'whitesquare'); ?></h3> <a href="http://twitter.com/" class="social-icon twitter-icon"></a> <a href="http://facebook.com/" class="social-icon facebook-icon"></a> <a href="http://plus.google.com/" class="social-icon google-plus-icon"></a> <a href="http://vimeo.com/" class="social-icon-small vimeo-icon"></a> <a href="http://youtube.com/" class="social-icon-small youtube-icon"></a> <a href="http://flickr.com/" class="social-icon-small flickr-icon"></a> <a href="http://instagram.com/" class="social-icon-small instagram-icon"></a> <a href="/rss/" class="social-icon-small rss-icon"></a> </div> <div class="footer-logo"> <a href="/"><img src="<?php bloginfo('template_url'); ?>/images/footer-logo.png" alt="Whitesquare logo"></a> <p><?php echo __('Copyright © 2012 Whitesquare. A <a href="http://pcklab.com">pcklab</a> creation', 'whitesquare'); ?></p> </div> </div> </footer>

And prescribe styles in style.css:

Show code
 .footer-content { max-width: 960px; margin: auto; padding: 10px 0; height: 90px; } .footer-heading { font: 14px 'Oswald', sans-serif; color: #fff; border-bottom: 1px solid #919191; margin: 0 0 10px 0; text-transform: uppercase; } footer a { color: #dbdbdb; } footer p { margin: 5px 0; } .twitter-time { color: #b4aeae; } .twitter { float: left; width: 300px; } .twitter p { padding-right: 15px; } .sitemap { width: 150px; float: left; margin-left: 20px; padding-right: 15px; } .sitemap .column { display: inline-block; margin-left: 40px; } .sitemap .column.first { margin-left: 0; } .sitemap a { display: block; text-decoration: none; font-size: 12px; margin-bottom: 5px; } .sitemap a:hover { text-decoration: underline; } .social { float: left; margin-left: 20px; width: 130px; } .social-icon { width: 30px; height: 30px; background: url(images/social.png) no-repeat; display: inline-block; margin-right: 10px; } .social-icon-small { width: 16px; height: 16px; background: url(images/social-small.png) no-repeat; display: inline-block; margin: 5px 6px 0 0; } .twitter-icon { background-position: 0 0; } .facebook-icon { background-position: -30px 0; } .google-plus-icon { background-position: -60px 0; } .vimeo-icon { background-position: 0 0; } .youtube-icon { background-position: -16px 0; } .flickr-icon { background-position: -32px 0; } .instagram-icon { background-position: -48px 0; } .rss-icon { background-position: -64px 0; } .footer-logo { float: right; margin-top: 20px; font-size: 10px; text-align: right; }


As a result, the main page of the site should look like this:



Home page


If you look at the psd layouts, you will see that the layout of the main page is different from the internal ones. In particular, there is no sidebar and page title on the main page.

WordPress allows you to set different templates for different pages. Such a template should be stored in the page- {page name} .php file. If the template is not found, then the default template page.php will be connected.

For the main page, create a new front-page.php file in the theme folder. Add the following code to it:

 <?php get_header(); ?> <section> <?php if (have_posts()): while (have_posts()): the_post(); ?> <?php the_content(); ?> <?php endwhile; endif; ?> </section> <?php get_footer(); ?>

It differs from the page.php code only in that it does not have a page header.

What we are going to do next is already beyond the scope of creating a WordPress theme, however we will try to recreate the full picture from the psd layout and fill it with the main page. The content of the page is filled from the admin panel so that the site owner can enter this panel and change something on the page without changing the code of the theme itself.

Before adding the content of the main page - you need to cut all the images of this page and add them to the WordPress library through the menu Media -> Library. Let's call these images like this:

home-1.png
home-2.png
home-3.png
home-4.png
home-5.png
clients-1.png
clients-2.png
clients-3.png
clients-4.png
clients-5.png
clients-6.png
clients-7.png

Next, go to the admin panel to edit the main page Pages -> Home -> Edit Page form and in the text field enter the page content:

Show code
 <div class="slider"> <div class="content"> <div class="title">Fusce vitae nibn quis diam fermentum</div> <div class="subtitle">Etiam adipscing ultricies commodo.</div> </div> <ol class="links"> <li class="active">Lorem ipsum dolop</li> <li>Ultricies pellentesque</li> <li>Aliquam ipsum</li> <li>Nullam sed mauris ut</li> </ol> </div> <article class="teaser" style="width: 50%;"> <div class="heading"> <i class="bullet"></i> <h3 class="heading-text">About whitesquare</h3> </div> <figure class="image"> <img src="/wp-content/uploads/2014/05/home-1.png" alt="" width="135" height="135" /> </figure> In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices. <p class="more"><a href="/about-us/">Read more</a></p> </article> <article class="teaser" style="width: 50%;"> <div class="heading"> <i class="bullet"></i> <h3 class="heading-text">A word from our ceo</h3> </div> <figure class="image"> <img src="/wp-content/uploads/2014/05/home-2.png" alt="" width="135" height="135" /> </figure> <i>In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.</i> <p class="more">Yane Naumoski, CEO</p> </article> <article class="teaser" style="width: 33%;"> <div class="heading"> <i class="bullet"></i> <h3 class="heading-text">Services</h3> </div> In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices. <p class="more"><a href="/services/">Read more</a></p> </article> <article class="teaser" style="width: 33%;"> <div class="heading"> <i class="bullet"></i> <h3 class="heading-text">Our teams</h3> </div> <div class="small-block"> <figure class="image"> <img src="/wp-content/uploads/2014/05/home-3.png" alt="" width="35" height="35" /> </figure> <h4 class="teaser-small-heading">Lorem ipsum</h4> <p class="teaser-small-paragraph">In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et</p> </div> <div class="small-block"> <figure class="image"> <img src="/wp-content/uploads/2014/05/home-4.png" alt="" width="35" height="35" /> </figure> <h4 class="teaser-small-heading">Lorem ipsum</h4> <p class="teaser-small-paragraph">In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et</p> </div> <div class="small-block"> <figure class="image"> <img src="/wp-content/uploads/2014/05/home-5.png" alt="" width="35" height="35" /> </figure> <h4 class="teaser-small-heading">Lorem ipsum</h4> <p class="teaser-small-paragraph">In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et</p> </div> </article> <article class="teaser" style="width: 33%;"> <div class="heading"> <i class="bullet"></i> <h3 class="heading-text">24/7/365 Support</h3> </div> <p class="teaser-small-paragraph"> In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices. </p> <p class="teaser-small-paragraph more"><a href="/contact/">Read more</a></p> </article> <article class="teaser clients" style="width: 100%;"> <div class="heading"> <i class="bullet"></i> <h3 class="heading-text">Our clients</h3> </div> <img src="/wp-content/uploads/2014/05/clients-1.png" alt="" width="61" height="83" /> <img src="/wp-content/uploads/2014/05/clients-2.png" alt="" width="74" height="83" /> <img src="/wp-content/uploads/2014/05/clients-3.png" alt="" width="163" height="83" /> <img src="/wp-content/uploads/2014/05/clients-4.png" alt="" width="72" height="83" /> <img src="/wp-content/uploads/2014/05/clients-5.png" alt="" width="104" height="83" /> <img src="/wp-content/uploads/2014/05/clients-6.png" alt="" width="78" height="83" /> <img src="/wp-content/uploads/2014/05/clients-7.png" alt="" width="87" height="83" /> </article>


Do not forget to correct the way to the pictures. They depend on the date of addition.

Now it remains to stylize this code.

Show code
 .slider { margin-top: 30px; font-family: 'Oswald', sans-serif; font-weight: 300; text-transform: uppercase; } .slider .content { height: 220px; padding: 30px 40px; background: #e2e2e2; } .slider .title { color: #5a5a5a; font-size: 42px; } .slider .subtitle { color: #acacac; font-size: 20px; } .slider .links { display: block; margin: 0; padding: 10px; background: #f3f3f3; border-bottom: 1px solid #e7e7e7; counter-reset: list 0; color: #8f8f8f; } .slider .links li { display: inline-block; font-size: 18px; line-height: 23px; margin-right: 55px; cursor: pointer; } .slider .links li.active { color: #29c5e6; } .slider .links li:before { display: inline-block; counter-increment: list; content: counter(list) " "; background: #8f8f8f; color: #fff; width: 23px; text-align: center; margin-right: 10px; font-size: 16px; cursor: pointer; } .slider .links li.active:before { background: #29c5e6; } .teaser { display: inline-block; padding: 0 10px; box-sizing: border-box; -moz-box-sizing: border-box; vertical-align: top; } .teaser .heading { background: transparent url(images/h1-bg.png); margin: 40px 0 20px; height: 16px; } .teaser .bullet { display: inline-block; width: 16px; height: 16px; background: #29c5e6; vertical-align: top; } .teaser .heading-text { display: inline-block; text-transform: uppercase; font: normal 14px/16px 'Oswald', sans-serif; margin: 0; padding: 0 10px; background: url(images/bg.png); } .teaser .image { float: left; margin-right: 20px; } .teaser .small-block { margin-bottom: 10px; } .teaser .small-block .image { margin-right: 10px; } .teaser .more, .teaser .more a { color: #525252; margin-bottom: 0; } .teaser-small-heading { display: block; color: #525252; margin: 0; font-weight: normal; font-size: 11px; text-transform: uppercase; } .teaser-small-paragraph { margin: 4px 0; font-size: 11px; } .clients img { display: inline-block; margin-right: 30px; }


If you look at the page now, you will see that the block headers have moved apart. This is due to the fact that the WordPress editor has added empty paragraphs to our code in line breaks. To solve this problem, create a functions.php file in the theme folder and put the code in it:

 <?php remove_filter('the_content', 'wpautop');

After that, the main page should display correctly.

Sidebar


Now that the main page is ready, let's go back to the internal page template and add a sidebar to it.



To do this, create a sidebar.php file and place the following code in it:

 <aside> <nav class="aside-navigation"> <? wp_nav_menu(array('menu' => 'aside-menu', 'menu_class' => 'aside-menu')); ?> </nav> <h2 class="sidebar-heading"><?php echo __('Our offices', 'whitesquare'); ?></h2> <div class="map"> <img src="<?php bloginfo('template_url'); ?>/images/sample.png" width="230" height="180" alt="<?php echo __('Our offices', 'whitesquare'); ?>"> </div> </aside>

Here the layout consists of two parts: the display of the navigation submenu and the block map of offices. For completeness, as a submenu, we offer a list of all posts on the site. The submenu is created in the same way as we created the menu. When creating a submenu in the Appearance section of the admin panel, create a new menu called aside-menu. To add posts to it, click at the top in the Screen options and check Show on screen: Posts. The block card does not cause any special questions.

After the sidebar block is ready, you need to connect it for all sub-pages in the page.php file:

 <div class="main-heading"> … </div> <?php get_sidebar(); ?> <section> …

Next, we need to add styles for the layout:

Show code
 .aside-navigation { background: #f3f3f3; border: 1px solid #e7e7e7; } .aside-menu { margin: 0; padding: 0; text-transform: uppercase; } .aside-menu li { font-weight: 300; list-style: square inside; border-top: 1px solid #e7e7e7; font: 14px 'Oswald', sans-serif; padding: 10px; font-weight: 300; } .aside-menu li:first-child { border: none; } .aside-menu li.current-menu-item, .aside-menu li.current-menu-item a { color: #29c5e6; } .aside-menu a { color: #8f8f8f; text-decoration: none; } .sidebar-heading { background: #29c5e6; font: 14px 'Oswald', sans-serif; color: #fff; padding: 10px; margin: 30px 0 0 0; text-transform: uppercase; } .map { background: #f3f3f3; border: 1px solid #e7e7e7; padding: 10px; margin: 0 0 30px 0; }


And finally, add a few posts to our blog. This is done in the admin panel on the tabs -> Add New. We added the exact same names as in the psd layout.



About us page




Now that we have a template for internal pages, let's fill in the contents of the About us page. In the same way as we filled the main page - prepare images and add them to the media library. Name the images like this:

about-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg

Next, go to the edit page in the admin panel and add the code:

Show code
 <blockquote class="main-blockquote"> <p> “QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.” </p> <cite>John Doe, Lorem Ipsum</cite> </blockquote> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non neque ac sem accumsan rhoncus ut ut turpis. In hac habitasse platea dictumst. Proin eget nisi erat, et feugiat arcu. Duis semper porttitor lectus, ac pharetra erat imperdiet nec. Morbi interdum felis nulla. Aenean eros orci, pellentesque sed egestas vitae, auctor aliquam nisi. Nulla nec libero eget sem rutrum iaculis. Quisque in enim velit, at dignissim est. Nulla ullamcorper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat condimentum metus. Donec sodales aliquam orci id suscipit. Proin sed risus sit amet massa ultrices laoreet quis a erat. Aliquam et metus id erat vulputate egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p> Donec vel nisl nibh. Aenean quam tortor, tempus sit amet mattis dapibus, egestas tempor dui. Duis vestibulum imperdiet risus pretium pretium. Nunc vitae porta ligula. Vestibulum sit amet nulla quam. Aenean lacinia, ante vitae sodales sagittis, leo felis bibendum neque, mattis sagittis neque urna vel magna. Sed at sem vitae lorem blandit feugiat. </p> <p> Donec vel orci purus, ut ornare orci. Aenean rutrum pellentesque quam. Quisque gravida adipiscing augue, eget commodo augue egestas varius. Integer volutpat, tellus porta tincidunt sodales, lacus est tempus odio, fringilla blandit tortor lectus ut sem. Pellentesque nec sem lacus, sit amet consequat neque. Etiam varius urna quis arcu cursus in consectetur dui tincidunt. Quisque arcu orci, lacinia eget pretium vel, iaculis pellentesque nibh. Etiam cursus lacus eget neque viverra vestibulum. Aliquam erat volutpat. Duis pulvinar tellus ut urna facilisis mollis. Maecenas ac pharetra dui. Pellentesque neque ante, luctus eget congue eget, rhoncus vel mauris. Duis nisi magna, aliquet a convallis non, venenatis at nisl. Nunc at quam eu magna malesuada dignissim. Duis bibendum iaculis felis, eu venenatis risus sodales non. In ligula mi, faucibus eu tristique sed, vulputate rutrum dolor. </p> <img class="image" src="/wp-content/uploads/2014/05/about-1.png" alt="about-1" width="320" height="175" /> <img class="image alignright" src="/wp-content/uploads/2014/05/about-2.png" alt="about-2" width="320" height="175" /> <h2 class="content-heading">Our team</h2> <div class="team-row"> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Doe.jpg" alt="" width="96" height="96" /> <figcaption> John Doe<span class="occupation">ceo</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Pittsley.jpg" alt="" width="96" height="96" /> <figcaption> Saundra Pittsley<span class="occupation">team leader</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Pittsley.jpg" alt="" width="96" height="96" /> <figcaption> Julio Simser<span class="occupation">senior developer</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Simser.jpg" alt="" width="96" height="96" /> <figcaption> Margery Venuti<span class="occupation">senior developer</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Venuti.jpg" alt="" width="96" height="96" /> <figcaption> Fernando Tondrea<span class="occupation">developer</span> </figcaption> </figure> </div> <div class="team-row"> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Tondrea.jpg" alt="" width="96" height="96" /> <figcaption> Ericka Nobriga<span class="occupation">art director</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Nobriga.jpg" alt="" width="96" height="96" /> <figcaption> Cody Rousselle<span class="occupation">senior ui designer</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Rousselle.jpg" alt="" width="96" height="96" /> <figcaption> Erik Wollman<span class="occupation">senior ui designer</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Wollman.jpg" alt="" width="96" height="96" /> <figcaption> Dona Shoff<span class="occupation">ux designer</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Shoff.jpg" alt="" width="96" height="96" /> <figcaption> Darryl Brunton<span class="occupation">ui designer</span> </figcaption> </figure> </div>


And styles in style.css:

Show code
 .main-blockquote { margin: 0; background: #29c5e6; padding: 10px 20px; font-family: 'Oswald', sans-serif; font-weight: 300; } .main-blockquote p { color: #fff; font-style: italic; font-size: 33px; margin: 0; } .main-blockquote cite { display: block; font-size: 20px; font-style: normal; color: #1d8ea6; margin: 0; text-align: right; } .content-heading { background: #29c5e6; font: 30px 'Oswald', sans-serif; font-weight: 300; color: #fff; padding: 0 10px; margin: 30px 0 0 0; text-transform: uppercase; } .team-row figure { display: inline-block; margin: 20px 0 0; font-family: 'Oswald', sans-serif; font-weight: 300; } .team-row figure + figure { margin-left: 43px; } .team-row figcaption { font-size: 16px; font-weight: 300; margin-top: 5px; } .team-row .occupation { display: block; font-size: 14px; color: #29c5e6; }


Post template


After the previous actions, on our site all pages are already available, except pages with posts. For displaying single posts is responsible template single.php. Create it with the following content:

 <?php get_header();?> <div class="main-heading"> <h1><?php the_title(); ?></h1> </div> <?php get_sidebar();?> <section> <?php while (have_posts()): the_post();?> <?php the_content();?> <?php if ( comments_open() || get_comments_number() ) { comments_template(); } ?> <?php endwhile; ?> </section> <?php get_footer(); ?>

This template is similar to the previous templates with the only difference that here we first display the content of the post, and then comments to it.

Search page




At the very beginning, when we created a template for the header, we added a search to it, but we don’t have a page to display the search results. Create a search.php file in the theme folder and add the contents to it:

 <?php get_header(); ?> <div class="main-heading"> <h1>Search</h1> </div> <?php get_sidebar(); ?> <section> <h2 class="content-heading"><?php printf( __('Search Results for: %s', 'default'), get_search_query() ); ?></h2> <?php if (have_posts()): while (have_posts()): the_post(); ?> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <p><?php the_excerpt(); ?></p> <?php endwhile; else:?> <p><?php echo __('Sorry, no results found', 'whitesquare'); ?></p> <?php endif; ?> </section> <?php get_footer(); ?>

It differs from other templates in that we display a heading with the search text, and then a list of search results.

Archive page


In WordPress, in addition to single posts, there are pages that display lists of posts. These can be categories, sorting by date, author or by keywords.In our model, there is no such functionality, but it is necessary to add it, since we create a template that can be used with different content. For each of these lists, there are different templates, but if they are not found, WordPress tries to find a common file archive.php. We will take advantage of it and create it. Since its contents will not be anything different from the contents of a regular page - just copy page.php to archive.php.

404


The last template left to add is the template for 404 pages when WordPress could not find the requested page. It will be exactly the same as page.php. Instead of displaying posts, an error message will be written:

 <?php get_header(); ?> <div class="main-heading"> <h1><?php the_title(); ?></h1> </div> <?php get_sidebar(); ?> <section> <p><?php echo __('It looks like nothing was found at this location.', 'whitesquare'); ?></p> </section> <?php get_footer(); ?>

Conclusion


This completes the creation of the WordPress template. The finished project can be downloaded here .

Links to previous articles:
How to create a web page. Part 1
How to create a web page. Part 2 - Bootstrap
Layout for the little ones. We are creating a BEM page ( xnim ). Creating
a 1C-Bitrix template based on Bootstrap layout ( lexnekr )

Update: The
article has been significantly updated in accordance with the comments of commentators.

Source: https://habr.com/ru/post/228523/

More articles:


All Articles