0

I have written a web-page which is a web-app (a simple card database using php, mysql, and styled with css3). The page works as expected.

A friend of mine proposed me to use wordpress for everything else to save time on coding - welcome page, etc, so I decided to try it out. I need to lock the page to users with password only, so I had to add the page via a template. I just added the needed php comment and expected everything to work fine when I was surprised to see that neither the css not the script were read. I use some javascript to define height and width of some column, link to images and so on. All I got is some unstyled divs :(:(

here is the head of the page

<?php
/*
Template Name: Tarot
*/
?>


<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <!-- CSS  -->
    <link rel="stylesheet" href="tarot/css/master.css">

    <!-- Jquery main DB -->
    <script type="text/javascript" src="tarot/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="tarot/js/jquery-ui-1.8.24.custom.min.js"></script>
    <script type="text/javascript" src="tarot/js/jquery.flip.js"></script>

    <!-- Main custom javascript file -->
    <script src="tarot/js-system/db.js" type="text/javascript" charset="utf-8"></script>
</head>

I use jquery as a plugin, too...When I access the php drectly the page is working OK. Am I missing something?

I dont need to define the page as a template, as long as I find a way to make the page accessible to registered users of the site only

Improve this question
4
  • What are you trying to do here? That isn't really how a WordPress template works, typically. For one, you don't have any "WordPress"" in it at all. Is that what you are attempting?
    – s_ha_dum
    Dec 10 '12 at 15:10
  • i am new to wordpress. This is the standard way to link javascript/css to a web page
    – deckoff
    Dec 10 '12 at 15:58
  • I didn't say anything about Javascript. That was M-R below in an answer. What I said was that this isn't how a template usually works and asked if you were trying to build a template minus normal WordPress functions.
    – s_ha_dum
    Dec 10 '12 at 16:11
  • I have written a web-page which is a web-app (a simple card database using php, mysql, and styled with css3). The page works as expected when accessed directly. What I want to use Wordpress to provide password login and some static contend to the webapp itself. The only way I found how to do it was to add a page via template and configure user access
    – deckoff
    Dec 10 '12 at 17:37
1

Ok.

  1. M-R is right about using the full paths and not relative URLs. Make sure to do that.
  2. Create a page from wp-admin->Pages named whatever you want. The title will be used to construct the URL so choose carefully
  3. Assign this page to your template "Tarot"
  4. The page should be accessible, but to everyone, logged in or not.

To block users who are not logged in:

function block_tarot_template() {
     if (is_page_template('tarot.php') && !is_user_logged_in()) { 
         wp_safe_redirect(get_bloginfo('url').'/wp-login.php');
         // or possibly just include the login form
         // wp_login_form();
         // exit; // required if you want to include the form or the whole page will load below the form
     }
}
add_action('template_redirect','block_tarot_template);

Watch the file name for your template. That has to match. This is minimal code. If you are going to print the form you'd need to give it proper HTML context. you could do apply the same idea inside your template and just swap out the form and other content conditionally.

http://codex.wordpress.org/Function_Reference/is_page_template

http://codex.wordpress.org/Function_Reference/is_user_logged_in

http://codex.wordpress.org/Function_Reference/wp_login_form

Improve this answer
1
  • 10x! i will try this solution, too! I managed to do what I wanted by making a template which redirects to the main tarot page. The tarot.php is accessible blocks direct access via a session cookie. The redirect page is accessible by only logged users.
    – deckoff
    Dec 10 '12 at 20:32
0

I guess, your paths do not point to actual files. Try Firebug or similar to check where your browser is requesting and where files are actually reside. Your code should look something like following (assuming your theme name is "tarot" )

<link rel="stylesheet" href="<? site_url('wp-content/themes/tarot/css/master.css') ?>">

<!-- Jquery main DB -->
<script type="text/javascript" src="<? site_url('wp-content/themes/tarot/js/jquery-1.8.0.min.js') ?>"></script>
<script type="text/javascript" src="<? site_url('wp-content/themes/tarot/js/jquery-ui-1.8.24.custom.min.js') ?>"></script>
<script type="text/javascript" src="<? site_url('wp-content/themes/tarot/js/jquery.flip.js') ?>"></script>

<!-- Main custom javascript file -->
<script src="<? site_url('wp-content/themes/tarot/js/db.js') ?>" type="text/javascript" charset="utf-8"></script>

** It would be much better to use register scripts and enqueue them where required. For now, above code should be okay for you. :-)

Improve this answer
1
  • Also, you should use the WordPress core-bundled and registered versions of jQuery and jQuery UI, calling wp_enqueue_script( 'jquery' ) and wp_enqueue_script( 'jquery-ui' ).
    – Chip Bennett
    Dec 10 '12 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.