Wordpress generating permalink of posts

Question

I would like to know how wordpress generates the permalink for the post while writing the post.

Is it using javascript?

Answer 1

hi how are you yes its done by JS and ajax as soon you write title it will send title with ajax and change into permalink and get permalink field. i found source code hope it will help you.

wp-admin/includes/post.php line 1257

function get_sample_permalink_html( $id, $new_title = null, $new_slug = null ) {
    $post = get_post( $id );
    if ( ! $post )
        return '';

    list($permalink, $post_name) = get_sample_permalink($post->ID, $new_title, $new_slug);

    if ( current_user_can( 'read_post', $post->ID ) ) {
        $ptype = get_post_type_object( $post->post_type );
        $view_post = $ptype->labels->view_item;
    }

    if ( 'publish' == get_post_status( $post ) ) {
        $title = __('Click to edit this part of the permalink');
    } else {
        $title = __('Temporary permalink. Click to edit this part.');
    }

    if ( false === strpos( $permalink, '%postname%' ) && false === strpos( $permalink, '%pagename%' ) ) {
        $return = '<strong>' . __('Permalink:') . "</strong>\n" . '<span id="sample-permalink" tabindex="-1">' . $permalink . "</span>\n";
        if ( '' == get_option( 'permalink_structure' ) && current_user_can( 'manage_options' ) && !( 'page' == get_option('show_on_front') && $id == get_option('page_on_front') ) ) {
            $return .= '<span id="change-permalinks"><a href="options-permalink.php" class="button button-small" target="_blank">' . __('Change Permalinks') . "</a></span>\n";
        }
    } else {
        if ( function_exists( 'mb_strlen' ) ) {
            if ( mb_strlen( $post_name ) > 30 ) {
                $post_name_abridged = mb_substr( $post_name, 0, 14 ) . '&hellip;' . mb_substr( $post_name, -14 );
            } else {
                $post_name_abridged = $post_name;
            }
        } else {
            if ( strlen( $post_name ) > 30 ) {
                $post_name_abridged = substr( $post_name, 0, 14 ) . '&hellip;' . substr( $post_name, -14 );
            } else {
                $post_name_abridged = $post_name;
            }
        }

        $post_name_html = '<span id="editable-post-name" title="' . $title . '">' . $post_name_abridged . '</span>';
        $display_link = str_replace( array( '%pagename%', '%postname%' ), $post_name_html, urldecode( $permalink ) );
        $pretty_permalink = str_replace( array( '%pagename%', '%postname%' ), $post_name, urldecode( $permalink ) );

        $return =  '<strong>' . __( 'Permalink:' ) . "</strong>\n";
        $return .= '<span id="sample-permalink" tabindex="-1">' . $display_link . "</span>\n";
        $return .= '&lrm;'; // Fix bi-directional text display defect in RTL languages.
        $return .= '<span id="edit-slug-buttons"><a href="#post_name" class="edit-slug button button-small hide-if-no-js" onclick="editPermalink(' . $id . '); return false;">' . __( 'Edit' ) . "</a></span>\n";
        $return .= '<span id="editable-post-name-full">' . $post_name . "</span>\n";
    }

    if ( isset( $view_post ) ) {
        if( 'draft' == $post->post_status ) {
            $preview_link = set_url_scheme( get_permalink( $post->ID ) );
            /** This filter is documented in wp-admin/includes/meta-boxes.php */
            $preview_link = apply_filters( 'preview_post_link', add_query_arg( 'preview', 'true', $preview_link ), $post );
            $return .= "<span id='view-post-btn'><a href='" . esc_url( $preview_link ) . "' class='button button-small' target='wp-preview-{$post->ID}'>$view_post</a></span>\n";
        } else {
            if ( empty( $pretty_permalink ) ) {
                $pretty_permalink = $permalink;
            }

            $return .= "<span id='view-post-btn'><a href='" . $pretty_permalink . "' class='button button-small'>$view_post</a></span>\n";
        }
    }

    /**
     * Filter the sample permalink HTML markup.
     *
     * @since 2.9.0
     *
     * @param string      $return    Sample permalink HTML markup.
     * @param int|WP_Post $id        Post object or ID.
     * @param string      $new_title New sample permalink title.
     * @param string      $new_slug  New sample permalink slug.
     */
    $return = apply_filters( 'get_sample_permalink_html', $return, $id, $new_title, $new_slug );

    return $return;
}

this is the js which is used

wp-admin/js/post.js line 706

// permalink
function editPermalink() {
    var i, slug_value,
        c = 0,
        e = $('#editable-post-name'),
        revert_e = e.html(),
        real_slug = $('#post_name'),
        revert_slug = real_slug.val(),
        b = $('#edit-slug-buttons'),
        revert_b = b.html(),
        full = $('#editable-post-name-full');

    // Deal with Twemoji in the post-name
    full.find( 'img' ).replaceWith( function() { return this.alt; } );
    full = full.html();

    $('#view-post-btn').hide();
    b.html('<a href="#" class="save button button-small">'+postL10n.ok+'</a> <a class="cancel" href="#">'+postL10n.cancel+'</a>');
    b.children('.save').click(function() {
        var new_slug = e.children('input').val();
        if ( new_slug == $('#editable-post-name-full').text() ) {
            b.children('.cancel').click();
            return false;
        }
        $.post(ajaxurl, {
            action: 'sample-permalink',
            post_id: postId,
            new_slug: new_slug,
            new_title: $('#title').val(),
            samplepermalinknonce: $('#samplepermalinknonce').val()
        }, function(data) {
            var box = $('#edit-slug-box');
            box.html(data);
            if (box.hasClass('hidden')) {
                box.fadeIn('fast', function () {
                    box.removeClass('hidden');
                });
            }

            b.html(revert_b);
            real_slug.val(new_slug);
            $('#view-post-btn').show();
        });
        return false;
    });

Answer 2

It uses AJAX. While you are writing the post, the JS sends the title to the server, where the permalink is generated and sent back to the page.

Answer 3

The permalink is not "generated", for using permalinks, read about mod_rewrite.

The link looks like "write-your-post-title-here" is an actual file, which is not.

The page will redirect you to maybe "posts.php", there the appendex is being analyzed and then a db call is started with exactly that options.

something like

"SELECT * FROM posts WHERE title LIKE `write-your-post-title-here`"

No JS, no AJAX.

JS is used to "update" the optical state of the link. So if you click on edit, and change the post title, JS will dynamically update the text that you can see what you're actually typing.