Author Topic: HTML to Custom WordPress Theme  (Read 2177 times)

aprilMartin

  • Guest
HTML to Custom WordPress Theme
« on: July 01, 2015, 11:58:53 am »
I'm trying to turn my HTML document into a WordPress theme. I understand the concept and thought that I have done everything correctly - however, when I go to test it (just the home page so far) the page shows with a broken image link, navigation (with no styling), but the favicon shows up!? It looks as if it isn't reading or picking up my style sheet. Everything appears to be directed to the correct file path. The home page is a hero page with a large image, the logo in the center and then three navigation buttons that direct the user into the site - Gallery, About, Contact.

Any suggestions? It looks as though everything is pulling in correctly but just not showing up. I do have the documents all uploaded into the site for the Theme that I created so I have that down - just not getting the styling to show up.

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: HTML to Custom WordPress Theme
« Reply #1 on: July 01, 2015, 01:12:50 pm »
Hard to say without looking at your page. My guess is that the CSS file is not referenced correctly. Probably the same with the image link. Do you have a link you can share here so I can see what you have?
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

aprilMartin

  • Guest
Re: HTML to Custom WordPress Theme
« Reply #2 on: July 01, 2015, 01:40:54 pm »
I have the files attached as well. Would you like access to the WP section? I can e-mail you the information. I think I still have your e-mail from a previous class.

http://aprlmrtn.com/HTML/TiaDawn/wordpress/

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: HTML to Custom WordPress Theme
« Reply #3 on: July 01, 2015, 01:55:51 pm »
Yeah the link to your CSS file is not correct. Here is your link tag:

<link rel="stylesheet" href="hmstyles.css">

That means your CSS file would need to be located here: http://aprlmrtn.com/HTML/TiaDawn/wordpress/hmstyles.css

If you try to go to that link you'll get a page not found error.

When working with Wordpress themes, your theme is stored in the wp-content/themes/NAMEOFTHEME folder. So your CSS file is actually located here: http://aprlmrtn.com/HTML/TiaDawn/wordpress/wp-content/themes/BLANK-Theme/hmstyles.css

You will want to change the <link> tag in your header.php page to the following:

<link rel="stylesheet" href="wp-content/themes/BLANK-Theme/hmstyles.css">

That should fix it.

The same is true for your images too. All of your images are going to be located here: http://aprlmrtn.com/HTML/TiaDawn/wordpress/wp-content/themes/BLANK-Theme/images/

For example, the white image is here: http://aprlmrtn.com/HTML/TiaDawn/wordpress/wp-content/themes/BLANK-Theme/images/white.png

That means you'll need to adjust any image links to use that location.
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

aprilMartin

  • Guest
Re: HTML to Custom WordPress Theme
« Reply #4 on: July 01, 2015, 02:21:50 pm »
Ah, OK. I figured it was something crazy simple that I was missing. I guess I figured since they were all in the same folder that it would pull from that folder and not have to route it like that - I'll give it a shot and see what it does! Thanks!

aprilMartin

  • Guest
Re: HTML to Custom WordPress Theme
« Reply #5 on: July 01, 2015, 02:44:33 pm »
Ok. That fixed my issue - but the main image isn't showing up. I'm having a problem with Dreamweaver recognizing the that the style sheet is there but WordPress seems to be recognizing it as the CSS styling for the buttons and the logo are working. I'm hoping that once I fix this that it'll work...

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: HTML to Custom WordPress Theme
« Reply #6 on: July 01, 2015, 03:47:28 pm »
Yeah you are going to have to change the reference in your CSS file.

This is what you currently have:

 background-image: url(wp-content/themes/BLANK-Theme/images/lgHero.jpg);

So that ends up translating to the following URL: http://aprlmrtn.com/HTML/TiaDawn/wordpress/wp-content/themes/BLANK-Theme/wp-content/themes/BLANK-Theme/images/lgHero.jpg

You can see that it isn't correct. So you'll want to change that to the following:

 background-image: url(../images/lgHero.jpg);

I believe that is correct. Image references in your css file will start at the directory the css file is in, which is the wordpress/wp-content/themes/BLANK-Theme/css folder.

So that new URL will go up one directory (out of the css folder) then go to the images folder and look for the lgHero.jpg file.
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu