Converting a simple html/css page to wordpress

Question

I just created a basic html page layout and im currently trying to get it work on wordpress, created the header.php, index.php, footer.php, called them with php, well i followed this guide: https://thethemefoundry.com/blog/html-wordpress/

Did all thats on there, after i uploaded the theme and actived it i get this:

Wordpress site after applied the theme

No divs, no images, just the text

I will include my code bellow of the original html/ css and the php files:

/*
Theme Name: SSK theme
Theme URI: 
Description: Tema para o site da ssk
Version: 1.0
Author: DA
Author URI: www
*/

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font-family: Helvetica, Arial, Sans-Serif;
    line-height: 24px;
	background: #eee url(images/body-bg.jpg) center top no-repeat;
	width:100%;
	height: 100%;
}

#container {
	width: 80%;
    margin: 0 auto;
    height:1100px;
    margin-top: -75px;
}

#container p {
    margin-bottom: -50px;
    color: #0066FF;
    font-size: 25px;
}

#languages {
	background-color: red;
	height:22px;
	width: 200px;
	position: absolute;
  	top:60px; right: 125px;
}

#destaques {
	margin-top: 75px;
	width:100%;
	background-color: grey;
}

#main_page_holder {
    border-top: 2px solid blue;
    position: relative;
    margin-top: 110px;
    width: 100%;
    height: 30%;
}

#home_navigation_link {
	margin-left: 1.7%;
	margin-right: 1%;
	margin-top: 2%;
    width: 30%;
    height: 35%;
    display: inline-block;
    background-color: #f2f2f2;
  }

#Projetos {
    margin-top: 110px;
    width: 100%;
    height: 20%;
    background-color: orange; 
}

#projsquare {
    border-top: 2px solid blue;
    margin-top: -0px;
    height: 30%;
}

.squa {
    width: 125px;
    float:left;
    height:125px;
    background:magenta;
    margin:10px;
    margin-top: 90px;
}

#logo2 {
    float: right;
    width: 30%;
    height: 100%;
    background-color: red;
}

#logo2 img {
    background-repeat: no-repeat;
    width: 100%;
    height: 30%;
}

.ima {
    background-image: url("img/logo.png");
    background-repeat: no-repeat;
	width:35%;
	height:100%;
	background-color: blue;
    float: left;
    -moz-border-radius: 60%;
    -webkit-border-radius: 60%;
    border-radius: 60%;
    border-color:white;
}

.ima img {
    width:100%;
    height:100%;
    -moz-border-radius: 60%;
    -webkit-border-radius: 60%;
    border-radius: 60%;
    border-color:white;
}

.tit {
    color: #0066FF;;
	float:left;
	width:65%;
	height:15%;
}

.tito {
    width:65%;
    height:15%;
    background-color: black;
}


#categories {
    list-style: none;
    position: absolute;
    top: 125px;
    right: 125px;
    font-size: 0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1b75b1+0,529282+47,71ac4a+100 */
    background: rgb(27, 117, 177);
    /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFiNzViMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iIzUyOTI4MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3MWFjNGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgb(27, 117, 177)), color-stop(47%, rgb(82, 146, 130)), color-stop(100%, rgb(113, 172, 74)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b75b1', endColorstr='#71ac4a', GradientType=1);
    /* IE6-8 */
}
#categories li {
    display: inline-block;
    vertical-align: top;  
    position: relative;
}
#categories li a {   
    font-size: 15px;
    color: white;
    text-decoration: none;
    padding: 6px 22px;
    display: block;    
}
#categories li:before{
    content: '';
    width: 1px;
    height: 15px;
    background: #fff;
    position: absolute; top: 0; left: 0;
}
#categories li:first-child:before{
    background: none;
}

#header {
    overflow: hidden;
	padding: 0 0 50px 0;
}

#mllcont {
	height:40vh;
    background-image: url("img/header.png");
    background-repeat: no-repeat;
}

#slidecont {
    background-image: url("img/back.jpg");
	height:100vh;
	background-color: red;
    background-size: cover;
    background-repeat: no-repeat;
}

#slidecont img {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

#squares {
   	width:100%;
   	height:250px;
    position: relative;
}

