Custom Wordpress Gutenberg block not rendering on front end - wordpress

I have written a custom Wordpress Gutenberg block but it is not showing up on the front end.
I can edit the page and save. The data is successfully stored in the database.
However, when I refresh the front end the output does not show.
I am using PHP to output the data:
function theHtml($attributes)
{
if (!is_admin()) {
wp_enqueue_script("spacerPanelScripts", plugin_dir_url(__FILE__) . 'build/front-end.js', array("wp-element"), '1.0', true);
}
ob_start(); ?>
<pre style="display: none;">
<?php
echo wp_json_encode($attributes);
?>
</pre>
</div>
<?php return ob_get_clean();
}
But when I check the source code of the front-end, I can't see any pre tags being output for this block.
Just for clarity, I have other custom blocks that are working just fine: outputting the pre tag with data, and rendering on the page.
I don't know why this is happening and I have no idea how to go about diagnosing this (I'm new to WP and custom blocks). All I can say is that I have created this block in exactly the same way I have created my other custom blocks and I'm not getting any errors.
Any help with this will be much appreciated.

Related

Wordpress: Implement basic HTML form functionality to retrieve data and visualize the results

I have experience in HMTL/PHP but I cannot understand how someone could implement this basic functionality in Wordpress. I could not find an article or web page on their website or by searching through the internet.
I want to create a basic html form, pass some data as select queries in a database and visualize back the results paginated.
In traditional PHP we are using "action" in order to send the form data through POST or GET to the action page and then with some PHP code we can fetch the data and visualize it with tables etc.
I cannot understand how to do such a thing in a wordpress page. Where the action parameter should point to? How could I implement this basic functionality in WordPress?
Please could someone help?
This is the mode to develop a separated .php file which uses your wordpress theme and can access to almost all wordpress functions:
<?php include(’wp-blog-header.php’); ?>
<?php get_header(); ?>
<!– Your code here –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Then you can use all WordPress functions cited here: http://codex.wordpress.org/Function_Reference
You can save this file anywhere, but be sure to insert correct path to wp-blog-header and there must not be any prohibiting .htaccess
This is the way to insert php code into a wordpress post:
You have to use this plugin http://wordpress.org/plugins/allow-php-in-posts-and-pages/
Then create a post and use [php] [/php] to insert your php code and open it. Look at the address bar. This it the URL to access this post. Use it as action parameter in your form. Then control $_REQUEST[] in your php code to extract parameters received from your form.
Now you can control this post as any other normal wordpress post from the wordpress admin panel.
You need to create custom wordpress templates for pages in your theme. Here i use templates
1.form-page.php --- with template name "Form-page-template" and
2.form-page-action.php ---with template name "Form-page-action-template"
form-page.php
<?php
/*
Template Name: Form-page-template
*/
?>
<?php get_header(); ?>
<form method="post" action="http://yourdomain.com/form-page-action/" name="input-form"/>
<!-- form contents -->
</form>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
You just save this template inside your theme : location => like wp-contents/themes/your-theme/form-page.php . and this will add Form-page-template in your theme .Now create a page inside from wordpress dashboard through pages->addnew ,here i give page name "form-page" and select template for page from right pannel,here we need to select "Form-page-template" that we created early.
Now we have the page url :: http://yourdomain.com/form-page/ where we can see our form,now create form-action-page.
2.form-page-action.php
<?php
/*
Template Name: Form-page-action-template
*/
?>
<?php get_header(); ?>
<!-- Your action page contents goes here -->
<?php
//getting input etc.. you need to do
$input = $post['input'];
?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Now you need to save this template inside your theme as above, Create a new page for this template as said above here i creating a page "form-page-action" with template "Form-page-action-template" so here i get a page url for our
action page like :: http://yourdomain.com/form-page-action/ , and you need to use this url as the action url in your form page.and this way you can add your form action page inside wordpress theme.
You can edit the contents of these page inside from wordpress like=> Appreance -> Editor , select the templates to edit.

Wordpress Advanced Custom Field - Field Not Displaying

