Is there a way to add a custom field to change the image displayed in my web site's header?
I want the same imageto be displayed in every page, so I dont know how to make a general custom field instead of a field specific for each page.
<?php
$img = the_field('background_url');
?>
Add Options page for ACF with the help of below code:
if( function_exists('acf_add_options_page') ) {
acf_add_options_page();
}
and then assign options to acf field.
now you can access this common field with <?php the_field('logo', 'option'); ?>
If you are using ACF Pro then you can create an option page and create Header, Footer fields into that. check the below link.
https://www.advancedcustomfields.com/resources/options-page/
I'm assuming that the header image is loaded from the header.php file in your theme?
If you want the same background image on all pages you could set the default header image via the set_theme_mod function. The set_theme_mod is responsible for all modification values for the current theme. In this case you would want to set the header_image property.
Start with setting the default header_image for your theme in your themes functions.php file:
function theme_setup() {
set_theme_mod(‘header_image’, ‘http://yoursite.com/wp-content/uploads/yourimage.png’);
}
add_action('after_setup_theme', 'theme_setup');
Display the newly set header image in your theme file responsible for displaying your header (assumingly header.php):
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<img alt="" src="<?php header_image(); ?>
</div>
<?php endif; ?>
If you want to be able to upload custom images from within the Customizer (Appearance > Header) in the wp admin section you could use the custom_header property, you'll find more information about it here:
Theme Handbook: Custom Headers
I found a way after reading ACF documentation, in order to make the custom field's scope global, I have to add the post/page ID on it:
$video_file = get_field('background_video',156);
Please install ACF plugin and you would easily get the image. While creating an image field there would be an option which name is Return Format, please select any of them and you would get results accordingly.
Image Array
Image URL
Image ID
For further please follow ACF official documentation.
AdvancedCustomField
Related
I have been building my first theme on WordPress and have run into problem while adding content into different sections.
My HTML is somewhat like this,
<div id="maintext">
<-- Text -->
</div>
<div id="products">
<-- Text and Images -->
</div>
<div id="about_company">
<-- Text boxes -->
</div>
How do I make sure the content added via the WordPress editor falls under the respective divs ? For the "maintext" div I'll load the content from the page itself but how do I add content to the other 2 divs dynamically ?
I searched on a couple of forums and many suggested to add content using widgets, is there any way it can be done without using widgets ?
Any help will be gladly appreciated.
Unfortunately adding multiple editable fields in a single page is not particularly easy using WordPress by itself.
Many WP devs I know (myself included) rely on the Advanced Custom Fields Plugin for additional content fields.
The steps to make this happen:
1) Install the ACF the plug.
2) In the settings area for ACF create some new fields.
3) Assign the new fields to appear for a specific page or set of pages.
4) Update your page-template for the given page(s) so that the new fields are displayed.
For instance you might create a set of standard wysiwyg fields and then assign them to the 'overview' page. Let's call these fields: main_text, products_info and about_company. Once the fields have been created and assigned to a page, when you edit that page the additional fields will be available to edit.
For these new fields to be seen by visitors, they must be added to the page-template you use for your overview page. The code could be something like this:
<div id="maintext">
<!-- Text -->
<?php if(get_field('main_text')){ //if the field is not empty
echo '<p>' . get_field('main_text') . '</p>'; //display it
} ?>
</div>
<div id="products">
<!-- Text and Images -->
<?php if(get_field('products_info')){ //if the field is not empty
echo '<p>' . get_field('products_info') . '</p>'; //display it
} ?>
</div>
<div id="about_company">
<!-- Text boxes -->
<?php if(get_field('about_company')){ //if the field is not empty
echo '<p>' . get_field('about_company') . '</p>'; //display it
} ?>
</div>
There are lots of good examples here. If you are feeling really ambitious, rather than install the plugin you could even include ACF directly in your theme.
You've got three options I believe:
Create a widget area where you can then display the content in a text widget: http://codex.wordpress.org/Function_Reference/register_sidebar
Create a template where you then get the content of a different page: http://codex.wordpress.org/Page_Templates#File_Folders
Create a new meta box for all your pages: http://codex.wordpress.org/Function_Reference/add_meta_box
I believe that the thing you are looking for is option 2. The others are more full-site oriented, if you want the extra content to show up on every single page.
If you are writing the theme, maybe you would like to consider using a WordPress Framework so you don't have to start from scratch.
If that is not the case, think of the end user. How will they add sections to pages and posts? Will they have to move across places within the WordPress UI, or would they rather user short codes?
My recommendation is to build a plugin that render the section within the document content. Or widget content if that is the case.
I wrote a little piece of code to illustrate how you can accomplish such a thing, and also because I kind of need it right now :D. You can find it on github here https://github.com/lionpage/Front-Office-Document-Sections
Hope this helps
<div id="maintext">
<?php the_content(); ?>
</div>
<div id="products">
<?php // echo wp function to get product data; ?>
</div>
<div id="about_company">
<?php // echo wp function to get about companydata; ?>
</div>
I've run into this issue several times now, and while the question is 3 years old, I think it's still rather current. I've succesfully used the Multiple Content Blocks plugin sometimes now:
https://ltz.wordpress.org/plugins/multiple-content-blocks/
After installing the plugin, you can just include the_block in your template:
<div id="maintext">
<?php the_content(); ?>
</div>
<div id="products">
<?php the_block('products') ?>
</div>
<div id="about_company">
<?php the_block('company') ?>
</div>
hi im currently developing a theme with that set up.
there are two ways to achieve this:
widgetized and fixed admin panel (customizer options)
i am using the two in my themes
if widgets
create a .php file that includes the widgets sections
create a widget for that section
if fixed in admin panel
you have to include the .php section in your functions.php
edit * advantage of widgetized is you can arrange them just like in a regular sidebar
Was struggling with this, and did not want to use a plugin. The only WordPress native option I found was to use Custom Fields. This works, but only for text, and is rather cumbersome.
The other non-plugin option is to simply use HTML in the WordPress editor, but this is of course far from ideal either.
Finally I gave up, and opted for the Advanced Custom Fields plugin as well.
How to change header in Wordpress Blog page and all Post pages only.
I want a custom header in Blog page and all single posts page.
Thanks
You can use conditional tags within Wordpress:
http://codex.wordpress.org/Conditional_Tags
Basically, you will need to create the content you want only for the blog and post pages and wrap this within the conditional tags:
P.S Don't forget to include the category, and archive pages - as well as the post pages.
is_single(), is_archive(), is_category()
<?php if (is_single()) { ?>
// This is a post page
<?php } else { ?>
//This is not a post page
<?php } ?>
Hope this helps.
To include different header for specific pages change get_header($name) function call inside templates and add $name attribute. Wordpress will load header-{name}.php if file exists, if not, default header header.php will be loaded. Check out template hierarchy for templates where you need to change get_header() function call ( single.php, page.php ).
Wordpress documentation:
get_header
template hierarchy
I want to create a page template that has a pre-fixed css. Lets say I name it page-sevencol.php then I know that the content will have a fixed width and a specific style and so on. My pages have different layouts thats why I need to create these kind of templates.
Is it possible? if so how? Ive looked in the wp codex and it does not seem to have the answer. Please take a minute to help me.
Thank you!
you seem to need just a limited set of templates. The question is: do you want to apply them automatically? Basically, there are two techniques to apply a template to a page (or post or custom post, etc.) in WordPress.
First method: using the template naming convention to get the template automatically applied to a page (or post) with the same name.
In this case, you create a page page-mynewpage.php and this template will automatically get applied to your page named /mynewpage/.
Second method: you create a template by creating a page (let's say : template1.php) and declaring it as a template with a comment at the top of the page:
/**
* Template Name: Template1
*
*/
This template will now be selectable inside the admin of WordPress to be applied to any page:
So if A) you only need a limited set of templates & B) are ok to select them on a per-page basis in the admin, this is your solution. You would just need to create as many pages as you need templates, not forgetting to include the comments that declare them as templates and using a different name each time.
If you need your templates to be applied dynamically, then we need more info about the logic to use for select each template...
EDIT : That is it, Abel (just read your comment). Your page is mainly generated with 4 elements: header.php, sidebar.php, footer.php and another page to produce the content, but this page is different depending on where you are in the site. If you are on a page, it will be, by default, page.php. If you are reading a post, WordPress will by default use single.php.
To apply all your different templates, just go and open page.php in your theme folder. Save it under another name, like page-template7cols.php. Insert a comment like I just explained above, so this template will show in your admin next time you create a new page. Adapt it the way you want (changing the HTML / PHP and therefore adapting the way the content of the page will be displayed). Do the same for your other 9 templates.
Then, everytime you create a new page, just start by selecting the proper template in your dropdown (see previous screen capture). And whenever you will make a change to page-template7cols.php, for example, the changes will be reflected on all pages for which you have selected this template.
/**
Template Name: Template1
*/
<?php get_header(); ?>
<div class="content-wrap sevencol clearfix">
<div class="row clearfix">
<div class="content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
I use Barecity Theme for WordPress. i built everything, but now i need to add a single.php file to theme. now it displays all post content at homepage, I created a short_desc Custom Field. and I call it from code with;
<?php //get_post_meta($post->ID, 'short_desc', true); ?>
it is fine. but i need to display this short desc at home page listing, and the main content at details page. how can do that?
I appreciate helps!!
It sounds like what you are trying to do is show a custom field that you have set on a post on the index page (which lists all the posts).
To do that you'll need to modify index.php by adding your snippet where you would like to have the short description.
<?php echo get_post_meta($post->ID, 'short_desc', true); ?>
You need to use echo to display the results from the get_post_meta function.
Depending on how your posts are setup you can also use the More button when you write your posts. This will cut off your post at a certain point that you decide and only show that short part on the index and archive pages.
Another option would be to use
<?php the_excerpt(); ?>
Which shows the first 55 words (this can be adjusted though) of the post.
Hope that helps,
Paul
What's the best way to associate an image with a post in WordPress?
What I mean by that is when each post has a 'header' image which is not in the body of the post. You'd most likely use it to show a small image next to each post when they're listed somewhere.
I know you can use custom fields with posts, but are there any better ways of doing it?
Thanks in advance.
If you go the custom field route - in your template code you can save the value of the custom field to a variable and then echo it out to your image.
<?php $post_image = get_post_meta($post->ID, post_image, true); ?>
<?php if( $post_image != "" && isset($post_image) ) : ?>
<p><img src="<?php echo $post_image; ?>" alt="<?php echo $post_image; ?>" /></p>
<?php endif; ?>
<?php the_content('read more...'); ?>
The function the_content() may or may not be what you will end up using - for more control, you can try setting a new WP_Query() and then revamping the loop.
Not really any better way than custom fields, although you could always write out a unique class name containing the post ID on the container div and add the images via CSS each time you add a post. You'd end with a potentially huge CSS file though so I'd go for custom fields myself.
If you want a different image per post then use Customs Fields as suggested before - the only problem with that will be that Custom Fields are text fields and so you will have to upload your image and then paste the filename into your Custom Field. You could use the normal Add Image facility in the main post entry form but that will break up your workflow a bit as you will have to: upload the image in main post form, copy image url from HTML of form, remove image from form, paste URL into a custom field.
A bit of a pain!
If you want to use an image per category. Say, for example, you have a thumbnail for news items and a thumbnail for tutorials and so on. You could edit your WP theme template, check the category inside The Loop and show the relevant image from there.
The first option is a bit of a pain and the second requires some PHP coding.
A good way of associating an image with a post is to call the first image attached to that post in your template file.
I've elaborated a bit in this thread:
How would you recommend adding an image as a custom field in WordPress?