Archive for the ‘Code’ Category

Code – Adding PHP to WordPress Posts/Pages for site_url

by Chris Ehrlichman 16 Jun 0 Comments

When working with a stage area before publishing your WordPress site, sometimes you will run into a situation where you need to hard code a link into a page. Well rather than going back to change the links after flipping the switch to live, use some PHP.

First you will need to install a plugin (Exec-PHP) that allows PHP script to run on posts or pages. After installing the plugin, your now ready to incorporate PHP in your posts.

To create the hard code in PHP its not to difficult. Just add the code below.

<a href="<?=site_url('PAGE URL')?>">

The site_url tag retrieves the site url for the current site (where the WordPress core files) with the appropriate protocol.

In the example above (PAGE URL) you can specify the exact category/page location for the URL. Below is an example of how to code this.

Example Page URL – http://www.example.com/category/page

<a href="<?=site_url('/category/page')?>">

Now that you’ve installed Exec-PHP you can start to use a lot of cool PHP scrips in your posts. This should also make it easier to hard code links on your pages in your staged site area without having to go back after you’ve set the site live. Let me know if you have any questions.

Code – Preload Page Fade Effect jQuery Script

by Chris Ehrlichman 23 Mar 0 Comments

I spent quite a long time looking for the perfect Preload Page jQuery Script. After a rigorously searching different sites, I came across Mkyong’s “Page Loading Effect with jQuery“. I found that the code is very simple to work with and integrate into any environment.

1. Page Effect Div – This div is used to implement the fade effect for the page load.

<div id="page_effect" style="display: none;">
<!-- this content is hide, need jQuery to fade in --></div>

 

2. jQuery Fade in Script – Place this text between the head and body of your code. The 2000 in the “.fadeIn(2000)” part of the code stands for the amount of milliseconds it takes for the page to fully load.

$(document).ready(function(){	
	$('#page_effect').fadeIn(2000);
});

 

3. Completed code with jQuery Fade Script – Place this text between the head and body of your code

Demo

<html>
<head>
<title>Preload Page Fade Effect jQuery Script</title>
 
<script type="text/javascript" src="js/jquery.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
	$('#page_effect').fadeIn(2500);
 
});
 
</script>
<body>
 
<div id="page_effect" style="display:none;">
 
    Watch me loaddddd 1<BR>
    Watch me loaddddd 2<BR>
    Watch me loaddddd 3<BR>
    Watch me loaddddd 4<BR>
    Watch me loaddddd 5<BR>
    Watch me loaddddd 6<BR>
    Watch me loaddddd 7<BR>
    Watch me loaddddd 8<BR>
    Watch me loaddddd 9<BR>
    Watch me loaddddd 10<BR>
    Watch me loaddddd 11<BR>
    Watch me loaddddd 12<BR>
    Watch me loaddddd 13<BR>
    Watch me loaddddd 14<BR>
</div>
 
</body>
</html>