I am building an artist directory page which displays all the artist pages as thumbnails with captions.
I would then like it so that when you click on one of the thumbnails it takes you to that page and shows the various fields ACF.
However, it only shows the title and I cannot get it to display the bio field at all!
<h1><?php echo $post->post_title; ?></h1>
<div id="artist-bio">
<?php the_field('artist_bio'); ?>
</div>
first, it's a good practice to check if your fields have been set in the first place. You can test like this:
if (get_field('artist_bio') {
the_field('artist_bio');
} else {
echo "Artist bio has not been set";
}
If it's claiming that it hasn't been set, yet you're sure it is, then there's probably an issue with the loop. Are you inside the default loop, or are you running a custom query? In the latter case you would need to modify your command like so: the_field('artist_bio', $post->ID).

Wordpress Title Inside Header

I'm tyring to change how the title works within the header.php file on Wordpress. At the moment I have it so it will display out the name of each page the user is on, which works well, apart from on pages that load blog posts.
I'd like it set so the "title" element within the header.php file can cope with custom names too i.e. instead of loading the name of the latest blog as the title when you visit the blog page I want it to just say Blog.
I decided to create my own variable and then using header check to see if that has been set, but I can't get it to work, placing it either before or after the call to the header file.
index.php
$header_title = "Blog";
get_header(); ?>
Then inside the header.php file I have the following code.
<title>
April Kelley |
<?php if (isset($header_title)) {
echo $header_title;
} else {
the_title();
}?>
Now to my mind this should work, so where am I going wrong?
PS. I only intend to use this $header_title variable on certain pages like index.php and seach.php where the pages pull in the blog posts themselves, so will isset still return false is the variable cannot be found?
A proper way of doing this is to use the_title filter, you don't need to modify template, e.g. :
function my_title($title, $id) {
if (is_home())
$title.= ' | Blog';
return $title;
}
add_filter('the_title', 'my_title');
If you really want to use your own var, you should read this : How to use own php variables in wordpress template?
replace
the_title();
as
echo get_the_title()
hope this work for you

wordpress <!--more--> not rendering a link

I am using the <!--more--> tag in my wordpress copy to create an excerpt from the main content and also echo a link, however it is totally disregarding this tag and just posting the full article, below is hope I am implementing it in my templates,
<?php the_content("Read more about this article..."); ?> am I doing something wrong? Currently it is showing the while post when I use the above code, however it is my belief that it should only only show everything above the <!--more--> tag?
As per the official WordPress support site:
From the use of your PHP code, it looks like you want to use the more tag on pages. More works with blog posts but not pages. Please add the following code to your document above your PHP line you provided to make it work:
<?php
global $more;
$more = 0;
?>
Also, be sure that you are not simply in preview mode and that you have actually published the article and previewed it:
[T]he more tag is not displayed in post previews, since previews display
posts in entirety, but the more tag will appear once the post has been
published.
Perhaps you are using custom page template to display archives. "More" tag doesn't work in pages. If you want to turn it on in Pages...
<?php the_content("Read more about this article..."); ?>
you should use the code like this if you wanna show the to work in a page
<?php
global $more;
$more = 0;
the_content("Read more about this article...");
?>

Add php element to custom page in Wordpress

I'm trying to customize a wordpress page to include an iframe which give the users a link to there download. We're using wordpress 2.9.2 with the Thesis theme 1.51. I've been trying to use thesis hooks but appears that the php is stripped from the output. Help? Suggested alternatives?
Code from custom_functions.php:
function add_ejunkie_download_link () {
is_page('slug-url-of-page') {
?>
<?php
echo '<iframe src="https://www.e-junkie.com/ecom/rp.php?noredirect=true&client_id=CID&txn_id=' . htmlspecialchars($_GET["txn_id"]) . '" width="100%" frameborder="0" height="50px"></iframe>';
?>
<?php
}
}
remove_action('thesis_hook_custom_template', 'thesis_hook_custom_template');
add_action('thesis_hook_custom_template', 'add_ejunkie_download_link');
Though not as elegant as custom hook in custom_functions.php, Thesis Open Hook WordPress › Thesis OpenHook « WordPress Plugins is an easy way to add hooks with executable code in them.
Why the remove_action call? I really don't think you need it.
The PHP can't be stripped from the output, because it's just that... PHP. It's parsed at runtime, so it's not stripped, it's executed.
I'm guessing you just want to print the iframe when Thesis calls the thesis_hook_custom_template hook?
Have you double checked this hook is actually getting called, and that it's getting called where you expect it to?
Then try simplifying your hooked function with this;
function add_ejunkie_download_link() {
if (is_page('slug-url-of-page')):
?>
<iframe src="https://www.e-junkie.com/ecom/rp.php?noredirect=true&client_id=CID&txn_id=' . htmlspecialchars($_GET["txn_id"]) . '" width="100%" frameborder="0" height="50px"></iframe>
<?php
endif;
}

Resources