Solved

folder structure in Wordpress

Posted on 2011-09-22
4
374 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

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…
How to create your own WordPress Theme Before I begin with the theme design tutorial, I would like to give you the basics of what is required to make a WordPress Theme. The most basic WordPress theme only requires 2 files: a style.css file and an…
The purpose of this video is to demonstrate how to create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and SmallPDF.com Log…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …

696 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