Creating a new wordpress theme help

Beginners - Learning PHP
#1

Hello all, I am currently trying to turn a website into a wordpress site and creating a theme in order to do this.

Firstly I created the folder with css and index.php, header.php, footer.php. I put all the code in and the homepage looked perfect.

I wanted to remove the comments box so I deleted that bit of code from the loop. After I did this all style had disappeared and it looked like a long feed of content along the left hand side. I quickly put the piece of code back in and refreshed. The page appeared exactly the same as one long feed without style.

My question is - why would this happen? as all of the code is now exactly the same as it was when it looked perfect!

I have also tried to start from scratch deleting the theme and still have no luck. any ideas?

Thanks in Advance.

Tom

#2

I have never done a blog wordpress site, so I remove that portion from every wordpress site I have done. What does the altered index file look like?

#3

[php]<?php get_header(); ?>

<div id="header" class="clearfix">


 	<div id="welcomeBox"  class="toggle-hover-show relative">   
     	
            <div id="welcome">

             <div class="toggle-show-me toggle-menu menu-welcome">	

                    <a id="lh" href="biography.html">lara himpelmann</a>

                 <a id="mua" href="biography.html">make up artist</a>

               </div><!--end welcomeExtra-->

              <a href="#">WELCOME</a>
 
       </div><!--end welcome-->

     </div><!--end welcomeBox-->

       
        <div id="contactBox">

       	<div id="contact" class="toggle-hover-show relative">

          	<div class="toggle-show-me toggle-menu menu-contact">

                  T: +44 (0)7999 387 111
        
        <a href="mailto:[email protected]" title="Send me an email">E: [email protected]</a>

       		</div><!--end contactExtra-->

    			<a href="#">CONTACT</a>

     	</div><!--end contact-->  

       </div><!--end contactBox-->    

            
        <div id="socialMedia">

     	<a id="facebookBox" href="http://www.facebook.com/larahimpelmann.makeup" title="Facebook" target="_blank">facebook</a>

         <a id="twitterBox" href="http://www.twitter.com/Larah_MUA" title="Twitter" target="_blank">twitter</a>

         <a id="pinterestBox" href="http://pinterest.com/larahimpelmann" title="Pinterest" target="_blank"> pinterest</a>

         <a id="instagramBox" href="http://www.instagram.com/laralma_keup" title="Instagram" target="_blank"> instagram</a>

       </div><!--end socialMedia-->
 
   
        <div id="logo">

    	<a href="index.html"><img src="assets/images/header/laraLogo.png" width="262" height="111" alt="Lara Himpelmann" /></a>

       </div><!--end logo-->

     
    </div><!--end header--> 

   <div class="floatFix"></div>
  

    <ul class="nav-links-section ">

  
       	<li class="nav-item-container">

       	<a href="women.html">
 
       <span class="nav-item-title">women</span>

       	<span class="relative nav-item-image-wrapper">

           	<img src="assets/images/home/women.png" class="nav-item-image"/>

          	<span class="square"></span>

         </span>

        </a>
 
   </li>
   
 
        <li class="nav-item-container">

      	<a href="men.html">

          <span class="nav-item-title">men</span>

       	<span class="relative nav-item-image-wrapper">

         	<img src="assets/images/home/men.png" class="nav-item-image"/>

           	<span class="triangle"></span>

            </span>
      
  </a>

    </li>

      
        <li class="nav-item-container">

       	<a href="publications.html">
 
       <span class="nav-item-title">advertising</span>

       	<span class="relative nav-item-image-wrapper">

           	<img src="assets/images/home/advertising.png" class="nav-item-image"/>

         	<span class="square"></span>

        </span>
    
    </a>
 
   </li>
  
  
        <li class="nav-item-container">

      	<a href="video.html">

         <span class="nav-item-title">moving image</span>

      	<span class="relative nav-item-image-wrapper">

         	<img src="assets/images/home/video.png" class="nav-item-image"/>

           	<span class="circle"></span>

           </span>
  
      </a>
  
  </li>
     

        <li class="nav-item-container last">

      	<a href="biography.html">
 
       <span class="nav-item-title">about</span>

      	<span class="relative nav-item-image-wrapper">

         	<img src="assets/images/home/about.png" class="nav-item-image"/>

          	<span class="circle"></span>
 
       </span>
        
