Solved

folder structure in Wordpress

Posted on 2011-09-22
4
372 Views
Last Modified: 2012-05-12
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
0
Comment
Question by:onyourmark
  • 2
4 Comments
 
LVL 10

Assisted Solution

by:c_a_n_o_n
c_a_n_o_n earned 70 total points
ID: 36584894
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
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 430 total points
ID: 36584971
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
 

Author Closing Comment

by:onyourmark
ID: 36585004
Thank you Jeremy so much.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 36585064
You're welcome.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Effect of setting a page visibility to Private 3 29
Word Press Contact Form 7 6 111
AJAX pass along a variable 3 47
Wordpress Contact Form 7 using up whole page 3 19
I want to start by talking about the use of plug-ins for WordPress. I started a web-site for a company I was working for a few years ago; I had extremely basic knowledge of HTML. I am a Graphic Designer by trade so I invited the opportunity as a cha…
Transferring a wordpress site from a host or local dev server to another host can be a pain. So I've included my steps on how I have accomplished this task. Steps include an assumption that you have Cpanel access or Ftp access.. If you do not hav…
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question