SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    California
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Custom CSS and JavaScript in individual Wordpress posts

    Is there a way to include custom CSS and JS in individual Wordpress posts? I'd like to start using Wordpress to make web development tutorials but I'm not sure how to properly add custom stylesheets or scripts. I've tried adding <style> and <script> tags into the text view of the post editor but it doesn't work correctly.

    For my first tutorial I made a simple JS function that manipulated the CSS of some text. LOOK AT IT HERE

    I'd like to import that same code into a Wordpress post and keep its functionality intact.

    Here is the code that I used and would need to include in the post:

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    
    		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    		Remove this if you use the .htaccess -->
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    		<title>Go Italian</title>
    		<meta name="description" content="" />
    		<meta name="author" content="Matthew Sanchez" />
    
    		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
    
    	
    	<style type="text/css">
    	
    	/* problem: absolute positioning is dependent on font-size */
    	/* fixed: set absolute positioning using ems */
    	
    	
    	/* template begin */
    	
    	body {
    		font-size: 100%;
    		color: #fff;
    		background: #666;
    	}
    	
    	#page {
    		width: 50%;
    		padding: 5%;
    		margin: 15% auto 0;
    		background: #aaa;
    	}
    	
    	/* template end */
    	
    	.georgia {
    		font-family: georgia;
    		font-style: italic;
    	}
    	
    	.impact {
    		font-family: impact;
    	}
    	
    	.courierNew {
    		font-family: "courier new";
    	}
    	
    	.verdana {
    		font-family: verdana;
    		font-weight: bold;
    	}
    	
    	.arial {
    		font-family: arial;
    	}
    	
    	p {
    		position: relative;
    		font-size: 1.875em;   /* 30px/16 */
    	}
    	
    	span {
    		position: absolute;
    	}
    	
    	#g {
    		left: 0em;
    	}
    	
    	#o {
    		left: .64em;
    	}
    	
    	#italian {
    		position: relative;
    		left: 1.7em;  /* ~50px */
    	}
    
    		
    		
    </style>
    </head>
    
    
    <body>
    	
    	<div id="page">
    	
    	<p><span id="g" class="impact">g</span><span id="o" class="arial">o</span> <span id="italian">Italian</span></p>
    	<p>
    		<button id="on" type="button" value="turn on">turn on</button>
    		<button id="off" type="button" value="turn off">turn off</button>
    	</p>
    	</div>
    	
    	<script type="text/javascript" src="javascript/go-italian.js"></script>
    	
    </body>
    
    </html>
    JAVASCRIPT:

    Code:
    // grab elements
    	var g = document.getElementById("g");
    	var o = document.getElementById("o");
    	var on = document.getElementById("on");
    	var off = document.getElementById("off");
    	
    	// put classes (not font-families) in an array
    	var gClasses = ["verdana", "georgia", "courierNew","arial", "impact"];
    	var oClasses = ["courierNew", "impact", "verdana", "georgia", "arial"];
    	var i = 0, t = 0;
    	
    	// iterate through 'classes' array every time called
    	var gChange = function() {
    		g.className = gClasses[i];
    		i++;
    		if( i == gClasses.length) {
    			i = 0;
    		}
    	};
    	
    	var oChange = function() {
    			o.className = oClasses[t];
    			t++;
    			if( t == oClasses.length) {
    				t = 0;
    			}  
    	};
    	
    	// "r" is used to prevent multiple function calls when clicked multiple times
    	var r;
    	
    	// "used" 
    	var cancel;
    	
    	// call fontChange() every .65 sec when clicked to change letter classes
    	var fontChange = function() {
    		gChange();
    	    setTimeout(oChange, 200);
    	   // Recursion
    	    // fontChange() calls itself after a delay to create an interval
    		cancel = setTimeout(fontChange, 700);
    	};
    	
    	// whole function starts when button is clicked with mouse
    	on.onclick = function() {
    		if(r == 1) {
    			return;
    		} else {
    			fontChange();
    			r = 1;
    		}
    	};
    	
    	// seperate button can stop the function
    	off.onclick = function() {
    		clearTimeout(cancel);
    		r = 0;
    	};
    Thanks for looking!

  2. #2
    SitePoint Addict deadmix's Avatar
    Join Date
    Jun 2009
    Location
    france
    Posts
    205
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    the best way is to create a css style file like style2.css for exemple, add your style to it then link to it :

    <link rel="stylesheet" type="text/css" href="style2.css" />
    Add the call of javascript <script type="text/javascript" src="javascript/go-italian.js"></script> on footer before </body> or before </head>

    and that's all... i always do the same and it's working fine!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •