I'm trying to create a slider on the homepage of my Magento site. I am totally new to Magento and have someone else on our team coding most of that stuff after realizing how far into the deep end I jumped.
My issue: I'm trying to pull custom posts from WP (with the paid advanced custom fields extension) to display an image that will go into a slider.
I'm stuck at the most basic part - pulling in a list of Wordpress posts.
I created a new file: mytemplatedirectory/default/template/home/slider.phtml with
<?php $posts = $this->getPosts() ?>
<?php foreach ($posts as $_post) : ?>
<?php echo $post->getPostContent() ?>
<?php endforeach ?>
and I put this into the CMS page in the Magento admin:
{{block type="core/template" template="home/slider.phtml"}}
But not even the default post is showing up.
If anyone has any guidance that would be extremely helpful. The beginning steps are what are throwing me off but it would also be nice to have help pulling the custom post and the advanced custom field (although it seems that Fishpig's documentation makes this pretty simple).
Thanks in advance! Sorry for such an amateur question.
The block type you're using does not include the getPosts() method, which is the reason your call to this returns nothing. If you change the block type to 'wordpress/sidebar_widget_posts' then the call to getPosts will return a post collection object.
The following link explains a little bit more about how to include this block and what you can do with it:
Display WordPress Blog Posts on the Magento homepage
Figured this out with Ben's help (who I believe is the creator of the excellent Fishpig extension).
I created a custom post (with the Custom Post Type UI plugin for WP) and a custom field (with the Advanced Custom Fields plugin for WP).
On my Homepage in the CMS I added in the content area
{{block type="wordpress/sidebar_widget_posts" name="wordpress.widget.recent_posts" post_count="5" post_type="slider_home" template="wordpress/sidebar/widget/slider_home.phtml"}}
In that block, slider_home is my post type and slider_home.phtml is a new file I created that pulls the code from wordpress/sidebar/widget/posts.phtml but customizes it to my need.
Within the loop in slider_home.phtml I took out what was currently there and added:
<?php $image = $post->getMetaValue('image'); ?>
<?php $url = $post->getMetaValue('url'); ?>
<a href="<?php echo $url; ?>" target="_blank">
<img src="<?php echo $image; ?>" />
</a>
which is pulling in the custom fields I made in Wordpress. works perfectly and now my client will be able to update their Magento site through the Wordpress CMS.
Related
I am looking for some sage advice on how to best create a page/slug structure for a WP site I am building. It is a portfolio site that will showcase creative work. I have currently created several custom post types for things such as the portfolio/work items and for their associated clients and have created relationships between those items using the Advanced Custom Fields Plugin. All of this works great. What I am struggling with is how to create the best URL structure.
I have the following pages already created and working well:
/work/ - index page that shows all work regardless of client
/clients/ - list of all clients
I need to create the following pages:
/clients/client/ - this page would show all work associated with a specific client. Here is where I am struggling. I need help understanding how to use the page template system to set the correct page slugs. Can I use page slugs as part of my WP query? Can I simply query based on the custom post type? What do I name the page template file for this to work?
Appreciate any advice and/or examples anyone can offer. Thank you.
WordPress offers an easy mechanism to handle pages and posts as well that are being created and rendered. It is us who has to take up the challenge to do those wonderful designs and tasks that we need. Moving on to the following topic of page and slug architecture we shall discuss in detail.
First let us look onto the following thing.
Creating Page Template for Custom Posts Type
Ex: If you are creating the post type called news the WordPress system will look for the following structures.
single-{post-type}.php
archive-{post-type}.php
single-{post_type}.php
If your custom post type were 'news', and/or query_var = "news", WordPress would look for single-news.php to display the single or permalink of the post.
archive-{post_type}.php
If your custom post type were 'news', and/or query_var = "news", WordPress would look for archive-news.php to display the archive of posts.
If these files are not available in your Theme's directory WordPress will look for archive.php and single.php, respectively. If even these files are not present it will default to index.php.
Template File will be like this.
<?php
$args = array( 'post_type' => 'news', 'posts_per_page' => 10,'post_status'=>'publish','orderby'=>'ID','order'=>'DESC' );
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<h2><?php the_title(); ?></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
Hence from the above code you can display the Latest Posts from News category in the count of 10.
If you need the count to be infinite you have to change the post_per_page=10 to post_per_page=-1.
Hope so this reference and advice that i have tried to explain will be helpful for you. Still if you face any issues about my explanation comment over to my answer and i am there to help you.
I didn't go this exact route to resolve my question as I am using the Advanced Custom Relationships plug-in. My solution is somewhat similar to this: https://www.advancedcustomfields.com/resources/querying-relationship-fields/ - but your response was very helpful and got me going on the right track, thank you!
I am new to wordpress and trying to get my head around it. I figured that I can create a custom php file as
<?php
/*
Template Name: The Story
*/
?>
<?php get_header() ?>
<?php get_sidebar(); ?>
<div class="story_content"><?php echo get_option('story-content') ?></div>
<?php get_footer() ?>
and in the admin panel , I can add a new page and choose "the story" as the template , which will in turn , give me an URL as http://www.example.com/thestory
But for the life of me , I can't figure out how to have a directory structure in the website such as http://www.example.com/products/thestory
Can someone help me out here.
Thanks already!
You can achieve this with "Pretty Permalinks" enabled in WordPress, by simply creating two pages:
A Products page with a slug of /products
A The Story page that is a child of Products (i.e. The Story has a parent post: Products). You'd make this slug /thestory (it will automatically be appended to the parent slug: /products)
This can all be done from within the Dashboard Pages area, without editing templates.
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.
Where can I find a soucre that learn to create a Responsive One Page WordPress Theme so when I click on the menu item it scroll down.
Here is an example of what I want http://thememints.com/templates/?theme=Cingle%20WP.
I have had exactly the same question and after searching around found this post.
I was rather shocked to see the responses to this question. It seem to me like people are quick to answer questions without properly reading the question.
All the contributors have given solutions to responsive and parallax scrolling websites but not one has answered the real question.
It is not too broad, and it is not vague. All he is asking is how you go about creating a Single page theme in WORDPRESS.... no one gave any direction as to how to accomplish this.
Not sure why these answers got rated as usefull .
So after digging around with trial and error I found the following to answer the question as to how you go about to create a single page WORDPRESS theme.
One of the major aspect to understand is the Wordpress query-post function which allows you to post multiple page content such as home , about, service and content onto a single page.
To create the the menu structure to scroll to the different sections I found this tutorial to be usefull - create-a-single-page-wordpress-website
I hope this helps
As William Patton said this is a broad question but as far I can understand this may help :
http://www.designerledger.com/parallax-scrolling-tutorials/ for the one page theme.
and a basic start for wordpress development theme :
http://codex.wordpress.org/Theme_Development
Update : I found this awesome plugin that helps you create full screen pages
https://github.com/alvarotrigo/fullPage.js
EDIT 2016
Due to the many up votes at user3263807 answer I made a small/basic one page guide for wordpress. For css/js there are plenty good tutorials and plugins over the internet. Also I assume you are familiar with WordPress Themes.
First of all you should create a template file for your one page. Let's call it template-one-page.php. The template name, commented inside the file, is the name that will appear in Page Attributes -> Template when you creating a page inside admin panel. After that create a page, ie Home, and assign as template your template. If you want your page to appear as front page (when you enter mydomain.com this page will be shown) go to Setting->Reading->Front page displays->A static page and set as front page your page.
// File Security Check
defined('ABSPATH') OR exit;
/*
Template Name: One Page
*/
?>
Normally a one page has sections. So we want to decide what type of sections we want. It could be pages, child pages, posts, custom fields (like a repeater from ACF) etc.
<?php
$id = get_the_ID(); // The page id
$sections = get_posts(array('post_type' => 'page', 'post_parent' => $id)); // get all child pages
foreach ($sections as $key => $section):
?>
<section id="page-<?php $section->ID; ?>" <?php post_class('', $section->ID); ?>>
<h1><?php echo get_the_title($section->ID); ?></h1>
</section>
<?php endforeach; ?>
Or with a Loop
<?php
$id = get_the_ID(); // The page id
$query = new WP_Query( array('post_type' => 'page', 'post_parent' => $id) ); // get all child pages
if($query->have_posts()):
while ( $query->have_posts() ) : $query->the_post();
?>
<section id="page-<?php the_ID() ?>" <?php post_class(); ?>>
<h1><?php the_title(); ?></h1>
</section>
<?php endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
You can query what ever you want depending the need of your site.
you should take look at below link:
[1] http://www.1stwebdesigner.com/css/responsive-website-tutorial/
[2] http://www.1stwebdesigner.com/css/create-a-responsive-website-video-tutorial/
[3] http://readwrite.com/2013/04/16/10-developer-tips-to-build-a-responsive-website-infographic#awesm=~okrhufNGLHp1mh (Best one to keep points in mind while creating )
Thanks.
Here is full detailed video tutorial that deals with setting a one-page scrolling Wordpress website from any theme you want. Need to join - there is a free trial. This allows you to "peek under the hood" and understand the principle of how the other one page themes and plugins were created.
http://www.lynda.com/WordPress-tutorials/WordPress-Building-One-Page-Style-Site/169876-2.html
I have looked into several ready-made themes, such as Onesie and OneEngine, and found them a nightmare to manage on the back end, very user unfriendly. The content of the long home page with several sections in both themes is managed not through the Pages section, like one would assume, but through a different admin section in the Appearance folder, with none of the usual Wordpress interface controls. The tutorial above deals with it properly, with the real Wordpress Pages assembled by a custom loop on the front page and menus working in the same way as built-in Wordpress menus.
I used localscroll and scrollTo jquery plugin in my one page theme, it's working fine.
The plugins link:http://flesler.blogspot.com
After you imported the jquery and plugins files into your page, just call the function like below, then if you click a anchor link, the page will scroll up or down smoothly.
$.localScroll({
target:'body',
duration:1000,
queue:true,
hash:true,
easing:'easeInOutExpo',
offset: {left: 0, top: -55}
});
I'd like to implement a custom post retrieval page in wordpress. Basically, I'm using AJAX to call this page that will be passed a post ID and retrieve certain data from that post.
Note: please don't mistake this as a template question. I do not want a template for one single page -- I am looking to make this page query multiple different posts based on postID and return certain data from that post.
So I tried creating a page
<?php
$args=array(
'p'=>'77'
);
$friends = new WP_Query($args);
?>
<?php if ($friends->have_posts()) : the_post(); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php else: ?>
<p>Sorry, no posts are available.</p>
<?php endif; ?>
But this does not work since it is not loading in the wp functions to handle the query.
Thanks in advance for any help!
You have to include the wp-blog-header.php file. If the page you are creating is in your theme's folder then you would put something like this at the top of your code
<?php require_once ('../../../wp-blog-header.php');?>
I think I guess what you are trying to do, and it sounds like you are going about it the wrong way. Do not make a 'new page' in the admin interface. What you want to do is serve up a file (JSON, XHTML fragment, whatever) to your Javascript and include in it WP data, right? I know that problem, having used it in some of my plugins.
There are two techniques:
(1) This is what you need to do: make a new plugin (just a loose php file in wp-plugins with the same format header as the other plugins in there). Write your function along these lines:
function mydatapage(){
if (...$_SERVER['REQUEST_URI'] == the one I am using ...) {
$args=array(
'p'=>'77'
);
$friends = new WP_Query($args);
if ($friends->have_posts()) :
the_post();
the_title();
the_content();
else:>?
<p>Sorry, no posts are available.</p>
<?php endif;
die();
} //else do nothing and leave WP to serve the page normally
}
//Crucially:
add_action('init', 'mydatapage');
What that does is do a lookup when pages are loaded to see if the url matches the one you want to hijack and use to send your custom data. If it is, you send the data/file/whatever you feel like and exit (die).
Give a shout if you want more detailed syntax. It is a bit messy, but works well.
(2) Directly call your plugin file. WP will only handle files that do not already exist, and leave the rest to Apache. That means you can make a plugin file and call that directly using the .../wp-plugin/myfile.php url. You would need to include some of the WP core files to get things like WP_Query to work. It is marginally more fragile a method.