folder structure in Wordpress

Hello. I have installed wordpress. I previously had code like the code snippet below. I am using something called flowplayer for video. I have a file structure like the attached files.

Can anyone suggest how I can set this up in wordpress? Where can I put these files and how do I have to change the file references in the attached code?
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title> g</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta name="keywords" content="data mining, text mining, weka, neural network, classification, clustering, weka tutorial, weka video, knowledge explorer, sentiment mining">
	<meta name="description" content="A series of Weka screencasts that show you how to use Weka for text mining.">
	<link rel="stylesheet" type="text/css" href="css/reset-min.css" media="all">
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
	<link rel="stylesheet" type="text/css" href="css/fancybox/jquery.fancybox-1.2.6.css" media="all">
	<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="css/ie.css" media="all">
	<![endif]-->
	
	<script type="text/javascript" src="js/swfobject.js"></script>
	<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.fancybox-1.2.6.pack.js"></script>
	<script type="text/javascript" src="js/flowplayer-3.1.4.min.js"></script>
	<script type="text/javascript" src="js/weka.js"></script>
</head>
<body><div class="sentimentcss">
 .</div>
<div style="float:right;">
  <script type="text/javascript"><!--
google_ad_client = "pub- ";
/* 300x250, created 2/12/10 */
google_ad_slot = "9660156087";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="wrapper">
  <h1><a href="index.php">  Tutorials</a></h1>
		 </a>
	<br>
Some videos on the R programming language for Statistical Computing are at <a href="http://sentimentmining.net/StatisticsWithR/"> http://sentimentmining.net/StatisticsWithR/</a>	

  <ul id="videos">
			<li id="video-1">
				<font face="Verdana, Geneva, sans-serif" color="#6d6d6d" size="8">1</font>
				<div class="details">
					<h2><a href="#">Getting Weka</a></h2>
					<a href="#" class="watch">Watch</a>
					<a href="mp4/1 Getting Weka.mp4" class="download">Download</a>
				</div>
			</li>
			<li id="video-2">
				<font face="Verdana, Geneva, sans-serif" color="#6d6d6d" size="8">2</font>
				<div class="details">
					<h2><a href="#">Introduction to Text Mining</a></h2>
					<a href="#watch-2" class="watch">Watch</a>
					<a href="mp4/IntroductionTextMining.mp4" class="download">Download</a>
				</div>
			</li>
			<li id="video-2">
				<font face="Verdana, Geneva, sans-serif" color="#6d6d6d" size="8">3</font>
				<div class="details">
					<h2><a href="#">Text Mining pt. 1</a></h2>
					<a href="#watch-2" class="watch">Watch</a>
					<a href="mp4/2 Text Mining pt 1.mp4" class="download">Download</a>
				</div>
			</li>
			
			</ul>
		<p id="footer">
		
		
			 </div>
			
			
	
</body>
</html>

Open in new window

weka.zip
onyourmarkAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
jeremyjared74Connect With a Mentor Commented:
Here is how your folder structure would look:

Folder: The Folder to hold all theme files
Folder: images
Folder: css
Folder: js
Folder: js
files: index.php, header.php, functions.php, single.php, sidebar.php, style.css (The Main Stylesheet Needs to Be In the Root of the Theme Folder!) , footer.php etc....

Here are the paths to substitute your files:

You have:

<link rel="stylesheet" type="text/css" href="css/reset-min.css" media="all">

Open in new window


Would become:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/reset-min.css" media="all" />

Open in new window


You have this inside a folder named css:

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

Open in new window


In a folder names css inside the theme folder the above code would become this:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/style.css" media="all" />

Open in new window


Your Javascript files would go in the root of the theme folder and named js. You have:
<script type="text/javascript" src="js/swfobject.js"></script>

Open in new window


Would become:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/swfobject.js"></script>

Open in new window


One thing you should know, many plugins use wp_head() to hook into WordPress. So the your after you finish liking to your js files, you enqueue the js library and place:

<?php wp_enqueue_script( 'jquery' ); ?>

Open in new window


After the last js src file you added.

Here is your code for the <head> with your files and their equivalents for WordPress above them:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <title> g</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <meta name="keywords" content="data mining, text mining, weka, neural network, classification, clustering, weka tutorial, weka video, knowledge explorer, sentiment mining">
        <meta name="description" content="A series of Weka screencasts that show you how to use Weka for text mining.">
        
        <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/reset-min.css" media="all" />
        <link rel="stylesheet" type="text/css" href="css/reset-min.css" media="all">
        
        <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/style.css" media="all" />
        <link rel="stylesheet" type="text/css" href="css/style.css" media="all">
        
        <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/fancybox/jquery.fancybox-1.2.6.css" media="all" />   
        <link rel="stylesheet" type="text/css" href="css/fancybox/jquery.fancybox-1.2.6.css" media="all">
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" media="all">
        <![endif]-->
        
        <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/swfobject.js"></script>
        <script type="text/javascript" src="js/swfobject.js"></script>
        
        

        
        <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/swfobject.js"></script>
        <script type="text/javascript" src="js/jquery.fancybox-1.2.6.pack.js"></script>
        
        <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/flowplayer-3.1.4.min.js"></script>
        <script type="text/javascript" src="js/flowplayer-3.1.4.min.js"></script>
        
        <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/weka.js"></script>
        <script type="text/javascript" src="js/weka.js"></script>
        
        
        <?php wp_enqueue_script( 'jquery' ); ?> <!-- You Should Use wp_enqueue_script for WordPress to avoid Plugin conflicts -->
        <?php wp_head(); ?><!-- Always place this after all scripts so plugins work. Inline JS would go after this but fefore the </head> tag. --> 
        <script type="text/javascript" src="js/jquery-1.4.min.js"></script>
        
</head>

Open in new window


When you open the body tag in WordPress, you can give each page it's own class by adding this bit of code in place of <body> (Good for customizing individual pages):

<body <?php body_class(); ?>>

Open in new window


And last but not least, you should always include this just before the closing body tag. It's also crucial for plug-ins and scripts to work correctly:

<?php wp_footer(); ?>

Open in new window


Another tip:
For adding images via CSS, like background images etc... you would place them in the images folder like I show above. You would then call the images in the style.css file like this:

body {
background:url(images/yourimage.jpg);
}

Open in new window



Well there ya go. I hope that helps.
0
 
c_a_n_o_nConnect With a Mentor Commented:
Download a FlowPlayer plugin from Wordpress
http://wordpress.org/extend/plugins/fv-wordpress-flowplayer/

Put in Plugin folder, activate it, and follow instructions.
Hope that helps.

There are likely other plugins available at http://wordpress.org/extend/plugins that should meet your needs without rewriting code.
0
 
onyourmarkAuthor Commented:
Thank you Jeremy so much.
0
 
jeremyjared74Commented:
You're welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.