Solved

folder structure in Wordpress

Posted on 2011-09-22
4
368 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
Comment Utility
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
Comment Utility
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
Comment Utility
Thank you Jeremy so much.
0
 
LVL 23

Expert Comment

by:jeremyjared74
Comment Utility
You're welcome.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

If you are looking for plug-ins to add functions to your WordPress small business web site, take some time to read though this comprehensive list.  These are all the plugins I use for my customers WordPress web sites, as well as my own.  Be sure to …
What's this? As a volunteer Page Editor for Experts-Exchange.com, I have noticed that many authors also have blogs, and pull articles from their blogs to post at Experts-Exchange. I appreciate each author sharing their blog content with our site …
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now