#divs p {
    position: absolute;
    bottom: -100px;
    color: #0066FF;
    font-size: 25px;
}

#divs div { 
    height: 300px; 
    width: 20%; 
    border: 0px solid red; 
    margin-left: 2.5%; 
    margin-right: 2.5%; 
    float: left; /*Here you can also use display: inline-block instead of float:left*/
    background: white;
    opacity: 0.7;
}

.circle{
    border:1px solid red;
    height:20px;
    width:20px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    position: relative;
}

#header h1 {
	float: left;
}


#content, #footer, #header  {
	height: 100%;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Particle</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<!--1 parte-->

	<div id="slidecont">
		<img src="img/banner.png"/>
		<div id="mllcont">

			<div id="logo">
			</div>

			<div id="languages">
			</div>
					<ul id="categories">
					    <li><a href="#">Menu1</a></li>
					    <li><a href="#">Menu2</a></li>
					    <li><a href="#">Menu3</a></li>
					    <li><a href="#">Menu4</a></li>
					</ul>
		</div>
	</div>

<!--1 parte-->

<!--2 parte-->

	<div id="container">
			<div id="squares">
			    <div id="divs">
				      <div> <div class="tito"> </div> </div>
				      <div> <div class="tito"> </div> </div>
				      <div> <div class="tito"> </div> </div>
				      <div> <div class="tito"> </div> </div>
					  <p> Destaques </p>
			    </div>
			</div>	

				<div id="main_page_holder">
					<div id ="destaquetex">
						
					</div>
					<div id="home_navigation_link">
						<div class="ima">  </div>
						<div class="tit"> &nbsp; Nova liderança SKK </div>
					</div>
					<div id="home_navigation_link">
						<div class="ima"> <img src="img/2.jpg"> </div>
						<div class="tit"> &nbsp; Descontaminação </div>
					</div>
					<div id="home_navigation_link">
						<div class="ima"> <img src="img/3.jpg"> </div>
						<div class="tit"> &nbsp; ISOAIR </div>
					</div>
					<div id="home_navigation_link">
						<div class="ima"> <img src="img/4.jpg"> </div>
						<div class="tit"> &nbsp; SmartPower </div>
					</div>
					<div id="home_navigation_link">
						<div class="ima"> <img src="img/4.jpg"> </div>
						<div class="tit"> &nbsp; Móveis de congelação </div>
					</div>
					<div id="home_navigation_link">
						<div class="ima"> <img src="img/6.jpg"> </div>
						<div class="tit"> &nbsp; Universal R </div>
					</div>
				</div>

				<p> Projetos</p>
				<div id="projsquare">
					<div class="squa"> </div>
					<div class="squa"> </div>
					<div class="squa"> </div>
					<div class="squa"> </div>
					<div id="logo2"> <img src="img/logo.png"> </div>
				</div>


	</div>	

<!--2 parte-->

<!--3 parte-->

		<div id="footer">
		


		</div>

<!--3 parte-->


</body>
</html>

The files from the theme:

INDEX.PHP

  <?php get_header(); ?>

<div id="container">
            <div id="squares">
                <div id="divs">
                      <div> <div class="tito"> </div> </div>
                      <div> <div class="tito"> </div> </div>
                      <div> <div class="tito"> </div> </div>
                      <div> <div class="tito"> </div> </div>
                      <p> Destaques </p>
                </div>
            </div>  

                <div id="main_page_holder">

                    <?php if ( have_posts() ) : ?>
                    <?php while ( have_posts() ) : the_post(); ?>
                        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                            <div class="post-header">
                                <div class="date"><?php the_time( 'M j y' ); ?></div>
                                    <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                                <div class="author"><?php the_author(); ?></div>
                                </div><!--end post header-->

        <div class="entry clear">
            <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
            <?php the_content(); ?>
            <?php edit_post_link(); ?>
            <?php wp_link_pages(); ?>
        </div><!--end entry-->

        <div class="post-footer">
        <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
        </div><!--end post footer-->
        </div><!--end post-->

        <?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
        <div class="navigation index">
            <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
            <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
         </div><!--end navigation-->