</a>
 
   </li>
    

    	
        
    </ul><!--end nav-links-section-->

 
	<div class="nav-item-container last">

       	<a href="special.html">
        
<span class="nav-item-title">special projects</span>

     	<span class="relative nav-item-image-wrapper">

        	<img src="assets/images/home/special.png" class="nav-item-image"/>

           	<span class="triangle"></span>
    
    </span>

</div>    
<?php get_sidebar(); ?>
<?php get_footer(); ?> [/php]
#4

Also can I just say if there is a different way your supposed to be post code here I am really sorry.

#5

I think there is some confusion. That would be a page in WordPress not a theme.

#6

Sorry I’ve been following this guide https://thethemefoundry.com/blog/html-wordpress/ and it says to create a index.php and a style.css and inside the index should be everything that makes up the main content of the page?

Sorry New to php!

#7

You misunderstand how Wordpress works.

Follow that article but don’t add any of your code at the moment. Alternatively use one of the prebuilt themes that come with Wordpress or any of the ones on Wordpress.org. If you are new to php this is probably a far better bet. You can add your own html to any page in the Wordpress editor you do not need to do it in the core theme files.

If you must do it this way then load your files into an appropriately named theme folder. Activate that theme. Then go to the Wordpress dashboard and select Page > New and then put your page content in there.

Get that working properly first and then start fine tuning it.

#8

Ah thanks! OK so I have started using a pretty simple theme, I have changed the .css file and edited the php files a bit to suit my needs - all good! The only issue I have now is that if you check this site - http://larahimpelmann.com/ it has image that are covered with shapes and then once rollover a new image is shown. in my testing environment everything looks great but the shapes aren’t there. The images show once rolled over but otherwise its just blank. any ideas/suggestions?

Thanks so much for all the help guys, learnt a lot through this!

#9

Those all have masks in the css file that hide them. Honestly, I would add labels to the masks and leave them. It makes a very artsy appearance.

#10

Im not too sure what you mean ???

#11

Which part?

#12

I have tried fiddling around with the css but nothing seems to be effecting the mask shape.

#13

You are going to have to dig for it.

These are the shapes themselves, making the image a specific shape.
[php].square {
}
.triangle {
background: rgba(0, 0, 0, 0) url("…/images/home/triangle-mask.png") no-repeat scroll 0 0;
}
.circle {
background: rgba(0, 0, 0, 0) url("…/images/home/circle-mask.png") no-repeat scroll 0 0;
}[/php]

The black overlay is coming from here,
[php].nav-item-image-wrapper {
background: black none repeat scroll 0 0;
}[/php]

Keep in mind, removing them alone will make a whitespace and only show the images on a:hover

Also, your loading gif is not sized properly.

#14

I’ve tried changing everything all i am getting is white space with a:hover showing the images. I really don’t understand why the black mask shapes aren’t showing, the CSS is exactly the same and the file paths for the images are fine!

#15

I see the shapes in Firefox fine in black and then the image shows correctly on hover.

Ensure that you have no caching plugin enabled on your Wordpress site and also clear your browser cache.

#16

I have no plugins activated and i have cleared my cache and still no luck :confused:

#17

Which browser? Try a different one and a different computer ideally. It is fine for me in Opera, Safari, IE and Chrome as well as Firefox.

#18

ok - so a strange one, i decided to reset the database and I guess it made some improvement.

https://drive.google.com/file/d/0Bw0NjkCn3FYORDRlQm40NE81MU0/view?usp=sharing

This image shows the wordpress website now - the masks are now visible and the a:hover work but they are not the shapes they should be. very strange stuff!

#19

This is what I see

https://goo.gl/photos/f2PommyKu8AL4NKH6

#20

Ah it should be known that what I showed is local host and the WordPress website hasn’t gone live yet.

Sponsor our Newsletter | Privacy Policy | Terms of Service