How to Customize Twenty Twenty Three Theme

by Engr Kh Mashiur Rahman | Jun 19, 2023 | IT WordPress

Benefit of Twenty Twenty Three Theme

Question: Are there any benefits of Twenty Twenty Three theme?

Answer: Switching to a newer theme like the 2023 theme will not affect your current posts, or your other website content. They will be preserved, however you should consider the layout or design of the site as they will be overwritten by the 2023 theme design. As for the benefits of using a newer WordPress.com theme, we can assure regular updates for that theme, better compatibility with latest version of WordPress and popular plugins, there will be improved performance which also leads to improved SEO. Lastly, you will get a modern design

Customization of twenty twenty three theme

Question: How can I learn customization of twenty twenty three theme

Answer: You can check out the live demo through Appearance > Themes, and then search for Twenty Twenty-Three. Or you can open this link: wordpress.com/theme/twentytwentythree

Happiness Engineer says:Through the link provided, you will find a brief description of the theme, and a few instructions on how you can customize. You can use the new Site Editor with this theme which will give you a lot of options that before could only be done through custom code or plugins.

For custom designs using CSS, you’ll be able to do that in Appearance > Additional CSS

Which is the best theme twenty twenty one or twenty twenty three

How to add right side bar in twenty twenty three theme have no header.php and footer.php or function.php
In twenty twentythree themes, you can add blocks. Header/footer etc can be customized via FSE.I mentioned FSE to insert blocks. https://wordpress.com/support/site-editing/

I dont found to add code of goole analytics , adsense etc
To add Google analytics and other scripts, you can use plugins like https://wordpress.com/plugins/insert-headers-and-footers/

Machine Category is Right Sidebar

By default, this theme doesn’t have the option to add a sidebar. It can be added through the templates editor but for that, you’ll need to adjust the overall layout of the site

Header.php and Footer.php of Twenty Twenty Three

How to customization Header in twenty twenty three theme?
There you have the option to change the footer or header area for different templates. Here is our support guide as well for template editing: wordpress.com/support/templates/edit-the-page-template/

Where is Header.php & Footer.php in twenty twenty three theme?
If you need to add some code into the head tag, you would need to add it into a plugin like code snippets. wordpress.org/plugins/insert-headers-and-footers/. You would not be able to add the code any other way. Please note that this requires some level of comfort working with code; if that’s not you, I recommend you look for a developer to help. My best advice is to use – without any worry – the WP Code plugin

Site Verification Services

How can I add meta tags in

It doesn’t matter what theme it is since the meta tag can be added regardless of the theme. You can follow this support guide to do this: wordpress.com/support/site-verification-services/

Website Application Development and Management Cost for RMG

by Engr Kh Mashiur Rahman | Jun 6, 2023 | IT WordPress

Website Application Cost for RMG

Website Application Development and Management Cost for RMG

How to Customize WordPress Block with ADDITIONAL CSS CLASS(ES)

by Engr Kh Mashiur Rahman | Apr 2, 2023 | IT WordPress

At first make a class

.lineheight_p { line-height: 2.2em;
font-size: 40px; }

Finally paste lineheight_p in ADDITIONAL CSS CLASS(ES)

How to Change Font Size, Color, Background of a specific letter

In WordPress, if you want to change the font size of a specific letter, you would typically use a combination of HTML and CSS.

Here’s a step-by-step process:

Identify the Letter in the Content:

Wrap the specific letter in a span tag.

<span class="special-letter">A</span>pple

This would target the letter “A” in the word “Apple”.

Styling the Letter:

Add custom CSS to style the wrapped letter.
There are several ways to add custom CSS in WordPress, one of the most common methods is via the Customizer.
Go to Appearance > Customize > Additional CSS and add:

.special-letter {
    font-size: 30px;            /* Adjust to your desired size */
    color: red;                /* Adjust to your desired font color */
    font-weight: bold;         /* Makes the letter bold */
    background-color: yellow;  /* Adjust to your desired background color */
    padding: 2px;              /* Optional: add some space around the letter */
}

