So I found this tutorial: http://thethemefoundry.com/blog/html-wordpress/
It is pretty clear, which is lovely. I am stuck with the header though.
In my navigation I used SPRY from Dreamweaver and cannot seem to get it to work at the moment with WordPress. I know it is just a matter of putting the code in the right place, but do not know where that is.
Also instead of background images in CSS, I am using this code in the html:
<div id=”banner”><img src=”images/banner.jpg” width=”960″ height=”198″ alt=”New Zealand Parkour Association Inc.” /></div>
though the images aren’t showing. Help! 😀
Thought I was making an amateur mistake so tried this:
<img src=”nzparkour.co.nz/testwebby/wordpress/wp-content/themes/nzpa/images/banner.jpg” width=”960″ height=”198″ alt=”New Zealand Parkour Association Inc.” />
still not happening though and image exists.
When you say:
Creating Custom Website
are you talking about using WordPress as a CMS?
I mean I have a website design already made with html and css. All I want to do is make it happen in word press 🙂 I am getting there, just stuck on a few things
Well your going to have to know your PHP and go through WordPress codex with the list of functions and how to use the loop. http://codex.wordpress.org/Theme_Development
Thanks for replying and the link. This still isn’t enough information for such a noob as myself to confidently go off and make it happen. Chances of any more info?
This is the code I have in the <head>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<meta name=”viewport” content=”width=device-width” />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( ‘|’, true, ‘right’ );
// Add the blog name.
bloginfo( ‘name’ );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( ‘description’, ‘display’ );
if ( $site_description && ( is_home() || is_front_page() ) )
echo ” | $site_description”;
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ‘ | ‘ . sprintf( __( ‘Page %s’, ‘twentyeleven’ ), max( $paged, $page ) );
?></title>
<link rel=”profile” href=”http://gmpg.org/xfn/11″ />
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
<!–[if lt IE 9]>
<script src=”<?php echo get_template_directory_uri(); ?>/js/html5.js” type=”text/javascript”></script>
<![endif]–>
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( ‘thread_comments’ ) )
wp_enqueue_script( ‘comment-reply’ );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
I have tried putting this in there but no success:
<script src=”SpryAssets/SpryMenuBar.js” type=”text/javascript”></script>
<link href=”SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css” />
You actually don’t have to know PHP to “transfer” your HTML design into WordPress. The most easiest way is to find a Theme that has a similar layout to yours and start implementing your HTML into that Theme.
Start from:
- header.php
- index.php
- sidebar.php
- footer.php
Good starter Theme http://wordpress.org/extend/themes/toolbox or you can go to http://wordpress.org/extend/themes/ and find a Theme that’s closest to your current layout.
Or some third-party service like http://www.themespress.com (randomly picked from Google)
Emil
You need to separate everything into .php files.
For example for the header, save all the html in ‘header.php’.
You then insert the header.php into a page .php (e.g Home.php or index.php) by using the following code:
<?php>get_header(); ?>
There is no way getting around php in wordpress, you’re going to have to use it.
Do the same to the header for all major components of your website. So header.php, footer.php, sidebar.php etc.
Eventually your index.php will look something like this:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Then have the content html inside the index.php or use a loop.php. You can find out more about these using google.
Alternatively you can use a naked theme like Starkers theme to get all the basics and then simply alter it with your own html and css.
EDIT: Got beaten to the punch in 1 second, dangit!
Yeah I have done all this and understand it from this tutorial: http://thethemefoundry.com/blog/html-wordpress/
that isn’t my issue. I just cannot seem to get the code working fro the spry
Spry as in http://help.adobe.com/en_US/dreamweaver/cs/using/WSF4959FED-0344-4bfe-970D-3A24449E96E0a.html ?
The reason why is because WordPress works slighly different than HTML this:
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
should be changed into this:
<script src="<?php echo get_template_directory_uri(); ?>/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
and copy all elements from SpryMenuBarHorizontal.css and paste into style.css once done remove that line completely.
Emil
I created the spry in dreamweaver it isn’t from a wordpress plug-in. I think it is a matter of getting the code right to connect the spry assets to the .php file.
also i still cannot work out why this doesn’t work:
<img src=”nzparkour.co.nz/testwebby/wordpress/wp-content/themes/nzpa/images/banner.jpg” width=”960″ height=”198″ alt=”New Zealand Parkour Association Inc.” />
SHOT BROOOOOOOOO. Thanks Emil 🙂 that is getting me there. A bit of tweaking should get me there 🙂
Anyone want to take a stab at the image code just above?
This does not work because the path is not correct:
<div id="banner"><img src="nzparkour.co.nz/testwebby/wordpress/wp-content/themes/nzpa/images/banner.jpg" width="960" height="198" alt="New Zealand Parkour Association Inc." /></div>
Change that to:
<div id="banner"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/images/banner.jpg" width="960" height="198" alt="New Zealand Parkour Association Inc." /></div>
I am bushed, this was me working all night long!
Good Night,
Emil
