I am quite new to creating websites with WordPress so I might ask a question which is quite straightforward but I could not find any suitable tutorials/answers to guide me.
I want to create dynamic text elements which I can edit within Wordpress. I have created a full website in HTML, CSS, and Javascript and I converted it to Wordpress pages.
Let's have a look for example to my about page:
about.php
<?php
get_header();
// Template Name: About
?>
<div class="row fullwidth">
<div class="col-md-6 col-sm-6 about-section-right">
<h2>Titel example</h2>
<p>A very long text.....</p>
<p>Another very long text</p>
Contact <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
</div>
</div>
<?php
get_footer();
?>
Now I want to be able to edit the title (<h2>) and text (<p>) and hyperlink (<a>) text in Wordpress. So that I can change the title etc.
I tried to use Advance custom fields by calling: the_field() or by using a shortcode but the text did not show up on my page.
So my question is: is Advanced custom fields the best way to do this because I can not make it work and are there other ways of achieving editing text within Wordpress.
For pages just use the WordPress loop: https://codex.wordpress.org/The_Loop
<?php
get_header();
if(have_posts()):
while(have_posts()): the_post();
?>
<div class="row fullwidth">
<div class="col-md-6 col-sm-6 about-section-right">
<?php the_content(); ?>
</div>
</div>
<?php
endwhile;
endif;
get_footer();
?>
You create a page "About" in the backend in "Pages" and here you go. All contents within the_content(); are created by the WYSIWYG editor of the page.
Custom fields are for adding any custom or specific information to a post or page.
Most probably you do not need an extra template file for your about page and you can use a page.php file for all pages.
You can conditionally include data depending on custom fields and/or the page you are on.
Read more about custom fields here:
https://codex.wordpress.org/Custom_Fields
... and about conditional tags here:
https://codex.wordpress.org/Conditional_Tags
It will help you understanding it.
Related
I'm starting with an example because I do not know exactly how it is named.
Let's consider an HTML item code from a shop.
<div class="item">
<div class="item-title">{$title}</div>
<div class="item-price">{$price}</div>
<div class="item-description">{$description}</div>
</div>
I'm using PHP, JavaScript, and HTML in my projects, and now I'm generating the HTML template, adding PHP code in my file like below:
$MySQL //request;
$Array // data from database
while($rowArray = mysqli_fetch_assoc($Array)){
<div class="item">
<div class="item-title"><?php echo $title ?></div>
<div class="item-price"><?php echo $price ?></div>
<div class="item-description"><?php echo $description ?></div>
</div>
};
This is not the best solution because I have algorithms on each page, and are difficult to manage. There is an option to use the HTML as a template (not created in the javascript as a new element) and insert it in my main page using javascript and fielding also the terms with JavaScript?
I'm sorry if my request isn't clear, I'm learning on my own and I'm 100% sure there is on internet tons of information about this, but considering that I do not know how it is named, I could not find it.
Have a great day.
I have this simple contact form set up and, since I don't have the development time at this moment, I set this one up using jQuery verification instead of AJAX. This works fine.
But now I would like to have the page scroll down when there are errors in the form. I've downloaded jquery.scrollTo.js and added it to my header.php file. And I have the following script for the scrollTo:
if ($("#front_page_contactformulier span").hasClass("error")) {
$('body').scrollTo('#fp_content_006',4000);
}
Now the weird thing is, when the #front_page_contactformulier span has class error it scrolls past this element (like literally to the bottom of the page).
If I change the script to another element:
if ($("#front_page_contactformulier span").hasClass("error")) {
$('body').scrollTo('#fp_content_005',4000);
}
It works?
I cant for the life of me find out why this is happening? Here is my full code:
HTML
<section id="fp_content_006">
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<article>
<?php if( get_field('koptekst_6') ): ?>
<h2><?php the_field('koptekst_6'); ?></h2>
<div style="display:block;height:2px;width:30px;background:#f60;margin-left:auto;margin-right:auto;margin-bottom:15px;margin-top:15px;"></div>
<?php endif; ?>
<?php if( get_field('content_koptekst_6') ): ?>
<?php the_field('content_koptekst_6'); ?>
<?php endif; ?>
</article>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="row">
<div id="front_page_contactformulier">
<span class="error">Error</span>
</div>
</div>
</div>
</div>
</section>
CSS:
#fp_content_006 {
position:relative;
margin-bottom:90px;
text-align:center;
margin-top:90px;
}
jQuery:
if ($("#front_page_contactformulier span").hasClass("error")) {
$('body').scrollTo('#fp_content_006',4000);
}
Here is a fiddle, and the super weird thing is, it works here.
Check if your jquery.scrollTo.js is included properly in header.php file and remember this from PHP documentation:
Remember that header() must be called before any actual output is sent, either by normal HTML tags, blank lines in a file, or from PHP. It is a very common error to read code with include, or require, functions, or another file access function, and have spaces or empty lines that are output before header() is called. The same problem exists when using a single PHP/HTML file.
You can find documentation HERE
According to the JS you posted, let me break it down for you
if ($("#front_page_contactformulier span").hasClass("error")) {
$('body').scrollTo('#fp_content_006',4000);
}
The first argument should be the Jquery Object and you just need to wrap your selector with jquery object like this:
$('body').scrollTo($('#fp_content_006'),4000);
As per documentation provided here, you have plenty other ways to scroll instead of selector.
You can find the demo here
Also would like to mention, 4000 is the duration of animation which seems to be pretty high, i would recommend it to be 300 to 800.
There is a part in my website where the last 6 posts are reviewed and this is the HTML code for it:
<div class="latest-posts">
<div id="latest-posts-title">
<p>My Website's latest posts</p>
</div>
<div id="latest-posts-pictures"> <img src=""width="190px" height="190px" alt="latest-posts-pictures"> </div>
<ul>
<li>Post1</li>
<li>Post2</li>
<li>Post3</li>
<li>Post4</li>
<li>Post5</li>
<li>Post6</li>
</ul>
I want to add a feature to make the user able to see the post's picture when he/she hovers the post's link in the code above.
I've used this PHP code and it works well:
<ul>
<?php
$my_query = new WP_Query('showposts=6&cat=my_category');
while ($my_query->have_posts()):
$my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li><?php the_title(); ?></li>
<?php endwhile; ?>
</ul>
But this code does not contain the picture part that I want.
Do you know how can I make this feature available for my users?
Please note that it is not important for me to use PHP or JavaScript, all I
want is to make it possible for the user to see the post's picture
when he hovers its link.
You can display featured image of the post using following code:
// Check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
You can check this link for more information.
https://developer.wordpress.org/reference/functions/the_post_thumbnail/
So I am trying to edit an email format pulled from a database in a summernote div.
That is all working just fine. Except when I go to load the page this is all on, that pages takes the css styles of the style tags in the email. The following code I have is as follows:
<div class="tab-pane" id="emails">
<div class="form-group">
<label class="control-label">Default Email Template</label>
<?php echo form_textarea('email_template', $this->settings_m->get_setting('email_template'), 'class="form-control summernote"'); ?>
</div>
</div>
<script>
$(document).ready(function() {
$('.summernote').summernote();
});
</script>
How do I escape all tags within the email but still maintain the look of the email inside the summernote div? I want to do this so the email maintains it's appearance, as well as the page it sits on.
So I can't find myself an answer or explanation for a problem / question I have.
What I want to achieve is pretty complicated. For illustrating, here's a JSFiddle - http://jsfiddle.net/GXaeL/3/
Could someone explain me, is this even possible to show the content of first row posts in one div below them. Same thing for the second row of posts etc.
I myself have had in mind that:
To combine somehow Tabs and Accordions?
This is purely an CSS positioning problem?
This is far more complicated than just accordions and CSS?
Since now, I have a PHP code, that creates a grid of posts. .posts are floated left and the row cleared when it hits 3.
<div class="post">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/fallback_image.jpg" alt="<?php the_title(); ?>" />
<?php } ?>
</a>
</div>
<?php
if($c == $bpr) :
?>
<div class="clr"></div>
<?php
$c = 0;
endif;
?>
<?php
$c++;
endwhile;
?>
<div class="clr"></div>
May-be someone can push me to the right path on this?
I'm not exactly sure what your preferred implementation would be, so I'll offer a couple options.
The first option is similar to you put together on jsFiddle, except I wrapped the "trigger" <div> tags in a <div> of their own and added a "content" <div> tag to the single "content" <div> tag that you were sliding down and up... easier explained in code:
<div id="row1" class="item-info">
<div class="item">item-1</div>
<div class="item">item-2</div>
<div class="item">item-3</div>
<div class="item">item-4</div>
</div>
<div id="contentRow1" class="item-info" style="display:none;">
<div class="item-content">content div for item-1</div>
<div class="item-content">content div for item-2</div>
<div class="item-content">content div for item-3</div>
<div class="item-content">content div for item-4</div>
</div>
For this solution, the jQuery code you were using wouldn't need to change.
The second option is a bit more complex, but it allows each answer to be displayed individually rather than having to be displayed with all the other answers in the row.
Admittedly, there may be a more elegant, or jQuery UI-focused solution, but that's fine... I'll learn from that, too.
For now, I'll offer the details of Option 2 on jsFiddle, which I forked from what you offered in your question.
Let me know if you have questions, and I hope this helps.