The default rendering of the h1 element of a wordpress post looks like this:
<h1 class="entry-title"> XYZ </h1>
I would like to add the id attribute to the h1 element with the value of the post's title. The result should look as follows
<h1 id="XYZ" class="entry-title"> XYZ </h1>
I have already looked through many posts here, but couldn't find an answer to my question. Shouldn't there be a simple filter for functions.php to override the rendering of the h1 element?
Depending on where you are pulling the single post template, you can modify the output like this:
<h1 id="<?php echo get_the_title(); ?>" class="entry-title"> XYZ </h1>
Look at the single.php file and see where you are loading the template for displaying single posts. The above should run inside the WordPress loop.
Also get_the_title() pulls the title without formating, what you are looking for is probably the post slug.
Related
I want to use the tags of a post in JavaScript. To get the tags I was originally using something like the following:
<article class="post" data-tags="{TagsAsClasses}">
This worked fine up until I needed to use special characters like | which becomes a _ with this property and gives me the wrong tag.
So now I need to do something like (using the {block:Tags}):
<article class="post" data-tags="{block:HasTags}{block:Tags}{Tag}{/block:Tags}{/block:HasTags}">
Yet I foresee problems if {Tag} ever has a double quote in it.
Is there any way I can keep the data-tags attribute and still use {block:Tags} to get the real tag?
I have come up with a solution that involves adding and then reading a bunch of markup but I just don't like it as much.
<div class="postHiddenTags" style="display:none;">
{block:HasTags}
{block:Tags}<div data-tag={JSTag} data-tagURL={JSTagURL}></div>{/block:Tags}
{/block:HasTags}
</div>
If you need to get the tags in JavaScript, you can define them in a <script> tag from the start. In your theme HTML:
<script>
var tags = {};
{block:Posts}
{block:HasTags}
tags[{JSPostID}] = [
{block:Tags}
{
"tag": {JSTag},
"tagURL": {JSTagURL},
},
{/block:Tags}
];
{/block:HasTags}
{/block:Posts}
</script>
You have a global JavaScript dictionary, from a post's ID to its list of tags (and tag URLs). The "JS" prefix is to output the string wrapped in quotes.
In each of your post elements, add an attribute for the post ID:
{block:Posts}
<article data-id="{PostID}" class="post"></article>
{/block:Posts}
You can have {block:Posts} multiple times in your template, although the theme documentation does not mention this.
Whenever you need a post's tags, get the post ID from its DOM element, then look up the ID in the tag dictionary. This way you don't have to worry about escaping/un-escaping special characters.
<!--First page-->
Note
<!--page2.html-->
<a name="note">
<article>
<div>
.
.
.
</div>
</article>
</a>
i have tried putting "note" as id of article tag as well as of main div tag under article tag. Also i have tried wrapping main div tag in anchor tags. Still it displays the whole page2.html on click. Can anyone help?
The name attribute is not supported in HTML5. To Link to an element with a specified id within a page
Try using this:
<!--page2.html-->
<a href="#note">
It will show the whole page, but its going to your specific location in that page.
Take a look at this page:
http://www.w3schools.com/tags/att_a_href.asp
I'm working on a wordpress website.
I would like to know how to add a new div id or class in the_content loop for posts. That is, I don't want to add any html in the post edit area of the backend; what I want is to actually create a new div or class in the post, so that I have an img and then the text wrapped within a div.
In my posts I need to wrap the text paragraphs in a div, like so:
<div class="entry-content">
<p><....img...></p>
<div class="text">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</div>
The div "text" is what I need to include. Could someone help me with this? I imagine I have to add something in the loop in function.php
thanks!
Generaly, you do not edit post content in the template, you just display it.
So to do this, you need to use Format option to add a "Title 1" or anything content related style to some text in the visual editor.
If you really want to add specific tag, use shortag annotation (or find a plugin to do this)?
If you just wqant to have an image asigned to a post, check the thumbnails feature of wordpress that let you get the post image from outside the content.
BTW : you should consider posting wordpress question on https://wordpress.stackexchange.com/
Here is the cake code..... notice the $email_body
<?php
$this->Email->reset();
$this->Email->delivery = 'smtp';
$this->Email->smtpOptions = array(
'port'=>'465',
'timeout'=>'30',
'host' => 'ssl://smtp.gmail.com',
'username'=>'noreply#example.com',
'password'=>'a_password_you_cant_see',
);
$this->Email->sendAs = 'html';
$this->Email->template = 'default';
$this->Email->from = '"NO-REPLY" <noreply#example.com>';
$this->Email->to = "rakib#example.com";
$this->Email->subject = "test PHP html email";
$email_body = "Hello message body
<hr />
This is rakib
<br />
<table width=\"100%\" bgcolor=\"#ff0\">
<tr>
<td>
In a table
</td>
</tr>
</table>";
$this->Email->send($email_body);
?>
After sending this email out, when I view the Original mail contents via the Show Original button from GMail's drop down menu [at top-right corner of an email], here is what the HTML looks like:
<!-- Starting to render - email/html/default -->
<p> Hello message body</p>
<p> <hr /></p>
<p> This is rakib</p>
<p> <br /></p>
<p> <table width="100%" bgcolor="#ff0"></p>
<p> <tr></p>
<p> <td></p>
<p> In a table</p>
<p> </td></p>
<p> </tr></p>
<p> </table></p>
<p> </p>
<!-- Finished - email/html/default -->
<p> and </p> tags got included at EVERY new line..... why is that? Using CakePHP 1.3
When doing anything with emails, try and stick to the MVC principles. By writing your email's HTML (view) in what is likely to be a controller can make things a little messy and tends to bloat your code (e.g. composing markup in your controller).
Use templates to author the structure of your email and then use view variables ($this->set(...)) to apply specific values to it (See documentation).
I'm afraid I don't know why <p> tags are being inserted but I suspect it has got something to do with the newline character \n which is implicitly inserted each time you hit the return key.
In summary, move your markup to the template and everything should be better.
If you're directly setting the body of the email, CakePHP expects the text passed to be plain text.
By setting the type of email to HTML (Email->sendAs = 'html'), CakePHP will create a HTML version of your plain-text body by converting new-lines to <p> tags
In your case, you pass HTML as message body, but CakePHP assumes it is plain-text, therefore converts new lines to <p> tags as well
Read the documentation here: Sending a basic message
note
Although this should explain your question, please look at the answer that Sam provided as that will give you an answer on how you should send an HTML email!
I found the solution to this... I needed to create my own default.ctp file in my app folder at app/views/elements/email/html/default.ctp and put the following in the file
<?php
echo $content;
That solved my problem. Please look below for the analysis of this problem.
[P.S. I did the same thing for app/views/elements/email/text/default.ctp for text based mails to print correctly]
The problem was that, since i didn't declare any default.ctp element in my own app folder, cake was falling back to the view element in its own core lib folder at cake/libs/view/elements/email/html/default.ctp . Over there, this is what it does.
<?php
$content = explode("\n", $content);
foreach ($content as $line):
echo '<p> ' . $line . "</p>\n";
endforeach;
?>
That's where the <p> tags were coming from at every new line. Thanks to #thaJeztah's answer. In order to avoid this from happening, i needed to create my own default.ctp element in my app folder that would eventually override the default.ctp element in the core's lib folder.
That's one bad case scenario.
I am currently tying to convert a HTML template to a WordPress theme. We need to assign two classes to the existing <h1> tag, which currently has a class of entry-title. We would like to change the h1 tag for: <h4 class="heading col">.
Can anyone tell me how to do this? Where is the code contained that creates this within WordPress?
Thanks!
You can change the markup of your H1 tag inside the header.php file of your theme, some more information on the structure of wordpress themes available on the link below.
http://themetation.com/2008/07/17/how-to-create-wordpress-themes-from-scratch-part-3a/