The padding property is optional, but it can give some space around the letter, making the background color more evident.

WordPress Management by Tuhin

by Engr Kh Mashiur Rahman | Feb 13, 2023 | IT WordPress

WordPress Management by Tuhin

WordPress Management by Tuhin

How to Change Custom Fonts in WordPress -English/Arabic/Bangla/Google

by Engr Kh Mashiur Rahman | Jan 31, 2023 | IT WordPress

How to Change Custom Fonts

Google Fonts Setting

Go to fonts.google.com >> Select Arabic Language>> Select and click on a Font >>Click on font size >> Click on View Selected families box >> It will show code >> Click on Import option button >> Click this code and copy below code

Paste Generate Code of Google Fonts in Additional CSS/Style.css

 @import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&display=swap');

Go to customize >> Then go to “Additional CSS ” >> and Paste it on “Additional CSS “

Block Wise Font Change in Guttenberg Editor

Generate a class in Additional CSS/Style.css and input CSS font variables to make it enhance. An example is given below-

.paragrahp_fonts {
	line-height: 2.2em;
	font-size: 40px;
	font-family: 'Amiri Quran', serif;
}

Tricks and Ticks

@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');
body{font-family: 'Amiri', serif;}

body {
margin: 0;
font-family:'Amiri', serif !important;
}

.our
body,td,p{font-family: 'Alkalami', serif;}

body,td,p{font-family: 'Amiri', serif;}

List of Arabic Fonts with code

I have generate some codes below, just copy it and paste it on “Additional CSS” . As a result Arabic Fonts will change globally

Noto Sans Arabic Font *******

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic&display=swap');
*
{font-family: 'Noto Sans Arabic', sans-serif;}

12. Noto Naskh Arabic Font *****

@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic&family=Readex+Pro&display=swap');
*
{font-family: 'Noto Naskh Arabic', serif;}

Amiri Quran Font ****

@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&display=swap');
*
{font-family: 'Amiri Quran', serif;}

El Messiri **

@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&family=El+Messiri:wght@500&display=swap');;
*
{font-family: 'El Messiri', sans-serif;}

Lateef Font ***

@import url('https://fonts.googleapis.com/css2?family=Lateef&display=swap');
*
{font-family: 'Lateef', serif;}

Mirza Font ***

@import url('https://fonts.googleapis.com/css2?family=Lateef&family=Mirza&display=swap');
*
{font-family: 'Mirza', cursive;}

Cairo Play Font ***

@import url('https://fonts.googleapis.com/css2?family=Cairo+Play&display=swap');
*
{font-family: 'Cairo Play', cursive;}

Katibeh Font **

@import url('https://fonts.googleapis.com/css2?family=Katibeh&display=swap');
*
{font-family: 'Katibeh', cursive;}

Scheherazade New Font ***

@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New&display=swap');
*
{font-family: 'Scheherazade New', serif;}

Cairo Font

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;600&display=swap');
*
{font-family: 'Cairo', sans-serif;}

Tajawal Font

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;600&family=Tajawal&display=swap');
*
{font-family: 'Tajawal', sans-serif;}

Mada Font

@import url('https://fonts.googleapis.com/css2?family=Mada&display=swap');
*
{font-family: 'Mada', sans-serif;}

Changa Font

@import url('https://fonts.googleapis.com/css2?family=Changa&display=swap');
*
{font-family: 'Changa', sans-serif;}

Amiri Font **

@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');
*
{font-family: 'Amiri', serif;}

IBM Plex Sans Arabic Font

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@1,700&display=swap')
*
{font-family: 'IBM Plex Sans Arabic', sans-serif;}


Almarai

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@800&display=swap');
*
{font-family: 'Almarai', sans-serif;}

Readex Pro Font

@import url('https://fonts.googleapis.com/css2?family=Readex+Pro&display=swap');
*
{font-family: 'Readex Pro', sans-serif;}

