And you want the demo page is in the same domain as your blog's domain, for example if your domain name is http://yourname.com/ and the demo page url will be http://yourname.com/demo/theme-name. The URL will be your demo page url of your your Wordpress theme so your visitor will view its demo through it.
Here is the screenshot.
Having a demo page for your template or theme is like giving a potential buyer test-driving your car before they finally be convinced that your car is what they are looking for.
Interested? Let's do it.
How to create a demo page of Wordpress theme in the same domain name
1. Create a new folder or a new subdomain for demo.
2. Save the following code in Notepad or such, and name it index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Theme Demo</title>
<style>
body {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwf4nbhYOqKjZ_2UcTWJkmxSGsVeHUsNI5vU5VsSU3BuCYsMndTFStkBy64wLn87izz1JstwfWODl-hMnc0l1ng6ALzGi8cCA4DhiFim7CHf4L9KQmQFjVlClWLvaApjfRF03SGUvwuSg/s1600/loader.gif)no-repeat center center;
font:normal normal 13px/normal Arial,Sans-serif;
color:white;
text-align:center;
margin:0;
padding:0;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url(http://www.ajaxload.info/cache/FF/FF/FF/64/5B/5B/25-1.gif)no-repeat center center;
transition:all .4s ease-out;
}
#tab-demo {
width:100%;
height:50px;
top:0;
left:0;
background:#222;
color:white;
font:normal 13px Arial, sans-serif;
z-index:99999;
position:fixed;
}
.closebutton {
background:#66af33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilGAV8QwKnMOpk0n0OPpicW77s6SzUAaQaHocPZFBWLKRsuIHnTidSh5pOr2MaIw9a5h6e9jKAUtftWVuVDi8znS6vmf8Pl6xOe8HET_H0WCBAH4e8XXxNn2FdU59ilycWcGgNZyDT3LA/s1600/close.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 50px;
position:fixed;
top:0;
right:0;
line-height:50px;
cursor:pointer;
color:white;
}
a.closebutton {color:white;text-decoration:none}
.closebutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilGAV8QwKnMOpk0n0OPpicW77s6SzUAaQaHocPZFBWLKRsuIHnTidSh5pOr2MaIw9a5h6e9jKAUtftWVuVDi8znS6vmf8Pl6xOe8HET_H0WCBAH4e8XXxNn2FdU59ilycWcGgNZyDT3LA/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwXBhn2Mu7wb2ccmMZG5tjC1XbuucCCoTa6TnoJIOfaOo_nkWBMaj5leqDnAFdtSrUklxTunoB_3rm8EQfE-9_84_94A1qirgWARROGD1MJjVav6D6LBYymawniJS08tiBMR-SL5Ad714/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwXBhn2Mu7wb2ccmMZG5tjC1XbuucCCoTa6TnoJIOfaOo_nkWBMaj5leqDnAFdtSrUklxTunoB_3rm8EQfE-9_84_94A1qirgWARROGD1MJjVav6D6LBYymawniJS08tiBMR-SL5Ad714/s1600/download.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 55px;
position:fixed;
top:0;
right:158px;
line-height:50px;
cursor:pointer;
color:white;
text-decoration:none;
}
.demologo, a.demologo {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj44LviRrKO0OJ8Zz24bqjChCPr-i4hevVmhSk3lnweQQD1Pm69UossnJsbBMcvFlz2FkOXWcnmnEWMmVwJZGjREcDbGZZRXzb2RA21NaWPDCQ62KzLlBtC6aQxQvNIHeS8l0J7YXwr9QE/s1600/ki-logo.png)no-repeat left center;
padding-left:55px;
font-size:17px;
font-weight:normal;
font-family:Oswald, Arial, Sans-serif;
text-transform:uppercase;
line-height:50px;
left:15px;
position:fixed;
color:white;
text-decoration:none;
}
</style>
</head>
<body>
<div id='tab-demo'>
<a class='demologo' href='http://thethemename.yourname.com'>the theme name</a>
<a class='dlbutton' href='' id='dl'>Download</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById('tab-demo').style.display='none';document.getElementById('view').style.top='0';document.getElementById('view').style.height='100%''>Remove Frame</a>
</div>
<iframe id='view' src=''></iframe>
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
window.onload = function() {
var url = getQueryVariable("url");
var download = getQueryVariable("download")
document.getElementById('view').src = url;
document.getElementById('dl').href = download;
};
</script>
</body>
</html>See the line 092; change the http://thethemename.yourname.com with the real URL demo of yours.Once you have created the above file, upload the file to your Wordpress root directory.
The url of the domain would be like this.
http://yourname.com/demo/?url=The-URL-OF-THEME&download=Download-URL-IS-Here
Note.
- Change The URL OF Theme with your Wp theme URL Demo.
- Change Download URL Is Here with the real download URL.
No comments:
Post a Comment