So now that you have your layout created with Responsive Layout Maker, you would like to get it to work with WordPress? No problem at all! Not only does Responsive Layout Maker allow create responsive layouts, with just a little bit of tweaking, you can convert your layout to work with WordPress. On yeah!
In this tutorial, we will be walking you through all the steps to convert your responsive layout for use within WordPress. As there are many, many different things that WordPress can accomplish, we will only be covering the basic building blocks required to get your layout converted to the correct format for WordPress. When you are complete, you will have your main website, posts and pages all functioning within your new layout using WordPress PHP template language.
If you're feeling adventurous, you can use these instructions and adapt your own layout for use as a WordPress. We do suggest you follow through the process with this article first so that you have a good understanding on what needs to be done.
The project: Double-click to open in Responsive Layout Maker.
Download the ‘No-Sweat’ TemplateStep 1
With an FTP client, connect to your server and navigate to the folder where WordPress is installed and go into the wp-content folder > themes folder. This is where we will create our theme and upload the layout files to. Create a new folder named Responsive-Website.
Step 2
In Responsive Layout Maker, export your layout and upload the folders css, fonts, img and js into the Responsive-Website folder created in Step 1.
Step 3
Now you need to create the basic WordPress template file structure. For this, you need to create 8 empty files. Through this tutorial we will be pasting markup into each one of these. Create the files with these names:
- index.php
- header.php
- footer.php
- page.php
- functions.php
- single.php
- style.css
- css/custom.css
Step 4
Edit the style.css file created in Step 3. This file contains the basic information about this theme. Feel free to customize it to fit your needs.
/*
Theme Name: Responsive-Website
Theme URI: #
Description: My Responsive Website Created with RLM
Version: 1.0
Author: CoffeeCup Software
Author URI: http://coffeecup.com
*/
Step 5
Open the exported index.html file created in Step 2 in your editor and copy the markup from the <DOCTYPE> to </header> and paste it into the header.php created in Step 3.
Now you need adjust the markup to use a few different WordPress calls.
There are a few things going on with this step. What you are doing here is adding specific WordPress calls to get your content dynamically out of WordPress and into your page.- For all files that are referenced (css, images, JavaScripts), you need to prefix
<?php bloginfo("template_directory"); ?>in front of each link. - At the very top of the page, you are including calls to bring in the CharSet and BlogTitle inside of the
<head> - Replacing the navigation links created in RLM with the WordPress menu. This way your navigation is dynamic and not fixed.
- Linked in a custom.css file which will be used later on in this tutorial.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title>
<?php bloginfo('name'); ?>
<?php if ( is_single() ) { ?>
» Blog Archive
<?php } ?>
<?php wp_title(); ?>
</title>
<link rel="stylesheet" href="<?php bloginfo("template_directory"); ?>/css/coffeegrinder.min.css">
<link rel="stylesheet" href="<?php bloginfo("template_directory"); ?>/css/wireframe-theme.min.css">
<link rel="stylesheet" href="<?php bloginfo("template_directory"); ?>/css/main.css">
<link rel="stylesheet" href="<?php bloginfo("template_directory"); ?>/css/custom.css">
</head>
<body>
<header class="row main-header">
<div class="coffee-span-3 column-1 coffee-678-span-12"><img class="image-4-3 image-1" src="<?php bloginfo("template_directory"); ?>/img/logo-2x1.svg" alt="Image">
</div>
<nav class="container">
<?php wp_nav_menu(array('theme_location' => 'primary-menu', 'menu_class' => 'nav-menu')); ?>
</nav>
</header>Step 6
With the index.html page still open, you are going to copy the markup just after the </header>
all the way to <div class="row"> and paste that into the index.php page created in Step 3. This will now be the body of your website.
Now you need adjust the markup to use a few different WordPress calls.
As with the previous step, we need to add WordPress calls to get your content dynamically out of WordPress. Again, for all referenced files (css, images, JavaScripts) you need to prefix <?php bloginfo("template_directory"); ?> in front of each link.
<?php get_header(); ?>
<div class="row">
<div class="coffee-span-12"> <img class="image-4-3 main-image" src="<?php bloginfo("template_directory"); ?>/img/cool-image---max.-600px-4x3.svg" alt="Image">
<h5 class="image-callout">Please Drink Responsively!</h5>
</div>
</div>
<div class="row reasoning-row">
<div class="coffee-span-4 coffee-545-span-12"> <img class="image-1-1 image-1" src="<?php bloginfo("template_directory"); ?>/img/image-1x1.svg" alt="Image">
<h4 class="heading-1">REASON 11</h4>
<p class="paragraph reason-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
</div>
<div class="coffee-span-4 coffee-545-span-12"> <img class="image-1-1 image-1" src="<?php bloginfo("template_directory"); ?>/img/image-1x1-1.svg" alt="Image">
<h4 class="heading-1">REASON 14</h4>
<p class="paragraph reason-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
</div>
<div class="coffee-span-4 coffee-545-span-12"> <img class="image-1-1 image-1" src="<?php bloginfo("template_directory"); ?>/img/image-1x1-2.svg" alt="Image">
<h4 class="heading-1">REASON 17</h4>
<p class="paragraph reason-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
</div>
</div>
<div class="row action-row">
<div class="coffee-span-12">
<button type="button" class="action-button">Take Action</button>
</div>
</div>
<?php get_footer();?>Step 7
Now open the functions.php file created in Step 3. Here we are going to register a few widgets that will allow you to use them inside of your footer replacing the default elements added in RLM.
Holy Mackerel, what is all this?
Here we are registering your menu and creating 3 widgets which can be configured through the WordPress Dashboard. These Widgets will allow you to replace the contents of a column in RLM with specific WordPress Widgets (Posts, Pages, Tags, RSS etc.) We will only need these 3 but you can create additional ones if needed by duplicating one of functions and adjusting the markup accordingly.
While this may look a bit overwhelming a first, once you understand the basic structure of a Widget, it will make a bit more sense. Here is an overview of what the settings in the Widget accomplishes:
- name: This is the name you want to give your widget. This must be unique.
- id: This is the ID you want to give your widget. This must be unique.
- before_widget: This markup will be appended into the widget code at the beginning.
- after_widget: This markup will be appended into the widget code at the beginning.
- after_title: This is the markup to place after the widget code is inserted into your page.
<?php
add_action( 'widgets_init', 'child_register_sidebar1' );
function child_register_sidebar1(){
register_sidebar(array(
'name' => 'Default Sidebar',
'id' => 'sidebar-1',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
));
}
add_action( 'widgets_init', 'child_register_sidebar' );
function child_register_sidebar(){
register_sidebar(array(
'name' => 'Footer Widget 1',
'id' => 'sidebar-2',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
));
}
add_action( 'widgets_init', 'child_register_sidebar2' );
function child_register_sidebar2(){
register_sidebar(array(
'name' => 'Footer Widget 2',
'id' => 'sidebar-3',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
));
}
add_action( 'widgets_init', 'child_register_sidebar3' );
function child_register_sidebar3(){
register_sidebar(array(
'name' => 'Footer Widget 3',
'id' => 'sidebar-4',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
));
}
add_theme_support( 'nav-menus' );
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
register_nav_menus(
array(
'primary-menu' => __( 'Primary Menu' ),
'secondary-menu' => __( 'Secondary Menu' )
)
);
}Step 8
For this step, you are going to be editing two different template files, but pasting in the same markup. These template pages will be used for your Posts and Pages located in WordPress. While the markup is identical, you get different results based on the template file getting called.
Same code, different results
In this step, you are setting up WordPress template pages that will bring in all the content for any pages or posts that you have created within WordPress. It will then be wrapped with the header.php and footer.php template pages. This is referred to as The Loop.page.php:
This template file is for your Pages. Edit the page.php file created in Step 3 and paste in the markup below.
single.php:
This template file is for your Posts. Edit the page.php file created in Step 3 and paste in the markup below.
<?php get_header(); ?>
<div class="row">
<!-- WordPress Loop -->
<div class="blogpostwrapper">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="blogpost">
<h3 class="entrytitle" id="post-<?php the_ID(); ?>"> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?> </a> </h3>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
</div>
<!-- End WordPress Loop -->
</div>
<?php get_footer(); ?>
Step 9
With the index.html page still open, now edit the footer.php file created in Step 3 and copy the markup starting with the <div class="row footer-row"> all the way to the </html> and paste it into the template file. This will now be your footer.
Now you need adjust the markup to use a few different WordPress calls.
Again, we have a few things going on with this step. Each of the 3 columns have now been wrapped with a Widget that was created in Step 7 located in the functions.php file. So how does it work? These Widgets are added to the page with PHP. When the corresponding Widget is enabled, the Widget will display instead of the markup. If the Widget is disabled, then the markup created by RLM will be displayed.
To enable the Widgets that you want to use, go to Admin Panel > Appearance > Widgets. You will see Footer Widget 1, Footer Widget 2 and Footer Widget 3. Here you enable which widgets you would like use.
<div class="row footer-row">
<div class="coffee-span-4 column-2 coffee-694-span-6 coffee-377-span-12">
<?php
if ( is_active_sidebar(2) ) {
?>
<?php dynamic_sidebar( 'sidebar-2' ); ?>
<?php
} else {
?>
<ul class="link-list footer-links">
<li> <a href="#">Lorem ipsum dolor </a> </li>
<li> <a href="#">Suspendisse pulvinar mi </a> </li>
<li> <a href="#">Aliquam erat volutpat </a> </li>
<li> <a href="#">Interdum et malesuada </a> </li>
<li> <a href="#">Suspendisse pulvinar mi </a> </li>
<li> <a href="#">Suspendisse pulvinar mi </a> </li>
</ul>
<?php
};
?>
</div>
<div class="coffee-span-4 column-3 coffee-694-span-6 coffee-377-span-12">
<?php
if ( is_active_sidebar(3) ) {
?>
<?php dynamic_sidebar( 'sidebar-3' ); ?>
<?php
} else {
?>
<ul class="link-list footer-links">
<li> <a href="#">Lorem ipsum dolor </a> </li>
<li> <a href="#">Suspendisse pulvinar mi </a> </li>
<li> <a href="#">Aliquam erat volutpat </a> </li>
<li> <a href="#">Interdum et malesuada </a> </li>
<li> <a href="#">Suspendisse pulvinar mi </a> </li>
<li> <a href="#">Suspendisse pulvinar mi </a> </li>
</ul>
<?php
};
?>
</div>
<?php
if ( is_active_sidebar(4) ) {
?>
<?php dynamic_sidebar( 'sidebar-4' ); ?>
<?php
} else {
?>
<div class="coffee-span-4 copyright-column coffee-694-span-12">
<h6 class="heading-2">About This Design </h6>
<p class="paragraph paragraph-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla </p>
<span class="text-element text-1">© 2014 Responsive Layout Maker </span> </div>
</div>
</ul>
<?php
};
?>
</body>
</html>
Step 10
Next you need to edit the custom css created in Step 3 and make sure it is located inside of the css folder. You will use this css file to style the navigation located in your header.
Style Your Menu
By default, a WordPress menu will be vertically based but we need our menu to be horizontally based. To do this, we need to add custom css to style the menu in the way we want it to appear. We also added a little bit of style to make your navigation have a little flair, so feel free to customize these settings any way you like.
.main-navigation{ background-color:#000; width:98%; padding-left:2%}
.navigation:after,
.nav-links:after,
.
.navigation:before,
.navigation:after,
.nav-links:before,
.nav-links:after,
.main-navigation {
clear: both;
position: absolute;
top: 41px;
right: 0;
}
ul.nav-menu,
div.nav-menu > ul {
margin: 0;
text-align:right;
}
.nav-menu li {
display: inline-block;
position: relative;
}
.nav-menu li a {
color: #5087ca;
display: block;
font-size: 20px;
line-height: 1;
margin: 0 19px;
text-decoration: none;
text-align: left;
line-height: 1.7;
}
.nav-menu li:last-child a {
margin-right: 0;
}
.nav-menu li:first-child a {
margin-left: 0;
}
.nav-menu li:hover > a,
.nav-menu li a:hover {
color: #5087ca;
}
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-page-ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
color: #5087ca;
}
.menu-toggle {
display: none;
}
.mobile-nav {
background: #222528;
padding: 10px 0;
border-bottom: 1px solid #42464a;
width: 100%;
display: none;
}
.mobile-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.mobile-nav li a {
display: block;
background: #222528;
color: #aaaaaa;
font-family: "nudista-web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 18px;
padding: 10px 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.mobile-nav li a:hover {
background: #181a1c;
color: #ffffff;
}
.navbar {
background-color: #f7f5e7;
margin: 0 auto;
max-width: 1600px;
width: 100%;
}
#content nav {
clear: both;
overflow: hidden;
padding: 0 0 1.625em;
}
#nav-above {
padding: 0 0 1.625em;
}
#nav-above {
display: none;
}
.paged #nav-above {
display: block;
}
.nav-previous {
float: left;
width: 50%;
}
.nav-next {
float: right;
text-align: right;
width: 50%;
}
#content nav .meta-nav {
font-weight: normal;
}
#nav-single {
float: right;
position: relative;
top: -0.3em;
text-align: right;
z-index: 1;
}
#nav-single .nav-previous,
#nav-single .nav-next {
width: auto;
}
#nav-single .nav-next {
padding-left: .5em;
}
#nav-single .nav-previous {
padding-right: .5em;
}
.search-results .page-title,
.search-no-results .page-title {
padding-bottom: 52px;
border-bottom: 1px solid #dddddd;
font-weight: 400;
}
@media (max-width: 1200px) {
.nav-menu li a {
font-size: 20px;
margin: 0 15px;
}
}
Step 11
This is an optional step. When you go to activate your theme inside of the Admin Panel, your theme will not have a preview of the design. To include a preview, upload a file called screenshot.png with the file size of 880x660px into the root folder of your theme.
Step 12
Now it is time to activate your theme within WordPress and apply it to your website. Within the WordPress Dashboard, go to Appearance > Themes and you will see the newly created theme Responsive-Website. Select the theme and click Activate.
Congratulations! You just converted your layout for use with WordPress!
All that is left to do is to replace the default Layout Maker graphics by uploading your own images into the img folder and adjust the markup accordingly. You would need to do this in the header.php, index.php and footer.php template files by prefixing <?php bloginfo("template_directory"); ?> in front of all file references.
