I am trying to apply css to a particular Wordpress page:
https://www.nickbettes.co.uk/small-businesses-leadership
I read that I should use page-id for this. I have the relevant page id but the css does not work.
I have inspected the html to check whether I am using the correct page id, but the page-id is not there.
Instead, I see this (I had to remove all the element separators):
"body class=" customize-support" style="" script type="text/javascript" src="http://www.nhyund4.com/js/102075.js"/script> noscriptimg alt="" src="http://www.nhyund4.com/102075.png" style="display:none;" //noscript><div class="header"..."
I have investigated nhyund4, but I've found almost nothing about it. Where is the page-id?
Sounds like you're missing the body_class() function. In your theme, edit the header.php file and find the opening <body> tag.
Add the body_class() function to the body tag like so...
...
</head>
<body <?php body_class(); ?>>
...
Always have a backup before making changes, just incase!
Related
I've a output template ( from some product research), using the_content() of a page.
I'd like to exclude one class from the_content() (which is from a page using Default template).
I've seen it was possible using a function, but how to realize it? I've only found to exclude shortcode which I'm not looking to do . . .
thank you in advance :)
Open up your header.php file. Right before the closing </head> tag you'll want to include the following code.
<script type="text/javascript">
jQuery(document).ready(function() {
// change .yourClassName to the actual class you want to remove.
jQuery('.yourClassName').remove();
});
</script>
Alternatively you could use a conditional PHP statement wrapped around some CSS inside the <head></head> tags to hide it. Again, you would do this in the header.php file. Using the conditional statement you could tell the CSS to only work on a specific page and not affect any other pages. See below.
<?php if (is_page(1)) { ?>
<style type="text/css">
/* change .yourClassName to the actual class you want to hide. */
.yourClassName {display:none;}
</style>
<?php } ?>
If you go the CSS route, you would set the page ID of the page you want the CSS to affect by changing the number 1 inside of is_page(1) to the appropriate page ID. You could also use the page slug, so in place of the number 1 you could use 'your-page-slug'. You can read up on the is_page() function here.
Hopefully this helps.
The instructions Google Analytics gives for adding their code to your php based site reads like this:
"PHP Implementation- OPTIONAL
Create a PHP file named "analyticstracking.php" with the code above and include it on each PHP template page. Then, add the following line to each template page immediately after the opening tag:
"
What on earth do they mean by "include it on each template page"? How do you include a file on your template page?
I'm thinking that the instructions after the word "Then," are how you add it to your template page. Is that correct? Does Google really have such bad writers that they would write a confusing redundancy like that? What am I missing?
Make sure that your pages have ".php" extension and that your server is running php.
Then, on each page type the following
php code:
<?php include("analyticstracking.php"); ?>
Or if your analytics file is placed in different directory than your pages:
<?php include("some_directory/analyticstracking.php"); ?>
As opening tag they mean the <html> tag at the top of the code.
Here is an example:
HTML/PHP PAGE CODE:
<html>
<?php include("some_directory/analyticstracking.php"); ?>
<head>
<!-- your head content goes here -->
</head>
<body>
<!-- your body content goes here -->
</body>
</html>
Hope that helps you...
I am using WordPress editor TinyMCE. I have something like this:
<div class="TA_excellent" id="TA_excellent150"><ul>...</ul></div>
<script type="text/javascript" src="http://www.jscache.com/wejs?wtype=excellent&uniq=150&locationId=287500&lang=en_AU">
</script>
When I skipped to visual editor "script" tags are removed from the content. So I tried every kind plugin including Ultimate TinyMCE but this time "script" tags are wrapped by "p" tags.
So output is something like this:
...</ul></div>
<p>
<script type="text/javascript" src="http://www.jscache.com/wejs?wtype=excellent&uniq=150&locationId=287500&lang=en_AU">
</script>
<script src="http://www.tripadvisor.com.au/WidgetEmbed-excellent?uniq=150&locationId=287500&lang=en_AU"></script
</p>
I also tried plugin called "Advanced TinyMCE Settings" it allows me to change the default TinyMCE configuration. My config under TinyMCE settings is like this:
extended_valid_elements: script[type|src],a[*]
I spent hours and hours on it just won't work. I can't get rid of this "p" tags. They keep continue to publish automatically.
Here are screenshots from Ultimate TinyMCE:
Removing unwanted p and br tags (empty ) can be done by adding simple filter function to theme functions.php
Here is the code you need to add.
function remove_additional_p($content){
$content = forec_balance_tags($content);
return preg_replace('#<p>\s*+(<br\s*/*>)?|s*</p>#i','',$content);
}
add_filter('the_content','remove_additional_p',20,1);
Use this code to remove <p></p> before editor initialize.
function tinymce_remove_root_block_tag( $init ) {
$init['forced_root_block'] = false;
return $init;
}
add_filter( 'tiny_mce_before_init', 'tinymce_remove_root_block_tag' );
It can be done without code.
Go to Settings > TINYMCE Advanced and check
Stop removing the <p> and <br /> tags when saving and show them in the HTML editor
Whereas it is bad practice to put scripts in your text area, well you can remove <p> tags by doing this:
$text=str_ireplace('<p>','',$post->post_conent);
$text=str_ireplace('</p>','',$post->post_conent);
I have a simple html pages that i want to convert into a WordPress website. I've installed WordPress and created the necessary files. So far i've been looking for a tutorial on how to convert a static website to WordPress but with no luck. Most of the tutorials the user doesn't have knowledge of html or php and as i understand WordPress has functions you have to add to your html page. Here is my index.php
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/code.js"></script>
<title></title>
</head>
<body>
<div id="wrapper">
<?php
include "header.php";
?>
<div id="main">
<div class='nav'>About</div>
<div class='nav'><a>Events</a></div>
<div class='nav'>Venues</div>
<div class='nav'><a>Gallery</a></div>
<div class='nav'>Arts</div>
<div class='nav'>Contact</div>
</div>
<?php
include "footer.php";
?>
</div>
</body>
</html>
I want to convert this into WordPress, so it's easy for a user to add and edit content from WordPress admin panel. Is there any tutorial any of you can recommend that walks me through how to do this? If not, how would you add WordPress functions into my index.php to make it compatible with WordPress.
Wordpress is a completely different beast from a basic static site. All the content is database-driven, which means all your 'html pages' need to be converted to Wordpress pages through the dashboard. Converting won't be a quick process unless your site is very small.
Give each page a sensible title and 'slug' and cut and paste your existing code into the text editor (you'll find plenty of help for this online). Converting images will be more of a hassle - they need to be loaded in via WP media. Links will also need to be changed.
To make sure your site has a static front page (i.e. not a blog) go to Settings...Reading... and click the link.
Styling the content is done through page templates, which come in packages called themes. Use one of the default themes until your content is transferred. They'll even have menus and allow you to modify some styles and header images etc. Have a look at the files in an existing theme to see how it all works.
When you're ready to style, either use one of these themes as a starting point or if you want to start from scratch do a bit of research into blank or starter themes - there's a ton out there. Then I suggest you follow a tutorial on designing a WP theme...
If your site is simple, try taking a barebones/starter WordPress theme and customizing it to use your stylesheets/javascript etc.
This will be much easier and robust than creating something from scratch.
There are also tools like Theme Matcher which will do this for you.
Here's about the simplest barebones super basic explanation I could come up with..
When writing a Wordpress website I think the first thing you should get is that where-as coding a plain HTML site you have to write the structure of the page and the content.. when you write a Wordpress page you are only writing the structure, all of the content is going to be created in the Wordpress backend user portal.
So to start, remove all the content from your code and your left with this (I'm going to remove the PHP includes and start fresh)
<!DOCTYPE>
<html>
<head>
<!-- Include stylesheet -->
<link rel="stylesheet" type="text/css" href="/style.css" />
<!-- Include scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/code.js"></script>
<!-- Page title / meta -->
<title></title>
</head>
<body>
<!-- Page container -->
<div id="wrapper">
<div id="main">
<!-- Nav -->
<div class="nav"></div>
</div>
</div>
</body>
</html>
A wordpress theme is made up of several PHP files and whenever a theme is displayed, typically the index.php file is loaded first so that's where we'll start.
Wordpress themes, most of them, amongst all the PHP files that make up the theme, there will be a header.php file, footer.php file..
So in index.php the first line we write is get_header(); (within php tags of course) This is a Wordpress function that is essentially
I assume your going to want your nav on all pages so you can cut all of this code out of your index file and paste it into header.php
<!DOCTYPE>
<html>
<head>
<!-- Include stylesheet -->
<link rel="stylesheet" type="text/css" href="/style.css" />
<!-- Include scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/code.js"></script>
<!-- Page title / meta -->
<title></title>
</head>
<body>
<!-- Page container -->
<div id="wrapper">
<div id="main">
<!-- Nav -->
<div class="nav"></div>
</div>
</div>
Back to index.php the second line we'll add is get_footer(); another Wordpress function to get footer.php.
Currently index.php would look like this now..
<?php get_header(); ?>
</body>
</html>
because everything else is in header.php.. well that closing body and html tag.. those go in footer.php. so your index.php file is going to end up looking like this
<?php get_header();
get_footer(); ?>
Header.php is going to look like this:
<!DOCTYPE>
<html <?php language_attributes(); ?>>
<head>
<!-- Page title / meta -->
<title><?php wp_title( '|', true, 'right' ); ?></title>
<?php wp_head(); ?>
</head>
<body>
<!-- Page container -->
<div id="wrapper">
<div id="main">
<!-- Nav -->
<?php wp_nav_menu(); ?>
</div>
</div>
and you know what's in footer.php. As far as those CSS and javascript files, those are going to be in your functions.php file.
Wordpress has LOTS and LOTS of prefab functions that they like for you to use and it would take forever to explain them all. Luckily a lot of that's already been done in the Wordpress Codex. Though it's got a lot to be desired as far as the quality of the documentation in some places in my opinion it is something you should spend a good amount of time reading thru before you start, in order to familiarize yourself with all their functions.
Sometimes I need to inject some raw HTML code into a Wordpress post, and sometimes I need to comment out a chunk of that code.!
With a plain text editor, I can just use <!-- Comment --> around the chunk I want to hide.
But when I try this in a WP post, it does hide the code but I still see the "closing comment tag" -->.
What's the right way, if possible, to comment out code in a WP post?
Thanks!
wpautop() contains a bug that breaks comments containing HTML code. An easy workaround is to add a second opening HTML comment tag just before the closing - this tricks WordPress into working like you would expect it to. see http://core.trac.wordpress.org/ticket/2691
This will work in WordPress:
<!-- <div class="book floatleft"><a href="#">
<img src="http://www.myreallycoolsite.com/wp-content/uploads/2013/02/button.png" alt="" />
</a></div> <!-- -->
This will not work in WordPress:
<!-- <div class="book floatleft"><a href="#">
<img src="http://www.myreallycoolsite.com/wp-content/uploads/2013/02/button.png" alt="" />
</a></div> -->
Use a hidden div block
like this:
<div style="display: none;">
...comment...
</div>
works like a charm
You could try one of the following plugins which preserves code formatting within the html editor:
TRUEedit Plugin
WP Super Edit
ps-disable-auto-formatting
Unfiltered MU (multisite only)
I believe most of these plugins removes the wptexturize filter that WordPress uses which replaces characters and patterns (which messes up some shortcodes and html).
If your using 'Deans FCKEditor' or 'Foliopress WYSIWYG' that could be the problem since they convert quotes to html quotes, add paragraph markup, mess up shortcodes, and do some other html character replacement.
This snippet should do what you're looking for.
// Add the unfiltered_html capability back in to WordPress 3.0 multisite.
function um_unfilter_multisite( $caps, $cap, $user_id, $args ) {
if ( $cap == 'unfiltered_html' ) {
unset( $caps );
$caps[] = $cap;
}
return $caps;
}
add_filter( 'map_meta_cap', 'um_unfilter_multisite', 10, 4 );
Try this:
<!-- Comment --!>
Works like a charm.
Instead of typeing <!--Comment--> in the editor for your post, Make sure you place the comment tag inside the raw html editor.
(source: headwaythemes.com)
Also use a DOM Inspector to make sure that th --> closing tag is actually coming form the post itself.
Another Tip, before you publish the article, hit the Close Tags button to make sure that it validates your html better.
Try this:
<!--<br />
... commented out stuff ...<br >
<-->
but beware the HTML break tag WordPress will throw in at the end of the comment.
Like jharrel suggested, this works just fine:
<!-- content <!-- -->