<?php else : ?>
<?php endif; ?>

                    <div id ="destaquetex">

                    </div>
                    <div id="home_navigation_link">
                        <div class="ima">  </div>
                        <div class="tit"> &nbsp; Nova liderança SKK </div>
                    </div>
                    <div id="home_navigation_link">
                        <div class="ima"> <img src="img/2.jpg"> </div>
                        <div class="tit"> &nbsp; Descontaminação </div>
                    </div>
                    <div id="home_navigation_link">
                        <div class="ima"> <img src="img/3.jpg"> </div>
                        <div class="tit"> &nbsp; ISOAIR </div>
                    </div>
                    <div id="home_navigation_link">
                        <div class="ima"> <img src="img/4.jpg"> </div>
                        <div class="tit"> &nbsp; SmartPower </div>
                    </div>
                    <div id="home_navigation_link">
                        <div class="ima"> <img src="img/4.jpg"> </div>
                        <div class="tit"> &nbsp; Móveis de congelação </div>
                    </div>
                    <div id="home_navigation_link">
                        <div class="ima"> <img src="img/6.jpg"> </div>
                        <div class="tit"> &nbsp; Universal R </div>
                    </div>
                </div>

                <p> Projetos</p>
                <div id="projsquare">
                    <div class="squa"> </div>
                    <div class="squa"> </div>
                    <div class="squa"> </div>
                    <div class="squa"> </div>
                    <div id="logo2"> <img src="img/logo.png"> </div>
                </div>


    </div>

<?php get_footer(); ?>

Header.php

<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>

<div id="slidecont">
    <img src="img/banner.png"/>
    <div id="mllcont">

        <div id="logo">
        </div>

        <div id="languages">
        </div>
                <ul id="categories">
                    <li><a href="#">Menu1</a></li>
                    <li><a href="#">Menu2</a></li>
                    <li><a href="#">Menu3</a></li>
                    <li><a href="#">Menu4</a></li>
                </ul>
    </div>
</div>

footer.php

  <div id="footer">



</div>

Your code generates invalid HTML (missing head, body, ...) and the link to the stylesheet is missing. I suggest you to read more on HTML in general and then on WP themes. — vitus37
– vitus37, Commented Jul 6, 2015 at 10:59
@DuarteAndrade you need to set the file path of your images and stylesheets relative to your theme folder. Check my answer below to read how to do that. — Marian Rick
– Marian Rick, Commented Jul 6, 2015 at 11:33

Marian Rick · Accepted Answer · 2015-07-06 11:31:50Z

Whenever you use links, such as

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Wordpress needs to know the path to your css file. Your normal built is somehow like this:

index.php
/wp-content/
/wp-content/themes/
/wp-content/themes/theme_name/
/wp-content/themes/theme_name/index.php
/wp-content/themes/theme_name/style.css
/wp-content/themes/theme_name/images/
/wp-content/themes/theme_name/images/image.jpg

So the file path needs to be relative to your theme folder. You can use a php snippet, to get the url of your theme:

<?php bloginfo('template_url'); ?>

If you want to include that, you can change your urls. For example

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<img src="images/image.jpg">

turns into:

<link href="<?php bloginfo('template_url'); ?>/style.css" rel="stylesheet" type="text/css" media="screen" />
<img src="<?php bloginfo('template_url'); ?>/images/image.jpg">

Do this to all file paths using src or href inside your index.php, header.php, footer.php, and other php files.

Timo L · Accepted Answer · 2015-07-06 12:22:27Z

0

Easiest way to link eg css/js files to your site is via functions-file.

Create file functions.php to your folder /wp-content/themes/theme_name/ with this content:

function scripts_here() {

    wp_enqueue_style( 'stylename', get_template_directory_uri() . '/path_to_your_css.css' );


}
add_action( 'wp_enqueue_scripts', 'scripts_here' );

If you need to more css files, just use wp_enqueue_style-function..Take a look: https://codex.wordpress.org/Function_Reference/wp_enqueue_style

answered Jul 6, 2015 at 12:22

Timo L

463 bronze badges

Collectives™ on Stack Overflow

Converting a simple html/css page to wordpress

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related