Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Convert HTML Design To Wordpress

Featured Replies

Hi wdf. I got a feeling this question & the solutions have already been done, so if thats the case just point me in that direction please.

 

I prefer to code sites myself, but having used wordpress & found how easy & reliable it is, plus the plugins etc.Ive been thinking what would be the steps i would need to do in order to take my html site over to wordpress basically So i can absorb the greatness of it.

 

I got a niggling feeling that because wp is php based ill have to do some php calls etc + give the url an extension of index.php Not index.html

 

Thanks

 

Ps:

Good evening,

 

If you're more for coding from scratch, you're going to have to add all the relevant WordPress codex (http://codex.wordpress.org/) attributes such as 'the loop' and so on to get it functioning with your header, footer and sidebar/s.

 

It's just as effective to use a blank canvas theme which is essentially skipping what I state above, leaving you with more time to work on the layout and CSS.

 

I wouldn't say there's any major benefit in writing up your php files outside of WP, only to upload them to the CMS when essentially loading up a blank style theme would give you the same result. But yes, any .htm/.html file extentions you have will need to be in PHP.

 

How would you usually code from scratch? In Notepad ++ or something similar?

Edited by Silverbolt

  • Author

Yes exactly NP++. Actually just got me thinking. I could use the style sheets no problem Just copy them to the appropiate wp folder. I'd just have to get my head round the layout. Obviously within the php header etc is html (divs etc) (I do code in html5, so semantics important) code, So I'm sure with a little tinkering ill succeed in getting the same layout. Just got a niggling feeling I may obstruct something. What do you think?

  • Author

How would I go about getting the same layout in wp! Its hall php this & that. I dunno maybe I'm confusing myself Because I'm new to the concept. Maybe when I get stuck in It will start to make sense. How could I get the same design in wp from scaratch!

I would suggest installing WordPress as usual and once it's installed, stick with the pre-loaded WP theme that comes unpacked, load up the theme editor from > Appearance settings and get straight to work on header.php, footer.php and sidebar.php (or ditch the sidebar if you're going full width?). Once these are out the way, just go about coding up your core index.php and other main website files like you usually would in NP++, and add the following call in's as you go along.

 

<?php get_header(); ?>


<?php get_sidebar(); ?> 

<?php get_footer(); ?>

 

Almost everything else you add in between here are just your typical DIV tags assigned to the stylesheet. I wouldn't worry about obstructing something though, if you have the WP codex page handy.

  • Author

Hey let me thank you first of all. So index.php is core html wrapped in php? I know code well So I'm sure it'll make sense. I just got the idea that designing with the aid of wp makes things easier & more efficient. Plus as its a cms Its also suitable for clients.

Hey let me thank you first of all. So index.php is core html wrapped in php? I know code well So I'm sure it'll make sense. I just got the idea that designing with the aid of wp makes things easier & more efficient. Plus as its a cms Its also suitable for clients.

 

Not a problem at all my friend.

 

In a nutshell, yes. index.php is your typical home page which looking inside the file in editor mode will look almost identical to your typical HTML code.

 

In fact, I used to code in DreamWeaver before I really got to grips with WordPress, but after a little while I found editing the core files direct from the WP theme editor was far better use of my time. It was practically like using NP++ anyway, apart from you have an "Update File" button at the bottom which makes any changes universal in an instant.

 

Another thing you need to bare in mind when designing out of WordPress and adding the files in at a later date is ultimately what you'll be using the site for? WordPress is known for it's blogging background, so if you aim to post articles, display them on your home page and perhaps give visitors the opportunity to comment on your website articles then you'll also need to add the extra call-ins for these as well....which would all come out-of-the-box if you were to edit and code from the main WP dashboard.

 

I suppose what I'm getting at is I would certainly advise you to get to grips with the codex and look through the files on the standard theme first before preparing anything in NP++ with the desire to transfer to WordPress. This way you're less likely to miss any important PHP code that may need to be inserted at X or Y location in your files, which could subsequently knacker up the website when making the switch.

 

And regarding clients....Yes clients with little to no knowledge who want the ability to update their content love it, at least from my experience anyway. Most customers could care less about the HTML/CSS/PHP side of things, but the ease of them having the option to login to their website remotely from any given location (computer or mobile) and making a new article or minor tweak here or there on one of their pages makes them extremely happy.

Edited by Silverbolt

  • Author

I've actually played about with wp a little in the past. I know php & understand wp a lot. I have a book Wordpress web design for dummies by lisa sabin. Maybe I should follow the book & use my own material.

  • Author

Just had a quick look @ the hierachy link. Falling asleep lol. Maybe look @ again Sonetime. I got that book I mentioned earlier, So I'm sure it'll be helpfull. Thanks for all replies btw.

Have a look at the css-tricks website for some video tutorials.

 

http://css-tricks.com/video-screencasts/25-designing-for-wordpress-part-one/

 

http://css-tricks.com/video-screencasts/73-wordpress-theme/

 

This is how I learned how to create Wordpress themes. I haven't looked at these videos since the first time I watched them, but as a Wordpress beginner they're useful in helping you get your head around the general concept of it all.

  • Author

@ this moment in time im basically building my folio. I have html links inside the slider & this is where ultimately ill showcase my work.

I dunno Maybe ill find out wordpress is useful for client work & not personal stuff like my own personal site. But in time when ive built my folio up ill need somewhere to show it.. maybe wp will give me an idea.. either now || in the future!

 

thanks for all the help.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.