Markazi Text Font

@import url('https://fonts.googleapis.com/css2?family=Markazi+Text&display=swap');
*
{font-family: 'Markazi Text', serif;}


Vazirmatn Font

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn&display=swap');
*
{font-family: 'Cairo', sans-serif;}

Baloo Bhaijaan 2 Font

@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap');
*
{font-family: 'Baloo Bhaijaan 2', cursive;}

How to Change Custom Fonts

To add custom fonts in WordPress, you can follow these steps:

1. Find the font you want to use and download it to your computer.
2. Upload the font files to your WordPress site. You can do this by going to your WordPress dashboard and navigating to Appearance > Editor > functions.php. Add the following code to the bottom of the file:

@font-face {
    font-family: 'Font Name';
    src: url('path/to/font.ttf') format('truetype'),
         url('path/to/font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Replace ‘Font Name’ with the name of your font and ‘path/to/font.ttf’ and ‘path/to/font.woff’ with the location of your font files.

3. Save the file and refresh your site. Your font should now be available to use in your theme.
4. To use the font in your theme, you will need to add CSS code to your stylesheet. Go to Appearance > Editor > style.css and add the following code:

body {
    font-family: 'Font Name', sans-serif;
}

Replace ‘Font Name’ with the name of your font.

5. Save the file and refresh your site. Your font should now be applied to your site.

Custom Web Fonts in Twenty Twenty Three Theme (Method 1)

If you’re using the default Twenty Twenty Three theme in WordPress, here’s how you can set the Arabic font:

• Choose an Arabic Font: Select the Arabic font you want to use on your WordPress website. You can find Arabic fonts from font websites or perform an online search.
• Install the Arabic Font: Download the font files to your computer. Typically, fonts come in a zip file format. Extract the font files from the zip folder.
• Create a Child Theme (Optional): It’s recommended to create a child theme before making any modifications to the Twenty Twenty Three theme. This ensures that your changes won’t be overwritten when the theme is updated. You can follow the WordPress documentation to create a child theme.
• Upload the Font Files: Connect to your WordPress website using FTP or through the hosting file manager. Navigate to the child theme directory (e.g., wp-content/themes/twentytwentythree-child) and create a new folder named “fonts.” Upload the Arabic font files (e.g., .ttf, .woff) to this “fonts” folder.
• Edit the Child Theme’s CSS: In the child theme directory, locate the style.css file and open it with a text editor.
• Add Font-Face CSS Code: Inside the style.css file, add the following CSS code to define the Arabic font face:

@font-face {
  font-family: 'YourFontName';
  src: url('fonts/fontfile.ttf') format('truetype');
  /* Add more src lines if your font has multiple file formats (e.g., .eot, .woff) */
}

• Replace ‘YourFontName’ with the desired font name and ‘fonts/fontfile.ttf’ with the relative path to the font file within the child theme’s “fonts” folder.
• Apply the Arabic Font to the Website: To apply the Arabic font to specific elements, such as headings or paragraphs, you’ll need to target those elements in the CSS. For example:

body {
  font-family: 'YourFontName', sans-serif;
}

• Replace ‘YourFontName’ with the font name you specified in the previous step. You can target specific elements by using their corresponding CSS selectors.
• Save the Changes: Save the style.css file and upload it back to your WordPress website, replacing the existing file.
• After following these steps, the Arabic font should be applied to your Twenty Twenty Three theme. Remember to clear any caching plugins or CDN caches you may be using to see the font changes take effect.

FAQ

WordPress Answer >> wordpress.org/support/topic/font-issue-when-switching-to-arabic/
You can change the font of the arabic usign a bit of coding.
Go to Appearance –> Customize –> Additional CSS and add this code :

@import url(‘https://fonts.googleapis.com/css?family=Padauk&display=swap’);
body.translatepress-ar{ font-family:Padauk; } // Use your desired font and language code

Tutorial Links