I'm pretty new to WordPress and building a site that is using a custom template. The template includes a large banner at the top which is uploaded via the page's "featured image".
I would like to add the page title on the top of this image(which is not an issue) but be able to specify if the title is positioned left or right(maybe a dropdown menu selection) when creating the page.
I've seen many suggestions for similar functionality using the plugin Advanced Custom Fields, but I'm unable to find a solution that doesn't involve an additional plugin.
Is there a reason why I can't just add in the functionality I need? Adding a plugin just seems a little overkill to me for such a small feature.
UPDATE:
Ok, after some poking around I found that there's a "custom fields" option that was not checked in the "screen options". My understanding is that these fields work as key value pairs that can be accessed in the template using get_post_meta($post_id, $key, $single); or a more specific example get_post_meta($post->id, 'my_dropdown_key', true);. I will test it out and report results.
Yes you can use the custom fields by checking from the top bar of the WordPress page admin section. However, this is not a good solution as it will likely be confusing after you have multiple custom fields which is sure.
You can use the custom meta box function for this and add the functionality to your page which is easier done through a plugin called advanced custom fields which you already seem to know.
So, if you don't want to use the plugin instead you want to do it custom then there is a function callend add_meta_box. This function allows you to add a seperate box on a specific post_type.
For Quick Tutorial: https://www.sitepoint.com/adding-custom-meta-boxes-to-wordpress/
Hope this gives an overview on meta boxes. Thanx.
For those also learning how to do this, you must enable "custom fields" from the "screen options" in the top right corner of the admin screen. You can then create fields based on key value pairs and retrieve them using the get_post_meta($post_id, $key, $single) function.
For example, you can create a new custom field with the key "blue_text" and value " 'color: blue;' ". You can then access this value and apply the style in the markup like so:
<h1 style=<?php echo get_post_meta(get_the_ID(), 'blue_text', true); ?>>
This text is blue!
</h1>
This obviously is not the dropdown that I had originally described, but it is a simple way to add styles to a specific page in a template using custom fields with no additional plugin, so this works for me.
UPDATE:
The accepted answer using meta boxes is a much better solution and should be considered before this route.
Related
I am currently attempting to configure the settings of attachments to make it required and only one attachment attached to a post but all my changes did not have any good results.
I have looked into adding an action to attachment_register function and some documentation about attachments in Wordpress but still no positive results.
Personally, I would go with the ACF (Advanced Custom Fields) plugin to accomplish this.
You can use the plugin add a new required media upload (picture/file) meta field for posts.
In the settings for this new Custom Field group, you also use the plugin to remove the default "featured image" field from the edit post screen, to force the user to use your new required media upload function.
All that said, you will probably need to make adjustments to your theme template files to use the ACF functions to display the data on your site. This will probably be pretty straight forward as long as you have ability to alter you theme template files.
Hope that helps!
Building on Mike C's answer in regards to using ACF (Advanced Custom Fields) with a step by step walkthrough of how to achieve such a thing.
Install the Advanced Custom Fields Plugin
Once Activated you will see a new section in the Wordpress Left Menu
Click Custom Fields
First we need a field group, click Add New
Name this something relevant such as "Page Attachment"
Now Click Add Field and Fill out the fields, example below:
Field Label: Upload Attachment
Field Name: page_attachment
Field Type: File
Return Value: If you want someone to click a link to download, select File URL
Scroll Down To The Section Titled Locations
You mentioned that this should be on posts so I would recommend the below selections:
Post Type -> Is Equal To -> Post
Click Save/Update
Go To A Post, you will now see a button that reads Add File, you cannot update/create a post without having a file attached.
This is the admin work completed now we need to make the file appear in the post.
Now if you want the file to appear at the end of the post, under the header or even in the sidebar that is fine. Simply add the following code:
<p><a href="<?php the_field('page_attachment');?>" title="<?php the_title();?>">
Download Attachment
</a></p>
Obviously this is just a link that it echos, so this could be added to an image to make it seem a little more stylish, it's up to you. But this is the simple way of adding a file.
Now if you wanted to add this into the page content midway, you would either need to make a shortcode function to display it. Or you could add something like:
Download Now
And then add the following to the bottom of your post:
<p id="attachment"><a href="<?php the_field('page_attachment');?>" title="<?php the_title();?>">
Download Attachment
</a></p>
This means, whenever some clicks on the link that takes them to #attachment, it will jump them down to the bottom of the post where the download link is.
Any questions, let me know.
I'm working on a project where I want to display product's image and customs attributes from Woocommerce.
I already set attributes like this
I want in my php code display all the attributes (title et terms).
I already try <?php $product->list_attributes(); ?>. It works fine but data are displaying in <table>. I want to customize the display.
Thanks for your help !
Whenever I get stuck with a custom method like this in WooCommerce, I try to resort to the docs to see what is going on.
If you inspect the source for this method, you'll find that it's actually using a custom template single-product/product-attributes.php to output this table you're seeing.
In order to change the output, you have two options:
Override the template via your theme
Observe single-product/product-attributes.php and use the information there to write your own custom loop in your original template.
The second option means that you'll likely use the get_attributes() method, instead of list_attributes().
I am creating custom post types in WordPress using the "Types" plugin. Those post types are not supposed to have a post page associated with them that the user would navigate to by default when clicking a particular post link. They are supposed to be merely titles that I am displaying in a grid and that should link out to separate sites. Every post title has an individual link associated with it. I am styling those post titles using the "Grid Element" creator of the "Visual Composer" plugin, so I can set which attributes of the post I want to display (in my case only the title).
When I am creating the post type, I am adding a custom field for the link url that I can then set when I create the individual post. However, I am not seeing an option to set that custom link to be the link for the post itself. I can add the link as a separate UI element of the post but I want the post title itself to be the link. Is this possible and how?
Very possible, but you will have to do some coding of your own, rather than relying on visual composer. Within the template you are using, in the loop that pulls the posts, you need to grab the meta data from that field for the current post:
<?php
// loop stuff here...
$link = get_post_meta(get_the_id(), your-key-here, true);
echo '<p>'.the_title().'</p>';
// other loop stuff...
?>
In the above, your-key-here refers to the name of the custom field you've set up for the link that gets set by the post author. The above also assumes you know enough about WordPress to know where you need to edit this code in, in the template. The code does not check for empty values and handle with a fallback, so yes, this code can be improved upon, but it sill do what you've asked in the question.
EDIT: A link for reference regarding pulling meta data/custom fields data; https://developer.wordpress.org/reference/functions/get_post_meta/
I'm not a super-experienced Wordpress guy, but I generally know what I'm doing, and have been programming for years.
I'm in the middle of building a fairly simple Wordpress site, but lots of posts will be added in the future by the client.
It suddenly dawned on me that all my posts are static, so if changes in design are needed they will need to be applied manually across many pages.
I've searched Google but to no avail. What I need is a plugin or method that allows me to have templates for my posts, into which the unique content for each page are added. Then, if design changes are needed, I simply edit the template and the design will change instantly across all the pages using this template.
I've found plugins which seem to offer post templates, but all they seem to do is create a new post with a pre-made design, but do not make it possible to make changes to that design which are reflected across all the posts that use that template. Maybe I'm missing something simple here, as I can't be the only WP author who wants to achieve this?
I'm not talking about dynamic content. ie I have no need to pull constantly updated data like weather or prices from an API. The content is hand-written for each page, but I would like to separate it from the design, so if design changes are needed they can be made only once from some kind of post template manager, and not individually on each page.
Actually, I'm already using the simple post-snippets plugin, and I realise that I could use this or something similar to achieve my aim, but I don't think this would be very user-friendly for non-technical authors. Instead, it would be ideal if I had a set of custom fields under each post which the authors filled in, and the content was then taken from there and inserted in the page's template.
In principle you should be able to change the design just using CSS selectors. Of course that may have its limitations but there is never a design that fits it all.
For bigger changes you will need to change the WordPress template.
Ok, after some research and poking around, this is what I've come up with.
Install the 'Advanced Custom Fields' and 'Custom Post Templates' plugins , although neither are strictly necessary.
Create a group of custom fields which defines the unique data (URL, media selector etc) for each post.
Most importantly, create a new custom post template following the instructions for the 'Custom Post Templates' plugin. In this template remove the line that outputs the post content (the_content()), and replace it with code that outputs all the shortcodes or whatever for this page type, with placeholders string replaced with the values of the custom variables for that post. Then (in my case) I do something like do_shortcode($page_template) to correctly output the correct content for that page.
I create a new post, leaving the content field completely empty, and filling in the custom field's values as required. Also, you must choose the post template, so it matches the new custom template you create.
$v=get_post_custom_values("image_url")[0];//gets the id of the post which contains the image
$image_url = wp_get_attachment_image_src($v, 'medium')[0]; //get the image (URL?) from the reference
$page_template='[one_third last="no" spacing="yes" background_color="" background_image="" background_repeat="no-repeat" background_position="left top" border_size="2px" border_color="#eaeaea" border_style="solid" padding="20px" class="" id=""][imageframe lightbox="no" style_type="none" bordercolor="" bordersize="0px" borderradius="0" stylecolor="" align="none" link="" linktarget="_self" animation_type="0" animation_direction="down" animation_speed="0.1" class="" id=""] <img src="#image_url#" alt="" />[/imageframe][fusion_text]Email Me | Website[/fusion_text][/one_third][two_third last="yes" spacing="yes" background_color="" background_image="" background_repeat="no-repeat" background_position="left top" border_size="0px" border_color="" border_style="" padding="" class="" id=""][fusion_text]#main_text_html#[/fusion_text][/two_third]';
$page_template=str_replace ( "#image_url#" , $image_url , $page_template );
echo do_shortcode($page_template);
The code above contains the page template hard-coded into the $page_template variable, but it could also be loaded by referencing the id of the post which is acting as the template.
This code currently only inserts the correct image URL. Once it's finished it will also insert the personal email link, website link, and main text.
I know how to add custom fields to pages just fine. However, I would like my meta box to only appear once the user has selected the template "Foo" (filname "foo.php"). I have jQuery loaded on the admin section but I have had no luck in trying to add a custom class to the container that holds the meta box.
Note: I do not want to select by the ID of the meta box div because there are going to be several hidden meta boxes and I will have no way of hiding all of them at once without a class assigned (hence my problem).
This is not a complete solution, but might get you started in the right direction:
In the code which are displaying the meta box, you can use the get_post_meta function to get information about which template the current page is using. Something like this:
if( get_post_meta($post_id, '_wp_page_template', true) != 'foo.php' ) return;
The downside of this is that the user must choose template first, then save the page once in order to make the admin page reload with the right settings.
Otherwise I think the solution you describe using jQuery somehow to hide the meta boxes is the best way to do it.
Good luck
My solution to this was to create a div in each custom meta box and then use jquery to hide all of the parent elements of those divs.